1 / 25

Widgets

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.

kalea
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Widgets Lisa Kenyon Fall 2002 LIS 385T: Information Architecture and Design The University of Texas at Austin

  2. Origin of Web Widgets • Modeled after early GUIs • Vannevar Bush: “As We May Think” ‘45 • Douglas Engelbart demo ‘68 • Alan Kay: enactive, iconic & symbolic

  3. Web Widgets • GUI: collection of widgets • Widgets: individual elements • Web Widgets: subset of widgets • HTML • Java • Javascript • Cascading Style Sheets • Flash

  4. Standard Web Widgets • Implemented in HTML • Basic data interaction • Any HTML enabled device • Examples: • Button • Options • Check Box • Radio Button • List Box • Text Box

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

  6. Interactive Feedback • Responds visually to user interaction • Provides logical feedback • May be cancelled

  7. Scroll Bars • Component of other complex widgets • Main HTML display window • List boxes • Text entry boxes • Good example of Interactive Feedback

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

  9. Radio Buttons • Single selection among several choices • Choices are mutually exclusive • Labeled and grouped logically

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

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

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

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

  14. Pull-Down Menus • Collection of commands and sub-menus • Part of the browser and Web experience • Not strictly and HTML widget

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

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

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

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

  19. 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/

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

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

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

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

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

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

More Related