Metaphors in Web Design and Navigation

Presented by:

Jade AndersonINF385EOctober 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

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