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
familiar.
Help users understand
content and function
intuitively
•
Metaphors as IA
Strategy
• Organizational Metaphor
• Functional Metaphor
• Visual Metaphor
Organizational
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
website
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
environment
• Ex: ask a librarian
http://creativecommons.org/licenses/by/2.5/
Photographer: adactio Source: Flickr.com
Ex. Facebook Wall
Visual Metaphor
• Leverage familiar graphic elements
such as images, icons, and colors to
create a connection to the new
elements.
• Ex: online directory with yellow
background
• Most experts have problems with this
category
Houston Chronicles Front Page
Ex. New York Times Front Page
•
When
They
Work
•
•
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.
Caution!
•
•
•
•
•
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
interfaces
Global metaphors
(also visual and concrete)
• http://www.tri-win.com/index.php
• http://www.getlondonreading.co.uk/Hom
e
• Source:
http://www.smashingmagazine.com/200
8/09/03/40-creative-design-layoutsgetting-out-of-the-box/
Metaphor Exploration
•
•
•
•
•
Explore metaphors during brainstorming
How would metaphors apply to set
organization, function or appearance?
Is the site similar to traditional organization
methods?
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
folders
Good idioms need to be learned only once
Web Designers
as
Information Architects
Cartography
•
The study and practice of making
representations of the Earth on a flat
surface
• Combines science, aesthetics, and
technical ability to create a balanced
and readable representation that is
capable of communicating information
effectively and quickly.
•
•
•
Information
Cartographer?
“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
Information
Cartographer?
Citation
•
•
•
•
•
•
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
Books.
Rester, A. (2008, August) Mapping Memory: Web Designer as Information
Cartographer. Retrieved October 1, 2008, from
http://alistapart.com/articles/mappingmemory/
Rosenfeld, L., & Morville, P. (2007). Information Architecture for the World
Wide Web (3rd Edition). Sebastopol, CA: O’Reilly Media, Inc.
Images from http://www.everystockphoto.com/