Widgets

Lisa KenyonFall 2002

LIS 385T: Information Architecture and DesignThe 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 GUI: collection of widgets Widgets: individual elements Web Widgets: subset of widgets

HTML Java Javascript Cascading Style Sheets Flash

Standard Web Widgets Implemented in HTML Basic data interaction Any HTML enabled device Examples:

Button Options

Check Box Radio Button

List Box Text Box

O ptions

Include cata logShip: UPS FedEx

Default

AcornFreeBSDLinuxM acO S XO S/2 W arpW indows

C om m ents

Send the item viastandard

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 formLogging in to an online account

Provide the user feedback Should be clearly defined/labeled

Submit

Interactive Feedback

Responds visually to user interaction

Provides logical feedback

May be cancelled

Scroll Bars

Component of other complex widgets Main HTML display window List boxes Text entry boxes

Good example of Interactive Feedback

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

Single selection among several choices

Choices are mutually exclusive

Labeled and grouped logically

Poor Radio Button Reception

Consent

I consent to a llowEvil Corp. to fillm y em ail box w ithuseless SPAM .

Pizza Toppings

M ushroom sO nionsO livesPeppers

Tom atoesG arlicBroccoliA rtichokes

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 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

Default

AcornFreeBSDLinuxM acO S XO S/2 WarpW indow s

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 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.)

Com m ents

Send the item viastandard

Pull-Down Menus

Collection of commands and sub-menus Part of the browser and Web experience Not strictly and HTML widget

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

S u M Tu W T h F S a

1 2 3 4 5 6

7 8 9 1 0 11 12 1 3

1 1 1 1 1 1 11 4 1 5 16 1 7 1 8 19 2 0

2 1 2 2 23 2 4 2 5 26 2 7

< < < A p r 2 00 2 > > >

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 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 . . .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 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 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 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 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 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 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 Information . . .Whatis.com. (2001, July 27). Widget [Definition]. Retrieved October 20, 2002 from http://whatis.techtarget.com/definition/0,,sid9_gci213364,00.html