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
Embedded navigation systems are part of most sites you
visit. They must work together to help users navigate the
site.



Global
Local
Contextual
Can also be thought of in “tiers”.
Global: Site-Wide
Global
Local: Same navigation within particular section
Contextual: Links to something specific
Other tools that help the user navigate
Supplemental Navigation Systems that are external to
the basic hierarchy of a website.





Sitemaps
Indexes
Guides
Search
Breadcrumbs
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:
1.
2.








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/navigationmenus-trends-and-examples/