1 / 32

The Double-Edged Pipe Metaphors in Web Design and Navigation

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

amber
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

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

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

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

  17. Does this mean anything to you?

  18. How about this?

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

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

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

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

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

  24. Does this make sense? =

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

  26. Web Site, Database, Navigation • Knowledge base = anatomy, relational database, annotations • Lecture, quiz, tour, etc = collaborative navigation of knowledge space • Current task =build the relationaldatabase

  27. Other “Show and Tell” • Web site, phase 1, in a stable and mature state • Collaborative tools from Pittsburgh and through the use of Course Tools • Building up a collection of multi-media examples

  28. Visible Human Knowledge Base Annotation layer • Hyperlinked texts • Movies • Sounds, etc Semantic layer • Medical lexicons • Semantic relations • Links to regions, volumes, and annotations Anatomical layer • Labels of structures • Voxel data and segmentation • Volume surfaces • Spatial relationships

  29. Anatomical Layer • Presentation of click-able slice data (click to get full three-dimensional coordinate) • 3D coordinate used to index • Segmentation and label • Volume/Surface descriptions • Index into Semantic Layer • Spatial relations to navigate to Anatomical Layer level

  30. Semantic Layer • Multiple, related hierarchies of semantic information: labels and relations • A “navigation space” for relational information • Needs to be made accessible on the web • Automatic web page generation for primitive navigation?

  31. Annotation Layer • Multi-media annotations • Developed from prototypes and scenarios given by UI group • With links into database

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