Drew Shafer
1.
2.
3.
4.
Definitions
The Good
The Bad and The Ugly
The Future

A Metaphor is…

A Metaphor is…
 A figure of speech in which a word or phrase is
applied to an object to which it is not literally
applicable

A Metaphor is…
 A figure of speech in which a word or phrase is
applied to an object to which it is not literally
applicable
 A thing regarded as representative or symbolic of
something else, especially something abstract

A Metaphor is…
 A figure of speech in which a word or phrase is
applied to an object to which it is not literally
applicable
 A thing regarded as representative or symbolic of
something else, especially something abstract
…especially something abstract
A web metaphor is a design element that helps
the user to leverage their existing experience
in the abstract environment of the web

From Morville & Rosenfeld (IA Book)
 Organizational
 Functional
 Visual

Other
 Multi-type
 Haptic
The most successful metaphors in Web and
Navigation design are those that we don’t
consciously think of as “metaphors”
The most successful metaphors in Web and
Navigation design are those that we don’t
consciously think of as “metaphors”
How can we unobtrusively do the job of making
a novel interface feel familiar?
Web Site layout corresponds to the familiar departments
found in a physical storefront.
By displaying text one page at a time, E-Book
readers echo the real-world task of reading a
book.
Gmail uses commonly-understood visual
metaphors for Search, Archive, Trash, Tag, etc.
Many common web metaphors can be
classified as more than one of the basic types

Example:
 The ubiquitous shopping cart icon is both a
functional and visual metaphor

Use the sense of touch (or sometimes
hearing) to help the user navigate or use
controls
 For example, some touch-screen devices vibrate
slightly when you press a virtual button
 Still a niche technology on the web, requiring
specialized plugins to achieve

Sometimes a metaphor that is useful for
illuminating the first-order properties of a
system breaks down under attempts to apply
it to the entire system
When taken too far, a navigational metaphor can
easily turn into “Mystery Meat” navigation

Many ways to go wrong here…



Many ways to go wrong here…
If you are excited about how clever your
metaphor is, be very careful
Remember: the metaphor should serve the
design, not vice versa

What was once the unknown is now the
known baseline


What was once the unknown is now the
known baseline
Haptic feedback techniques are on the way to
becoming standardized



What was once the unknown is now the
known baseline
Haptic feedback techniques are on the way to
becoming standardized
How could our common experience on the
web serve as a basis of metaphor for new
interfaces?
Fin
Proctor, Robert W. and Vu, Kim-Phuong L. (2005) Handbook of Human
Factors in Web Design. Mahwah, New Jersey: Lawrence Erlbaum
Associates, Inc.
Ohl, T. M., & Cates, W. M. (1997). Applying metaphorical interface design
principles to the World Wide Web. Educational Technology, 37(6), 25-3
Morville, Peter, and Louis Rosenfeld. Information Architecture. 3rd ed.
Cambridge: O'Reilly, 2006.
Kaklanis, N et. al. (2009). Haptic Navigation in the World Wide Web. C.
Stephanidis (Ed.): Universal Access in HCI, Part III, HCII 2009, LNCS 5616,
pp. 707–715.
Kostiainen, Anssi (2012). Vibration API W3C Draft Standard.
http://dev.w3.org/2009/dap/vibration/, retrieved Mar 29, 2012