Recipe 3.3. Making Room for All Your Navigation

Problem

You need to make sure that all of your site navigation will fit in your design.

Solution

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.

Discussion

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.

You can facilitate a little deep linking on your own by placing a handful of "Google links" at the bottom of your pages. These are links that reference specific web-searcher keywords and link to deeper pages of single-subject sites. For example an e-marketing consultant could augment his top-level navigation (Philosophy, Products, Services, About Me, Clients) with specific links at the bottom of each page to pages about Email Marketing, Search Engine Optimization (SEO), Search Engine Marketing (SEM) that are all deeper in the site under the Services section. Doing so can bump up a site's page rank in Google and give users one click to get to relevant subject matter.

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.

Also, you might prefer to use that space for additional content or advertising (see Recipe 3.4). Using drop-down menus can save space in both horizontal and vertical arrangements.

Problem

Solution

Discussion

See Also