by Indi Young
April 16, 2003
Now that we have established some definitions for the elements in Web site navigation, let’s discuss how to keep navigation levels under control.
First let’s review what we learned in the last essay. Site navigation is the structure of the site, and is presented as a globally present set of selections on your pages. These selections normally appear in a header, sidebar, or footer; the rest of the page displays content.
Navigation is the section of the page that controls what appears in this content area. The beauty of this is that the page content is malleable. The architecture is not, and should represent a strong, extensible foundation that will last at least ten years. It’s like building out floors in an office building. You can change the functionality of the floors as needed without changing the structure of the building.
Global navigation is often divided into two or three sections: primary, utility, and footer navigation. Primary navigation supports the main tasks the user has in mind when he or she comes to the site. Utility navigation provides tools for the user that will support the main tasks, but are not tasks themselves. Footer navigation contains “small print” and other links, defined by convention. Secondary navigation can appear when the user selects one of the global navigation items.
Did you get a chance to review your site for navigational consistency? In your exploration, did you discover places where simple primary and secondary navigation choices didn’t supply sufficient functionality? Let’s look at two ways that you can improve these areas.
I know this might sound severe, but keep your navigation to three levels. Of course, most sites have content that goes much deeper than three levels, so I’ll explain how to handle it. First, let me tell you why I suggest this three-level guideline.
So let’s look at how to handle deeper content. If you’re an enterprise-level software producer like PeopleSoft, you’ll have deep levels of product information. You’ll have product case studies, technology facts, customer profiles, brochures, demos, press releases, whitepapers, and online seminars, to name a few. You may have so many product modules that you’ll need to group them into product lines and product suites. There’s a lot of information here!
Take a look at the PeopleSoft site and you’ll see that their global navigation in the left margin only displays two levels: primary and secondary. Click on Products, select Product Lines, and select Customer Relationship Management. You’ll see a content page with many links on it. These links represent a fourth level of information, but that level is not a part of the navigation. Scroll and you’ll see there are three groups of links in separate boxes: Learn More, Solutions, and Product Modules. It would be exceedingly difficult to present, much less group, all these links in the navigation section. Instead, PeopleSoft wisely displays these links as a part of the content area.
To further clarify the difference between links in the navigation area and links in the content area, click any one of the Learn More or Solutions links. You’ll see the same page layout of boxes, but with different links. These links do not persist from page to page. They aren’t considered “navigation.” Navigation is persistent — exactly the same links appear in exactly the same location from page to page. Navigation forms the structure of your site and defines it. Content fills out your site.
So, backing up, you might ask, “Why wasn’t Customer Relationship Management a part of the navigation? It’s at the third level, and you said we could have three levels.” The site navigation is supposed to support user tasks. Product names are not tasks. Besides, products are usually subject to change from year to year. The last thing you want to do is base the structure of your site on something that inherently changes all the time.
Copia, The American Center for Wine, Food & the Arts, has a site that employs three levels of navigation correctly. The page header contains both utility navigation (in the purple bar) and primary navigation (in the red bar). Second-level navigation appears in the left margin as you move through the site.
Try this exercise. Click on the primary navigation item Visit Copia. You’ll see that the primary navigation items are preserved at the top of the page, and secondary navigation items appear along the left margin. If you click Shopping, third-level navigation will appear, slightly indented from the second-level titles. When you choose Dining at Copia, the Shopping third-level titles will disappear and the Dining third-level titles will appear instead. To look at a particular dining venue in detail, say Julia’s Kitchen, click in the content area of the page. This fourth level is represented by links, keeping the navigation area uncluttered.
One thing this site could do better is to move the little gold “you are here” triangle to the currently selected third-level navigation title.
If you follow these two guidelines, your site will appear more organized and understandable to users. If users feel like they can explore your site without getting hopelessly lost, they’re more likely to spend time there. That translates into good things, like more revenue, better communication, and more information sharing.
Indi Young is a founding partner and practice lead at Adaptive Path.
Published by Adaptive Path | 363 Brannan St. | San Francisco, CA 94107 | 1-415-495-8270 | http://adaptivepath.com/