![Page 1: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/1.jpg)
Widgets
Lisa KenyonFall 2002
LIS 385T: Information Architecture and DesignThe University of Texas at Austin
![Page 2: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/2.jpg)
Origin of Web Widgets
Modeled after early GUIs
Vannevar Bush: “As We May Think” ‘45
Douglas Engelbart demo ‘68
Alan Kay: enactive, iconic & symbolic
![Page 3: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/3.jpg)
Web Widgets
GUI: collection of widgets Widgets: individual elements Web Widgets: subset of widgets
HTML Java Javascript Cascading Style Sheets Flash
![Page 4: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/4.jpg)
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
![Page 5: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/5.jpg)
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
![Page 6: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/6.jpg)
Interactive Feedback
Responds visually to user interaction
Provides logical feedback
May be cancelled
![Page 7: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/7.jpg)
Scroll Bars
Component of other complex widgets Main HTML display window List boxes Text entry boxes
Good example of Interactive Feedback
![Page 8: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/8.jpg)
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)
![Page 9: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/9.jpg)
Radio Buttons
Single selection among several choices
Choices are mutually exclusive
Labeled and grouped logically
![Page 10: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/10.jpg)
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.
![Page 11: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/11.jpg)
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
![Page 12: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/12.jpg)
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
![Page 13: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/13.jpg)
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
![Page 14: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/14.jpg)
Pull-Down Menus
Collection of commands and sub-menus
Part of the browser and Web experience
Not strictly and HTML widget
![Page 15: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/15.jpg)
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 > > >
![Page 16: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/16.jpg)
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)
![Page 17: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/17.jpg)
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
![Page 18: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/18.jpg)
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
![Page 19: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/19.jpg)
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/
![Page 20: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/20.jpg)
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
![Page 21: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/21.jpg)
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
![Page 22: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/22.jpg)
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
![Page 23: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/23.jpg)
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
![Page 24: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/24.jpg)
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
![Page 25: Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56649eca5503460f94bd8a24/html5/thumbnails/25.jpg)
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