Metaphors in Web Design and Navigation

Drew Shafer

Presentation Outline

1. Definitions2. The Good3. The Bad and The Ugly4. The Future

Definitions

A Metaphor is…

Definitions

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

Definitions

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

Definitions

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

Metaphors on the Web

…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

Types of Metaphors

From Morville & Rosenfeld (IA Book) Organizational Functional Visual

Other Multi-type Haptic

Good Metaphors

Good Metaphors

The most successful metaphors in Web and Navigation design are those that we don’t consciously think of as “metaphors”

Good 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?

Organizational – Wal-MartWeb Site layout corresponds to the familiar departments found in a physical storefront.

Functional MetaphorBy displaying text one page at a time, E-Book readers echo the real-world task of reading a book.

Visual MetaphorGmail uses commonly-understood visualmetaphors for Search, Archive, Trash, Tag, etc.

Multi-Type Metaphor

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

Haptic 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

Bad Metaphors

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

Metaphors can be taken too far

When taken too far, a navigational metaphor can easily turn into “Mystery Meat” navigation

Ugly Metaphors

Many ways to go wrong here…

Ugly Metaphors

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

Future Metaphors

Future Metaphors

What was once the unknown is now the known baseline

Future Metaphors

What was once the unknown is now the known baseline

Haptic feedback techniques are on the way to becoming standardized

Future Metaphors

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

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