Navigation and Menus

Hillary Funk

Agenda Overview of Navigation and Menus Types of Navigation What good navigation includes Navigation Stress Test Questions? References

What is Navigation?

Navigation is the process of monitoring and controlling the movement of a craft or vehicle from one place to another.

Web navigation refers to the process of traversing a network of web resources, and the user interface that is used to do so. A central theme in web design is the development of a web navigation interface that maximizes usability.

from Wikipedia

What are Menus?

"A menu is defined as a set of options [labels] displayed on the screen, where the selection and execution of one (or more) of the options results in a change in the state of the interface."

from Behaviour & Information Technology

The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site.

from Smashing Magazine

Common Menu Labels

Main, Main Page, Home Page Search, Find Site Map, Contents, Index Contact, Contact Us About, About Us Help, FAQ News, News & Events

Types of Navigation

Global Local Contextual

Can also be thought of in “tiers”.

Embedded navigation systems are part of most sites you visit. They must work together to help users navigate the site.

Global: Site-Wide

Global

Local: Same navigation within particular section

Contextual: Links to something specific

Other tools that help the user navigate

Sitemaps Indexes Guides Search Breadcrumbs

Supplemental Navigation Systems that are external to the basic hierarchy of a website.

SitemapsSitemaps typically provide the top few levels of the information hierarchy and works best for websites that use a hierarchy for organization.

IndexesIndexes, similar to the index you find in the back of a book, present keywords or phrases alphabetically.

Guides

Take on many forms, including guided tours, tutorials, and micro-portals focused around a specific audience, topic, or task. Guides are always a supplement to existing navigation.

Examples: Facebook, Build your Vehicle widgets

SearchSearch puts users in the driver's seat allowing them to use their own terms to find what they are looking for. But it can also cause problems because everyone uses different words for the same thing.

Breadcrumbs

Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.

from Wikipedia

Advanced NavigationPersonalization: Amazon

Customization: Facebook

Visualization: Tag Clouds

Social Navigation: "Most Read" lists

What good navigation includes Easy to use Intuitive Users should be able to know where they are within the site at

all times Aid users in finding the information they seek as quickly as

possible

Navigation Stress Test

1. Pick a low-level page2. Answer these questions:

What is this page about? What site is this? What are the major sections of this site? What major section is this page in? What is up one level from here? How do I get to the home page of this site? How do I get to the top of this section of the site? How might you get to this page from the site’s home page?

Questions?

References

Information Architecture for the World Wide Web

Seeking information online: the influence of menu type, navigation path complexity and spatial ability on information gathering tasks from Behaviour & Information Technology

www.wikipedia.org

instone.org/navstress

http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/