Metaphors in Web Design and Navigation

Metaphors in Web Design
and Navigation
What is a metaphor?
In Literature: A trope, or figure of speech, a
tactic in which the writer helps the reader to
understand one thing by describing it as
though it were another. Ex: Time is money.
In IAWWW: A strategy that help user
understand the new by relating it to the
Help users understand
content and function
Metaphors as IA
• Organizational Metaphor
• Functional Metaphor
• Visual Metaphor
Leverage familiarity with one system’s
organization to convey quick understanding of
a new system’s organization
Map people’s mental model to organization of
Ex: car dealership
Ex. Ikea Navigation
Functional Metaphor
• Make connections between the tasks
you perform in traditional environment
to those you can perform in new
• Ex: ask a librarian
Photographer: adactio Source:
Ex. Facebook Wall
Visual Metaphor
• Leverage familiar graphic elements
such as images, icons, and colors to
create a connection to the new
• Ex: online directory with yellow
• Most experts have problems with this
Houston Chronicles Front Page
Ex. New York Times Front Page
Metaphors can
provide a unifying
framework for the
design that will
make it feel like
more than a
collection of
individual items.
Metaphors can
facilitate learning
especially for first
time users
Metaphors become
interface standards
like tab navigation or
the shopping cart.
Metaphor-driven global organization scheme
rarely works
Association must be perceived similarly by
designers and users
Limiting, don’t scale well, hinders usability
Use concrete metaphors with caution
Usage can hamper creation of superior
Global metaphors
(also visual and concrete)
• Source:
Metaphor Exploration
Explore metaphors during brainstorming
How would metaphors apply to set
organization, function or appearance?
Is the site similar to traditional organization
If so, how is your site different?
Try populate metaphor based architecture with
real content.
If it doesn’t work, don’t use it.
Interface Paradigms
• Implementation-centric
• Metaphoric
• Idiomatic
Interface Pardigm
Implementation-centric interfaces
Based on understanding of how things
actually work
Easy to build; hard to use
Web equivalent: “org-chart centric” –
organized by how the company the site
represents is structured
Interface Pardigm
Metaphoric Interfaces
Based on intuiting how things work – risky
Visual metaphors only
Understanding of mechanics not required
Don’t scale well, limiting, rely on association
Interface Pardigm
Idiomatic Interfaces
Based on learning how to do something
No association, no understanding required
Learn simple, visual, behavioral idiom to
accomplish task
Ex: windows, hyperlinks drop-downs, nested
Good idioms need to be learned only once
Web Designers
Information Architects
The study and practice of making
representations of the Earth on a flat
• Combines science, aesthetics, and
technical ability to create a balanced
and readable representation that is
capable of communicating information
effectively and quickly.
“Architect begins with an abstraction—a
blueprint—and creates from that abstraction
a concrete structure existing in physical
space. The cartographer, on the other hand,
starts with concrete structures existing in
physical space and creates from that an
abstraction: a map”
A website as an abstraction – a map
collective memory
Observe flow of users interaction with site
and each other – user centered design
Cooper, A. Reimann,R.Cronin,D. (2007). About Face 3: The Essentials of
User Interface Design (3rd Edition).: Wiley Publishing, Inc.
Nielsen, J. (2000) Designing Web Usability: The Practice of Simplicity.
Berkeley, CA: New Riders Publishing branch of Peachpit Press.
Norman, D.A. (1988). The Design of Everyday Things. New York: Basic
Rester, A. (2008, August) Mapping Memory: Web Designer as Information
Cartographer. Retrieved October 1, 2008, from
Rosenfeld, L., & Morville, P. (2007). Information Architecture for the World
Wide Web (3rd Edition). Sebastopol, CA: O’Reilly Media, Inc.
Images from