The Double-Edged Pipe Metaphors in Web Design and Navigation

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