Transcript Metaphors in Web Design and Navigation

The Double-Edged Pipe
Metaphors in Web Design and Navigation
Henry Stokes
INF 385E
Overview






What are metaphors?
What do they do?
Why you should use them
Why you maybe shouldn’t use them
Suggestions
References
What are metaphors?
 Shortcuts to concepts
How metaphors are made
SIMPLE
FAMILIAR
CONCRETE
COMPLEX
ABSTRACT
UNFAMILIAR
EXPERIENCES
How metaphors are made
METAPHOR!
COMPLEX
ABSTRACT
UNFAMILIAR
Metaphor for the Web
LANDMARKS
PHYSICAL SPACE
TO NAVIGATE
ROUTES
PERSONAL ROUTINES
FROM EVERYDAY LIFE
WORLD
WIDE
WEB
Metaphor for the Web
WORLD
WIDE
WEB
Image Schemata
 TRAJECTORY
 Motion: Active
 “I went”, “I came back”
 CONTAINER
 “in” a site
Model of Navigation
This is not a pipe?
“The Betrayal of Images” (1928) by René Magritte
Alternative: Model of Attraction
Thomas Vander Wal
http://www.vanderwal.net/essays/moa1.html
Web Design
 Organizational Metaphors
 Functional Metaphors
 Visual Metaphors
Examples on Web
 Icon/Graphic
Examples on Web
 Whole Theme
 Juice Plus: http://www.juiceplus.com/
 Templar Studios: http://www.templar.com/
Why You Should Use Them
Good Metaphors:
 Make user comfortable with
unfamiliar
 Make it easier to anticipate actions
 Explain, Excite, Persuade (Rosenfeld/Morville)
 Make site memorable
 Are very powerful (Lakoff/Johnson)
Norman’s “Affordances”
 Provides clues to the operation of
things
 User makes assumptions based on
affordances
Why You Maybe Shouldn’t Use Them





Only helpful for inexperienced users
Could limit creativity
Can be taken too far
Can get dated (e.g., pop culture)
Culture/language differences
Does this mean anything to you?
How about this?
Nelson & Hibner Study (2003)
Tide.com’s “Stain Detective”
http://www.tide.com/staindetective/selectStain.jhtml
Alan Cooper in “About Face”
 Argues it’s a big mistake to find the
“magic metaphor”
 They can be unhelpful and even
harmful
 They don’t scale well
 They rely too much on the “creaky
cantankerous idiosyncratic human
mind”
What does this mean?
 “Send via Airmail”?
 “Make Airline Reservations?”
Cooper, cont’d
 Alternative: Idiomatic Paradigm
 We can learn and remember things
 Idioms only have to be learned once
 No reliance on intuition & inference
Choosing a Metaphor
Shopping Bag?
Shopping Cart?
 Used after purchase
 Used before purchase
Does this make sense?
=
Suggestions






Know your target users
Understand their tasks
Match to users’ mental models
Understand the concepts in context
Don’t forget labeling
Perform Usability Testing
References
Cooper, A. (1995). The Myth of Metaphor. In, About Face: The Essentials of User
Interface Design (1st ed., pp. 53-66).: Foster City, CA: IDG Books Worldwide, Inc.
Lakoff, G., & Johnson, M. (2003). Metaphors we live by. Chicago: The University of
Chicago Press.
Maglio, P. P., & Matlock, T. (1998). Metaphors we surf the Web by. Paper presented
at Workshop on Personalized and Social Navigation in Information Space, Stockholm,
Sweden.
Nelson, T., & Hibner, S. (2003). A user-centered approach to redesigning a webbased utility: Tide.com’s stain detective. In Proceedings of the Human Factors and
Ergonomics Society 47th Annual Meeting, 1322-1325. Denver, CO: HFES.
Norman, D.A. (1988). The Design of Everyday Things. New York: Basic Books.
Rosenfeld, L., & Morville, P. (2002). Organization Systems. In L. LeJune (Ed.),
Information architecture for the World Wide Web (2nd ed., pp. 62-63, 252-253).
Sebastopol, CA: O’Reilly and Associates, Inc. (Original work published 1998)
Vander Wal, T. (2001, March). The Model of Attraction. Retrieved October 3, 2005,
from http://www.vanderwal.net/essays/moa1.html