Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation...
-
Upload
cornelius-green -
Category
Documents
-
view
240 -
download
0
description
Transcript of Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation...
![Page 1: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/1.jpg)
Navigation and MenusWill Meurer
![Page 2: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/2.jpg)
Topics
• Navigation Basics• Navigational Elements• Other Navigation Techniques• Implementation• Usability• Take Away Points• References
![Page 3: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/3.jpg)
Navigation Basics
What is a navigation system?A set of tools that enables users to get to the
information they desire
How?By providing structure and context
![Page 4: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/4.jpg)
Navigation Basics
Navigation…– Gives users the ability to get from one place to the
next while understanding:• Where they are• Where they’ve been• Where they’re going
– Helps users understand the content structure
![Page 5: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/5.jpg)
Navigational Elements
• Browser-based– Linear - Back, Forward
– Nonlinear – Browsing History, Favorites– Contextual – Status Bar, URL
(e.g. www.news-site.com/entertainment/music)
Status Bar
![Page 6: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/6.jpg)
Navigational Elements
• Site-based– Menus
• Global• Local
Global and Local Menus,www.walmart.com
Global and Local Menus, www.apple.com
![Page 7: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/7.jpg)
Navigational Elements
• Site-based– Contextual
• Bread crumbs• Inline links• Relational
– intersite, see also
Bread crumbs, http://www.useit.com/alertbox/20000109.html
Inline and relational links,http://www.dictionary.com
![Page 8: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/8.jpg)
Navigational Elements
– Supplemental• Sitemaps• Indexes• Guides• Search
Index, http://www.cdc.gov/az.doSite Map, http://www.utexas.edu/sitemap/
![Page 9: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/9.jpg)
Other Navigation Techniques• Personalization
– Automatically building menus and contextual navigation based on user characteristics
• Customization– Enabling the user to
alter the layout and navigational elements according to preference
• Social filtering– Elements built based on
all the site’s users
Personalization, http://www.amazon.com
Customization, http://www.amazon.com(Rosenfield & Morville, 2002)
![Page 10: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/10.jpg)
Implementation – Organization• Hierarchical
– Menu systems, like global and local
– Sitemaps• Task-based
– Guides• Alphabetical
– Indexes• Chronological
– News– History
• Popularity-based– Social filtering
Alphabetical, http://www.lib.utexas.edu/indexes
(Vanduyne, Landay & Hong, 2003)
![Page 11: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/11.jpg)
Implementation – Goals• Navigation should support every type of viewing
strategy– Undirected Viewing, Conditioned Viewing, Informal
Search, Formal Search (Choo, Detlor, & Turnbull, 2000)• Navigation should be simple and transparent
– Users don’t focus on the navigation and site structure (Nielsen, 2000)
– Deep menus on each page are difficult to use• Fitt’s Law (Wikipedia, 2005)
![Page 12: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/12.jpg)
Implementation – Goals
• Therefore, don’t do this:
Looking for a hair dryer, I mean, uh, something less embarrassing, http://www.outpost.com.
![Page 13: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/13.jpg)
Implementation – On your site
• Navigation decisions are based on:– Taxonomy– Site structure– Labels– Site type
• Portal – Customization• Library catalog – Index
![Page 14: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/14.jpg)
Usability
• Menus– Use features such as:
• Mouseovers, even just underlining text• Mouse pointer change, make it a hand• Showing current location
– Image• Watch file size• Provide alt tags for accessibility
– E.g. <img src=“world.jpg” alt=“World News” /> • Preload all graphics so mouseovers work instantly (preload
code)– Flash
• Basic rule: Do not use Flash menus
![Page 15: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/15.jpg)
Usability
• Contextual elements– Stay away from “click here”.– Linking every word appears overly complex and
lessens strength of the important links (Nielsen, 2000)
![Page 16: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/16.jpg)
Take away points• Navigation systems are what get users to the information
they are seeking• Various types of navigational elements can be leveraged
to provide a user with the best tools to get the information they want
• Choosing elements and implementing navigation systems is an integral part of Information Architecture.
• Effective navigation, like all parts of a successful product, must be built with usability in mind.
![Page 17: Navigation and Menus Will Meurer. Topics Navigation Basics Navigational Elements Other Navigation Techniques Implementation Usability Take Away Points.](https://reader036.fdocuments.us/reader036/viewer/2022062317/5a4d1b077f8b9ab059988a78/html5/thumbnails/17.jpg)
References• Choo, C. W., Detlor, B., & Turnbull, D. (2000). Information Seeking
on the Web: An Integrated Model of Browsing and Searching. Retrieved 12 Oct. 2005 from http://www.ischool.utexas.edu/%7Ei385e/readings/Information%20Seeking%20on%20the%20Web.htm
• Nielsen, J. (2000). Is Navigation Useful? Retrieved 12 Oct. 2005 from http://www.useit.com/alertbox/20000109.html.
• Rosenfeld, L., & Morville, P. (2002). Information architecture for the World Wide Web. 2nd ed. Sebastopol, CA: Orsquo;Reilly
• van Duyne, D. K., Landay, J. A., & Hong, J. I. (2003). The design of sites: Patterns, principles, and processes for crafting a customer-centered Web experience. Boston, MA: Addison-Wesley
• Fitt’s Law. Wikipedia, 2005. Retrieved 15 Oct. 2005 from http://en.wikipedia.org/wiki/Fitt's_Law