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.

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

Indexes Indexes, 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

Search Search 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 Navigation Personalization: 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  Pick a low-level page  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   instone.org/navstress  menus-trends-and-examples/ menus-trends-and-examples/