The Double-Edged Pipe Metaphors in Web Design and NavigationOverviewWhat are metaphors?How metaphors are madeSlide 5Metaphor for the WebSlide 7Image SchemataModel of NavigationThis is not a pipe?Alternative: Model of AttractionWeb DesignExamples on WebSlide 14Why You Should Use ThemNorman’s “Affordances”Why You Maybe Shouldn’t Use ThemDoes this mean anything to you?How about this?Nelson & Hibner Study (2003) Tide.com’s “Stain Detective”Alan Cooper in “About Face”What does this mean?Cooper, cont’dChoosing a MetaphorDoes this make sense?SuggestionsReferencesThe Double-Edged PipeMetaphors in Web Design and Navigation Henry StokesINF 385EOverviewWhat are metaphors?What do they do?Why you should use themWhy you maybe shouldn’t use themSuggestionsReferencesWhat are metaphors?Shortcuts to conceptsHow metaphors are madeSIMPLEABSTRACTCONCRETEEXPERIENCESUNFAMILIARFAMILIARCOMPLEXHow metaphors are madeABSTRACTMETAPHOR!UNFAMILIARCOMPLEXMetaphor for the WebPHYSICAL SPACE TO NAVIGATEPERSONAL ROUTINESFROM EVERYDAY LIFEWORLD WIDE WEBLANDMARKSROUTESMetaphor for the WebWORLD WIDE WEBImage SchemataTRAJECTORYMotion: Active“I went”, “I came back”CONTAINER“in” a siteModel of NavigationThis is not a pipe?“The Betrayal of Images” (1928) by René MagritteAlternative: Model of AttractionThomas Vander Wal http://www.vanderwal.net/essays/moa1.htmlWeb DesignOrganizational MetaphorsFunctional MetaphorsVisual MetaphorsExamples on WebIcon/GraphicExamples on WebWhole ThemeJuice Plus: http://www.juiceplus.com/Templar Studios: http://www.templar.com/Why You Should Use ThemMake user comfortable with unfamiliarMake it easier to anticipate actionsExplain, Excite, Persuade (Rosenfeld/Morville)Make site memorableAre very powerful (Lakoff/Johnson)Good Metaphors:Norman’s “Affordances”Provides clues to the operation of thingsUser makes assumptions based on affordancesWhy You Maybe Shouldn’t Use ThemOnly helpful for inexperienced usersCould limit creativityCan be taken too farCan get dated (e.g., pop culture)Culture/language differencesDoes this mean anything to you?How about this?Nelson & Hibner Study (2003) Tide.com’s “Stain Detective”http://www.tide.com/staindetective/selectStain.jhtmlAlan Cooper in “About Face”Argues it’s a big mistake to find the “magic metaphor”They can be unhelpful and even harmfulThey don’t scale wellThey rely too much on the “creaky cantankerous idiosyncratic human mind”What does this mean?“Send via Airmail”?“Make Airline Reservations?”Cooper, cont’dAlternative: Idiomatic ParadigmWe can learn and remember thingsIdioms only have to be learned onceNo reliance on intuition & inferenceChoosing a MetaphorShopping Bag?Shopping Cart?Used after purchaseUsed before purchaseDoes this make sense?=SuggestionsKnow your target usersUnderstand their tasksMatch to users’ mental modelsUnderstand the concepts in contextDon’t forget labelingPerform Usability TestingReferencesCooper, 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
View Full Document
Unlocking...