1 / 26

Metaphors in Web Design and Navigation

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…

enrico
Download Presentation

Metaphors in Web Design and Navigation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Drew Shafer Metaphors in Web Design and Navigation

  2. Presentation Outline • Definitions • The Good • The Bad and The Ugly • The Future

  3. Definitions • A Metaphor is…

  4. 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

  5. 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

  6. 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

  7. 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

  8. Types of Metaphors • From Morville & Rosenfeld (IA Book) • Organizational • Functional • Visual • Other • Multi-type • Haptic

  9. Good Metaphors

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

  11. 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?

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

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

  14. Visual Metaphor Gmail uses commonly-understood visual metaphors for Search, Archive, Trash, Tag, etc.

  15. 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

  16. 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

  17. 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

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

  19. Ugly Metaphors • Many ways to go wrong here…

  20. 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

  21. Future Metaphors

  22. Future Metaphors • What was once the unknown is now the known baseline

  23. Future Metaphors • What was once the unknown is now the known baseline • Haptic feedback techniques are on the way to becoming standardized

  24. 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?

  25. Fin

  26. Bibliography 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

More Related