View
36
Download
0
Category
Tags:
Preview:
DESCRIPTION
Drew Shafer. Metaphors in Web Design and Navigation. Presentation Outline. Definitions The Good The Bad and The Ugly The Future. Definitions. A Metaphor is…. Definitions. A Metaphor is… - PowerPoint PPT Presentation
Citation preview
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
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.
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… 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
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?
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
Recommended