Navigation and MenusWill Meurer

Topics

• Navigation Basics• Navigational Elements• Other Navigation Techniques• Implementation• Usability• Take Away Points• References

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

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

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

Navigational Elements

• Site-based– Menus

• Global• Local

Global and Local Menus,www.walmart.com

Global and Local Menus, www.apple.com

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

Navigational Elements

– Supplemental• Sitemaps• Indexes• Guides• Search

Index, http://www.cdc.gov/az.doSite Map, http://www.utexas.edu/sitemap/

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)

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)

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)

Implementation – Goals

• Therefore, don’t do this:

Looking for a hair dryer, I mean, uh, something less embarrassing, http://www.outpost.com.

Implementation – On your site

• Navigation decisions are based on:– Taxonomy– Site structure– Labels– Site type

• Portal – Customization• Library catalog – Index

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

Usability

• Contextual elements– Stay away from “click here”.– Linking every word appears overly complex and

lessens strength of the important links (Nielsen, 2000)

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.

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