Metaphors in Web Design and Navigation. Overview What are metaphors? What do they do? Why you...
-
Upload
delilah-harrington -
Category
Documents
-
view
216 -
download
0
Transcript of Metaphors in Web Design and Navigation. Overview What are metaphors? What do they do? Why you...
![Page 1: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/1.jpg)
Metaphors in Web Design and Navigation
![Page 2: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/2.jpg)
Overview
What are metaphors? What do they do? Why you should use them Why you maybe shouldn’t use them Suggestions References
![Page 3: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/3.jpg)
What are metaphors?
Shortcuts to concepts
![Page 4: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/4.jpg)
How metaphors are made
SIMPLE
ABSTRACT
CONCRETE
EXPERIENCES
UNFAMILIAR
FAMILIAR
COMPLEX
![Page 5: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/5.jpg)
How metaphors are made
ABSTRACTMETAPHOR!
UNFAMILIAR
COMPLEX
![Page 6: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/6.jpg)
Metaphor for the Web
PHYSICAL SPACE TO NAVIGATE
PERSONAL ROUTINESFROM EVERYDAY LIFE
WORLD WIDE WEB
LANDMARKS
ROUTES
![Page 7: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/7.jpg)
Metaphor for the Web
WORLD WIDE WEB
![Page 8: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/8.jpg)
Image Schemata
TRAJECTORY Motion: Active “I went”, “I came back”
CONTAINER “in” a site
![Page 9: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/9.jpg)
Model of Navigation
![Page 10: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/10.jpg)
This is not a pipe?
“The Betrayal (treachery)of Images” (1928) by René Magritte
![Page 11: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/11.jpg)
Alternative: Model of Attraction
Thomas Vander Wal http://www.vanderwal.net/essays/moa1.html
![Page 12: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/12.jpg)
Web Design
Organizational Metaphors Functional Metaphors Visual Metaphors
![Page 13: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/13.jpg)
Examples on Web
Icon/Graphic
![Page 14: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/14.jpg)
Examples on Web Whole Theme
Juice Plus: http://www.juiceplus.com/
Templar Studios: http://www.templar.com/
![Page 15: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/15.jpg)
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:
![Page 16: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/16.jpg)
Norman’s “Affordances”
Provides clues to the operation of things
User makes assumptions based on affordances
![Page 17: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/18.jpg)
Does this mean anything to you?
![Page 19: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/19.jpg)
How about this?
![Page 20: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/20.jpg)
Nelson & Hibner Study (2003) Tide.com’s “Stain Detective”
http://www.tide.com/staindetective/selectStain.jhtml
![Page 21: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/21.jpg)
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”
![Page 22: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/22.jpg)
What does this mean?
“Send via Airmail”? “Make Airline Reservations?”
![Page 23: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/23.jpg)
Cooper, cont’d
Alternative: Idiomatic Paradigm
We can learn and remember things Idioms only have to be learned once No reliance on intuition & inference
![Page 24: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/24.jpg)
Choosing a Metaphor
Shopping Bag? Shopping Cart?
Used after purchase Used before purchase
![Page 25: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/25.jpg)
Does this make sense?
=
![Page 26: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/26.jpg)
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
![Page 27: 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.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649ec85503460f94bd5763/html5/thumbnails/27.jpg)
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