July 23, 2011, 4:37 p.m.
posted by legendcoder
Making Room for All Your Navigation
The deepest pages on your site often will have to display the most navigation. When considering various navigation schemes, make a mockup or sketch of one of these pages to test possible arrangements. It's always easier to take away navigation from pages higher in your site structure (where it's not needed) than to try to wedge in important navigation on a page that wasn't designed to handle it.
Navigation plays two related roles on a web site. By arranging links in a logical hierarchy, navigation gives visitors the mechanisms they need to browse from one page on your site to another. Navigation also provides feedback to users that helps them understand where they are in your site and how the page they're looking at relates to other pages on the site.
Navigation can appear in a variety of shapes and sizes to meet its two obligations to web surfers. The primary, or global, navigation outlines the main sections of your site and should appear on every page, including the home page. Have your proposed site map handy (see Recipe 2.1) before you start thinking about what your primary navigation items should be and how they will be presented.
Don't alter the position or wording of your primary navigation from page to page, lest you drive away visitors in confusion. You can, however, vary the text or background color on a primary navigation item to signify the current section of the site in which a visitor is browsing.
Local navigation includes everything that appears only within a certain section, subsection, or small collection of pages. Sites with a deep hierarchy often have secondary navigation, tertiary (third-level) navigation, and even page-specific navigation that connects visitors (via "anchor" links) to subheads further down on one long page or to related material displayed over multiple pages.
Don't overload or complicate your navigation with long, hard-to-scan lists of links to make every page no more than two or three clicks away from every other page. Usability studies have shown that pages with more than a couple of dozen navigation options produce severe eye-glazing in web surfers. If your navigation is logical and hierarchical, then a site that's four, five, or even more clicks deep is OK. And remember, many visitors will skip your navigation by deep linking to your site from Google, your own site's search engine, or another web site.
Other components of navigation include links to pages that convey general, site-related information or pages that don't fit into any particular section. They go by a handful of names: permanent navigation for items such as copyright and privacy policies, functional navigation for visitor actions such as login or checkout, and utility navigation for things like site search, site map, or contact. These navigation items, which can be mixed and matched to meet the needs of your site, are usually displayed as text links and tucked away in a corner of the layout.
The primary links and the various levels of local links form the core navigation for your web site. In the Western, left-to-right reading world, the top and left edges of your design are the best places for this navigation. Carving out enough room to show all the necessary navigation on any given page often requires a bit of compromise. Starting with a modest list of concise, user-oriented navigation phrases helps.
Horizontal navigation, or tabs, are popular because they mimic the familiar GUI menu systems of modern PC operating systems and applications. But they eat into precious vertical space in your designespecially when you must leave room below the primary links for section-specific local navigation. Arranged horizontally, your primary navigation can hold only about six to eight items.
You can use the left edge of the screen instead ofor inconjunction withhorizontal navigation. By arranging links vertically, you can more easily add new links when needed, but the narrow space is less accommodating of longer navigation phrases.
Web usability consulting firm Adaptive Path has two excellent articles about site navigation on its web site: "A Few Helpful Definitions" (http://www.adaptivepath.com/publications/essays/archives/000048.php) and "Keeping it Under Control (http://www.adaptivepath.com/publications/essays/archives/000103.php). For more about the art of creating page titles and link text, see Recipe 6.2.
OpenCube sells some of the best cross-browser drop-down menu systems at http://opencube.com.