Metaphors in Web

Design and Navigation

Presented by:
Jade Anderson
INF385E
October 5, 2006
METAPHORS: THE ORDER
 What is Metaphor?
 History & Context

 Discussion by major players

 Benefits

 Dangers

 Bottom Line
WHAT IS METAPHOR?
 Relates new information to the familiar
 Tool for communicating complex ideas and
bridging complex concepts
 Tool for generating enthusiasm
www.cnet.com
www.creative.gettyimages.com
www.halfbakery.com
HISTORY
 Lackoff & Johnson 1980s
• Metaphor integral to thoughts and actions
• Not just a literary device
• Metaphor is ubiquitous
• E.g. theories as buildings
• E.g. the mind as container
Cooper & Reimann: About Face 2.0

Three dominant design methods for visual

interface, based on:

1. Understanding
2. Intuiting
3. Learning
Cooper & Reimann Continued

 Understanding

• Implementation-Centric Model
• Must learn how program works in order to be
successful
• By engineers for engineers
• Users would rather be successful than
knowledgeable
Cooper & Reimann continued

 Intuiting

• Metaphoric Model
• No need to understand mechanics of system
• Definition of Intuition: “knowing something without
rational use of thought.”
Cooper & Reimann continued

 Learning

• Idiomatic Model
• Definition of Idiom: “expression whose meaning is
not predictable from the usual meaning of its parts”
• E.g. Kick the bucket, caught red handed
• E.g. Drop down menu, close box, resize function
• All idioms must be learned; good ones need
only be learned once
Rosenfeld & Morville:
IA for World Wide Web
 Organizational
• Familiarity with physical organization leads to
understanding of virtual organization scheme
• E.g. Auto dealership
 Functional
• Familiarity with tasks in traditional environment leads
to understanding of virtual tasks
• E.g. Library
 Visual
• Familiarity with images, icons, and colors of traditional
object leads to connection with virtual object
• E.g. Yellowpages
Vanderwal: Metaphor of Attraction
 Metaphor of Attraction
• 1. User searches for information
• 2. Results attracted or repelled
• 3. User attracted to meta information
• 4. Process continues until information found
or attraction lost
Maglio & Matlock:
Metaphors we Surf the Web by
 Spatial metaphor of web
• People moving toward information rather than
information coming to them
• Relates to how we obtain info in the real world:
walk towards it, reach for it, grasp it
• If people naturally grasp web as physical
space, tools for navigation can be improved to
exploit this connection
Nielsen: Designing Web Usability
 Geographic Metaphors almost always
bad
 Shopping carts are interface standard

• Not shopping sleds

• Even standard metaphors are not without
problems
BENEFITS & BEST PRACTICES
 Can make the site memorable
 Relate new information to the familiar

 Better for sites not expecting repeat

visitors
DANGERS & DOWNFALLS
 Limiting

• Sacrifice later growth for a little initial quick

recognition
• Suck for intermediates
• Tie interfaces unnecessarily to physical world
• Hold back functionality with relationships to
obsolete technology
DANGERS & DOWNFALLS continued

 Don’t scale well

• Can’t grow with process
 Rely on associations
• Cultural
• Human mind is idiosyncratic
DANGERS & DOWNFALLS continued

 Oversimplified

 Tiresome

 Graphic nature can slow down site

 Only a shallow representation

 No Metaphors for processes

BOTTOM LINE
 Popularity of metaphors has waned
 Few work well

 Make empowering, not limiting

 Usability testing
REFERENCES
Cooper, A. (2003). About Face 2.0: The Essentials of User Interface Design (2nd Edition).: Wiley
Publishing, Inc.

Fleming, J. (1998). Web Navigation: Designing the User Experience. Sebastopol, CA: O’Reilly
Associates, Inc.

Kuhn, W. (1993). Metaphors Create Theories for Users. Retrieved September 30, 2006 from
http://citeseer.ist.psu.edu/332805.html

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.

Nielsen, J. (2000) Designing Web Usability: The Practice of Simplicity. Berkeley, CA: New Riders
Publishing branch of Peachpit Press.

Norvig, P. (2004) Review of Metaphors we live by George Lakoff and Mark Johnson. Retrieved
September 30, 2006 from http://www.norvig.com/mwlb.html

Powell, T. (2002). Web Design: The Complete Reference. New York: McGraw-Hill Professional.

Rosenfeld, L., & Morville, P. (2002). Information Architecture for the World Wide Web (2nd Edition).
Sebastopol, CA: O’Reilly Media, Inc.

Vander Wal, T. (2001, March). The Model of Attraction. Retrieved September 30, 2006, from
http://www.vanderwal.net/essays/moa1.html