Navigation and Menus

Will OakleyInformation Architecture and

Design IOctober 5, 2006

What are we going to cover?

The reasons for having strong navigation systemsEmbedded Navigation SystemThe Browser: Your Navigation Pal!Supplemental Navigation SystemsNavigation Dos and Don’ts

What is Navigation?

Navigation: n 1. The act or process of navigating. 2. The art or science of plotting, ascertaining, or directing the course of a ship, aircraft, spacecraft, etc.

– Random House Webster’s College Dictionary

What is Navigation?

“Knowing your [rear end] from a hole in the ground.”

– My Mom (quote edited for content)

What is Navigation?

“Knowing your [rear end] from a hole in the ground.”

– My Mom (quote edited for content)

“…and being able to move the former to the latter without getting lost.”

What’s the fuss?

Navigation on the Web must contend with problems that don’t exist in the physical world:

• No sense of scale• No sense of direction• No sense of location

– Krug 57

Lost in HyperspaceKrug speculates that without physical clues, Web users are constantly having to reorientate themselves.“Navigation isn’t just a feature of a Web site; it is the Web site, in the same way that the building, the shelves, and the cash registers are Sears. Without it, there’s no there there.”

– Krug 59

How Navigation Serves the User

Tells us where we arePoints us toward what we’re looking forGives the sense of being groundedIt informs us of what is availableProvides clues on how to use the siteGives users confidence in site creators

– Krug 59-60

Will’s Obligatory Wife Story

Kate is a freelance educational writer and editor.Wanted to learn more about a company before applyingSo she visited www.allenresources.com

Kate’s user experience

FrustrationLack of confidence in site creators, even to the point that initially questioned the website and company’s legitimacy.

What went wrong?

Allen Resources didn’t observe many Web navigation conventions.

Navigation Conventions

The three embedded navigation systems

• Global• Local• Contextual

– Rosenfeld and Morville 107

Global Navigation SystemsIntended to be on every page of a site, with possible exception of the homepage. (Rosenfeld & Morville 113)

Krug lists five things that global navigation systems should have• Site ID• A home button• Sections• Search• Utilities (i.e. help, about us, etc.) (62)

from www.amazon.com

from www.1up.com

Local NavigationEnables browsing in a particular section of a siteOften times global and local systems are integrated into one system, with the local navigation is expanded when that particular section is entered.

From www.texassports.com

Contextual Navigation

Links that exist for a particular page that are outside of the local and global systems.Examples:

• See also• Related Topics

Overuse=clutter

From www.1up.com

The Browser

The Browser Buttons are a web constant for users.

King of the Browser Buttons!

Krug says 30-40% of all web clicks are on the back button. (58)Tauscher and Greenberg’s study shows that there is a 39% chance that the next site a person views will be among the last six sites they’ve viewed. (401)The morale of the this: don’t disable the back button.

Supplemental Navigation

Four main types according to Rosenfeld and Morville (121)

• Sitemaps• Site Indexes• Guides• Search

I’d like to add one more from Krug (75)• Breadcrumbs

search

breadcrumbs

Site mapFrom www.lowes.com

Site indexFrom www.imf.org

Guide from www.myspace.com

Advanced Navigation

Personalization• Attempts to anticipate user’s need

Customization• Allows user control over some elements of

page presentation

Social Navigation• Attempts to anticipate user’s need by

comparing it to the actions of others– Rosenfeld and Morville 127-129

Web Dos and Don’ts

Don’t disable the back buttonDon’t disable bookmarkingDon’t fool around with the color of visited/unvisited links

– Rosenfeld and Morville 109

Web Dos and Don’ts

Put your site ID in the upper left corner and make sure it looks like an IDMake the site ID also a home buttonTabs are great but they don’t scale well

– Krug (64-81)

Frames

=

ResourcesKrug, S. (2000). Don’t make me think! A common sense approach to

Web usability. Indianapolis: New Riders.Nielsen, J. & Tahir, M. (2002). Homepage usability: 50 websites

deconstructed. Indianapolis: New Riders.Rosenfeld, L. & Morville, P. (2002). Information architecture for the

World Wide Web. 2nd ed. Sebastopol: O’Reilly.Tauscher, L. M., & Greenberg, S. (1997). Revisitation patterns in World

Wide Web navigation. ACM SIGCHI '97, Atlanta, Georgia, March 22-27, 1997. Atlanta, GA: ACM. 399-406