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

ABSTRACT

CONCRETE

EXPERIENCES

UNFAMILIAR

FAMILIAR

COMPLEX

How metaphors are made

ABSTRACTMETAPHOR!

UNFAMILIAR

COMPLEX

Metaphor for the Web

PHYSICAL SPACE TO NAVIGATE

PERSONAL ROUTINESFROM EVERYDAY LIFE

WORLD WIDE WEB

LANDMARKS

ROUTES

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 (treachery)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

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:

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

ReferencesCooper, 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