Transcript ppt - School of Information - The University of Texas at Austin

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
 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
Options
Include catalog
Ship:
UPS
FedEx
Default
Acorn
FreeBSD
Linux
MacOS X
OS/2 Warp
Windows
Comments
Send the item via
standard
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
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 allow
Evil Corp. to fill
my email box with
useless SPAM.
Do not use a radio button for only
one option. Once selected, it
cannot be deselected.
Pizza Toppings
Mushrooms
Onions
Olives
Peppers
Tomatoes
Garlic
Broccoli
Artichokes
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
Default
Acorn
FreeBSD
Linux
MacOS X
OS/2 Warp
Windows
 Scrollable window when options exceed
screen space
 Avoid using for auto-navigation
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
Comments
 May be single or multi-line
Send the item via
standard
 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.)
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
<< <
Apr 2002
Su M Tu W Th
7
> >>
F Sa
1
2
8
9 10 11 12 13
3
4
5
6
141 151 161 171 181 191 201
21 22 23 24 25 26 27
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/AquaHIGuideline
s/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/AquaHIGuideline
s/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/eib
l.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/st
empfhuber.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/h
tml/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/h
tml/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