Metaphors in Web Design and Navigation

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