Upload
delilah-harrington
View
216
Download
0
Tags:
Embed Size (px)
Citation preview
Metaphors in Web Design and Navigation
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
ABSTRACT
CONCRETE
EXPERIENCES
UNFAMILIAR
FAMILIAR
COMPLEX
How metaphors are made
ABSTRACTMETAPHOR!
UNFAMILIAR
COMPLEX
Metaphor for the Web
PHYSICAL SPACE TO NAVIGATE
PERSONAL ROUTINESFROM EVERYDAY LIFE
WORLD WIDE WEB
LANDMARKS
ROUTES
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 (treachery)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
Make user comfortable with unfamiliar
Make it easier to anticipate actions Explain, Excite, Persuade (Rosenfeld/Morville)
Make site memorable Are very powerful (Lakoff/Johnson)
Good Metaphors:
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
ReferencesCooper, 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 web-based 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