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 catalogShip: UPS FedEx

Default

AcornFreeBSDLinuxM acO S XO S/2 WarpW indows

Com 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 actsindependent 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 .

P izza 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 indows

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 1 2 1 3

1 1 1 1 1 1 11 4 1 5 1 6 1 7 1 8 1 9 2 0

2 1 2 2 2 3 2 4 2 5 2 6 2 7

< < < A p r 2 0 0 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