widgets lisa kenyon fall 2002 lis 385t: information architecture and design the university of texas...
TRANSCRIPT
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