Widgets
This presentation is the property of its rightful owner.
Sponsored Links
1 / 25

Widgets PowerPoint PPT Presentation


  • 128 Views
  • Uploaded on
  • Presentation posted in: General

Widgets. Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin. Origin of Web Widgets. Modeled after early GUIs Vannevar Bush: “As We May Think” ‘45 Douglas Engelbart demo ‘68 Alan Kay: enactive, iconic & symbolic. Web Widgets.

Download Presentation

Widgets

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Widgets

Widgets

Lisa Kenyon

Fall 2002

LIS 385T: Information Architecture and Design

The University of Texas at Austin


Origin of web widgets

Origin of Web Widgets

  • Modeled after early GUIs

  • Vannevar Bush: “As We May Think” ‘45

  • Douglas Engelbart demo ‘68

  • Alan Kay: enactive, iconic & symbolic


Web widgets

Web Widgets

  • GUI: collection of widgets

  • Widgets: individual elements

  • Web Widgets: subset of widgets

    • HTML

    • Java

    • Javascript

    • Cascading Style Sheets

    • Flash


Standard web widgets

Standard Web Widgets

  • Implemented in HTML

  • Basic data interaction

  • Any HTML enabled device

  • Examples:

    • Button

    • Options

      • Check Box

      • Radio Button

    • List Box

    • Text Box


Action buttons

Action Buttons

  • Also known as command, or push buttons

  • When clicked, cause a specific, immediate action to be carried out

    • Examples:

      • Submitting information from a form

      • Logging in to an online account

  • Provide the user feedback

  • Should be clearly defined/labeled

Submit


Interactive feedback

Interactive Feedback

  • Responds visually to user interaction

  • Provides logical feedback

  • May be cancelled


Scroll bars

Scroll Bars

  • Component of other complex widgets

    • Main HTML display window

    • List boxes

    • Text entry boxes

  • Good example of Interactive Feedback


Check boxes

Check Boxes

  • Binary (yes or no) choices

  • Each checkbox acts

    independent of others

  • Avoid allowing a checked box to change the state of other boxes in a group

    (Violates the autonomous character of the

    check box)


Radio buttons

Radio Buttons

  • Single selection among several choices

  • Choices are mutually exclusive

  • Labeled and grouped

    logically


Poor radio button reception

Poor Radio Button Reception

Do not use a radio button for only one option. Once selected, it cannot be deselected.

Do not use radio buttons when users should be able to select more than one option from a group.


List boxes

List Boxes

  • Types of List Boxes:

    • Pop-Up / Drop-Down (one choice)

    • Multi-select (many choices)

  • Effective at saving screen space

  • Scrollable window when options exceed screen space

  • Avoid using for auto-navigation


In need of a list box

In Need of a List Box

  • Too many radio buttons

    • Need pop-up or drop-down list box

  • Too many check boxes

    • Need multi-select list box


Text boxes

Text Boxes

  • Allow for user input and editing

  • May be single or multi-line

  • Do not provide input masks

  • Make text box size of allowable characters

    (Use multi-line box for large character length)

  • Provide formatting instructions or examples

    (e.g. credit card number, phone number, etc.)


Pull down menus

Pull-Down Menus

  • Collection of commands and sub-menus

  • Part of the browser and Web experience

  • Not strictly and HTML widget


Hybrid web widgets

Hybrid Web Widgets

  • Created using additional technologies

    • Java, Javascript, CSS & Flash

  • Not compatible with all browsers or web devices

  • Often mimic application widgets

    • Combo-Boxes

    • Sliders

    • Mouse-Overs

    • Date Pickers

  • Explore new interactive concepts


Future web widgets

Future Web Widgets

  • HTML evolving into pure XML language

  • Many new technologies based on XML

    • SVG: Scalable Vector Graphics

    • XUL: XML User-Interface language

    • SMIL: Synchronized Multimedia Integration Language (extension of xHTML)


Conclusion

Conclusion

  • Standard HTML widgets

  • Widgets based on metaphors

  • Interactive Feedback

  • Relational widgets using Visual Formalisms

  • Hybrid widgets using plug-in technology

  • Know your audience

  • Use widgets as they were designed


For more information

For More Information . . .

Apple Computer, Inc. (2002a, June). Human interface design. In Inside Mac OS X: Aqua human interface guidelines (pp. 27-40). Cupertino, CA: Apple Computer. Retrieved October 20, 2002 from http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/AquaHIGuidelines.pdf

Apple Computer, Inc. (2002b, June). Controls. In Inside Mac OS X: Aqua human interface guidelines (pp. 119-148). Cupertino, CA: Apple Computer. Retrieved October 20, 2002 from http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/AquaHIGuidelines.pdf


For more information1

For More Information . . .

Barnes, Susan B. (2000). Bridging the differences between social theory and technological invention in human-computer interface design. New Media & Society, 2(3), 353-372.

Berners-Lee, Tim. (n.d.). The World Wide Web: A very short personal history. Retrieved October 21, 2002 from http://www.w3.org/People/Berners-Lee/ShortHistory

Bollaert, Jodi. (2002a, June). Using Web widgets wisely, part 1 [from IBM Developer Works usability articles]. Retrieved October 20, 2002 from http://www106.ibm.com/developerworks/usability/library/us-widget/


For more information2

For More Information . . .

Bollaert, Jodi. (2002b, June). Using Web widgets wisely, part 2 [from IBM Developer Works usability articles]. Retrieved October 20, 2002 from http://www106.ibm.com/developerworks/usability/library/us-widget2/

Bush, Vannevar. (1945, July). As we may think. The Atlantic Monthly, 176(1), 101-108. Retrieved October 19, 2002 from http://www.theatlantic.com/unbound/flashbks/computer/bushf.htm

Dictionary.com. (2002). Widget [Definition]. Retrieved October 20, 2002 from http://www.dictionary.com/search?q=widget


For more information3

For More Information . . .

Eibl, Maximilian, Mandl, Thomas, & Stempfhuber, Maximilian. (n.d.). Metaphors vs. visual formalisms in visual information seeking. Retrieved November 15, 2002 from http://www.comp.lancs.ac.uk/computing/research/mcg/mmm/papers/eibl.pdf

Eibl, Maximilian, Mandl, Thomas, & Stempfhuber, Maximilian. (n.d.). Metaphors vs. visual formalisms in visual information seeking [Powerpoint presentation]. Retrieved November 15, 2002 from www.comp.lancs.ac.uk/computing/research/mcg/mmm/presentations/stempfhuber.ppt


For more information4

For More Information . . .

Gasch, Alan. (1996). Alan Kay. Retrieved October 21, 2002 from http://ei.cs.vt.edu/~history/GASCH.KAY.HTML

Instone, Keith. (1997, Winter). Usability engineering for the Web. World Wide Web Journal, 2(1). Retrieved October 18, 2002 from http://www.w3j.com/5/s3.instone.html

Microsoft Corporation. (2002a). Objects as metaphor [hyperlinked from Fundamentals of designing user interaction]. In Official guidelines for user interface developers and designers. Redmond, WA: Microsoft. Retrieved October 20, 2002 from http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnwue/html/welcome.asp


For more information5

For More Information . . .

Microsoft Corporation. (2002b). User-centered design principles [hyperlinked from: Fundamentals of designing user interaction]. In official guidelines for user interface developers and designers. Redmond, WA: Microsoft. Retrieved October 20, 2002 from http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnwue/html/welcome.asp

Microsoft Corporation. (2002c). Controls [hyperlinked from: Windows interface components]. In official guidelines for user interface developers and designers. Redmond, WA: Microsoft. Retrieved October 20, 2002 from http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnwue/html/welcome.asp


For more information6

For More Information . . .

Musciano, Chuck, & Kennedy, Bill. (2000). HTML & XHTML: The definitive guide (4th ed.). Sebastopol, CA: O’Reilly & Associates.

Myers, Brad (Editor). (1990). All the widgets [Video]. United States. (Available from Association for Computing Machinery, 1515 Broadway, New York, NY 10036)

Nute, Betsy. (2002, August 24). Standard Web widgets. In BLAF guideline specifications [from Oracle Technology Network]. Retrieved October 20, 2002 from http://technet.oracle.com/tech/blaf/specs/standardwebwidgetspec.html


For more information7

For More Information . . .

Whatis.com. (2001, July 27). Widget [Definition]. Retrieved October 20, 2002 from http://whatis.techtarget.com/definition/0,,sid9_gci213364,00.html


  • Login