1 / 27

The Double-Edged Pipe 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.

gerry
Download Presentation

The Double-Edged Pipe Metaphors in Web Design and Navigation

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. The Double-Edged PipeMetaphors in Web Design and Navigation Henry Stokes INF 385E

  2. Overview • What are metaphors? • What do they do? • Why you should use them • Why you maybe shouldn’t use them • Suggestions • References

  3. What are metaphors? • Shortcuts to concepts

  4. How metaphors are made SIMPLE FAMILIAR CONCRETE COMPLEX ABSTRACT UNFAMILIAR EXPERIENCES

  5. How metaphors are made METAPHOR! COMPLEX ABSTRACT UNFAMILIAR

  6. Metaphor for the Web LANDMARKS PHYSICAL SPACE TO NAVIGATE ROUTES WORLD WIDE WEB PERSONAL ROUTINES FROM EVERYDAY LIFE

  7. Metaphor for the Web WORLD WIDE WEB

  8. Image Schemata • TRAJECTORY • Motion: Active • “I went”, “I came back” • CONTAINER • “in” a site

  9. Model of Navigation

  10. This is not a pipe? “The Betrayal of Images” (1928) by René Magritte

  11. Alternative: Model of Attraction Thomas Vander Wal http://www.vanderwal.net/essays/moa1.html

  12. Web Design • Organizational Metaphors • Functional Metaphors • Visual Metaphors

  13. Examples on Web • Icon/Graphic

  14. Examples on Web • Whole Theme • Juice Plus: http://www.juiceplus.com/ • Templar Studios: http://www.templar.com/

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

  16. Norman’s “Affordances” • Provides clues to the operation of things • User makes assumptions based on affordances

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

  18. Does this mean anything to you?

  19. How about this?

  20. Nelson & Hibner Study (2003) Tide.com’s “Stain Detective” http://www.tide.com/staindetective/selectStain.jhtml

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

  22. What does this mean? • “Send via Airmail”? • “Make Airline Reservations?”

  23. Cooper, cont’d • Alternative: Idiomatic Paradigm • We can learn and remember things • Idioms only have to be learned once • No reliance on intuition & inference

  24. Choosing a Metaphor • Used after purchase Shopping Cart? Shopping Bag? • Used before purchase

  25. Does this make sense? =

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

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

More Related