Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 SIMPLE FAMILIAR CONCRETE COMPLEX ABSTRACT UNFAMILIAR EXPERIENCES How metaphors are made METAPHOR! COMPLEX ABSTRACT UNFAMILIAR Metaphor for the Web LANDMARKS PHYSICAL SPACE TO NAVIGATE ROUTES PERSONAL ROUTINES FROM EVERYDAY LIFE WORLD WIDE WEB 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 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 Good Metaphors: Make user comfortable with unfamiliar Make it easier to anticipate actions Explain, Excite, Persuade (Rosenfeld/Morville) Make site memorable Are very powerful (Lakoff/Johnson) 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 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 webbased 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