Every site has structure, and visitors will form their first and most lasting impressions of that structure by looking at the links, buttons, tabs, and other controls that form the “navigation.” As designers, we’re very concerned with creating a navigation scheme and interface that makes it easy for the user to understand what they can do and where they can go. But collaborating with your team on the design of a navigation system can be difficult unless you all share the same vocabulary when talking about the different parts that make up the navigation UI.

Global Navigation

People seem to agree that there’s something called “universal” or “global” navigation, which is the set of choices you see on every page of the site.

Part of Amazon’s global and local navigation interface.

The global sections on Amazon.com include all the tabs: Welcome, Indi’s Store, Books, Electronics, and so on – as well as the controls in the line above the tabs (View Cart, and so on). The sections shown in the blue bar change depending on which tab you click, so these are “secondary” or “local” navigation.  We can ignore them for now.

What about the “See More Stores” section, and the functionality it implies? Amazon has too many sections to put in the tabs, so they change the tabs based on your selections. For instance, if you click on See More Stores and choose Home & Garden, the Home & Garden tab will appear in global navigation.  Strange?  Possibly.  They’re taking a risk, assuming you’ll click See More Stores to find what you’re looking for.

The row of tabs, including “See More Stores,” represents the core navigation of the site, so it can be thought of as primary navigation. It provides access to the main tasks you came to the site to accomplish – buy a book, find a digital camera, research a computer purchase. But what else counts as global navigation?  The shopping cart!  Indeed, all the items in that little row above the tabs count as global navigation – they appear on virtually every page in the site. This collection of tools helps customers transact business with Amazon. A customer may want to look up the shipping date of an order, peek at their wish list, or pay for their purchases. That little row of useful links is often called utility navigation. It provides access to subsidiary tools that help the user, but it is not the core reason for the web site.

So why isn’t search in this image? Amazon puts their search box just below the navigation line to the left on every page. This box varies slightly depending on the page, but presents the same functionality: enter some keywords and click a button. Is it still utility navigation – and therefore still global navigation – even though it’s not in that little row? You bet. It is a tool that’s made available everywhere.

Utility navigation is often split up visually in the UI. On Amazon, the Search box appears on the left, while the rest of the utilities are on the top-right.

Visual designers and UI designers can break up the navigation groups into various layouts, depending on what proves to be most usable. Search boxes are often separated from the rest of utility navigation, as they do on Ebay. With similar frequency, the search box is graphically joined to the rest of the utility navigation, as on Agilent.

Now think about the logo. Usually, a clickable logo appears on the top of the page, which takes you back to the home page. There’s also often a “Home” link somewhere – is it part of primary or utility navigation? You’ll find examples both ways. At Ideo it’s part of the utility nav. On Amazon, the Welcome tab is the home page, so it’s part of primary navigation. This “Home” redundancy is fine, as clicking logos is not quite obvious enough to leave out the Home link entirely.

The third and final component of global navigation is the footer. The area at the bottom of the page can contain small-print kinds of links like “Terms and Conditions” or “Privacy Policy.” Some sites, like Colloquy, also tuck into the footer other miscellaneous links like “Contact Us,” “About Us,” and “Jobs.” Other sites find it useful to include redundant primary and utility navigation, as Autodesk does. If you do this, be sure to visually separate the redundant primary and utility links from the footer links.

A Practiced Eye for Navigation

Every site can be organized into primary, utility, and footer navigation. Unfortunately, many sites still have poor or inconsistent navigation. How consistent is your site? Spend ten minutes clicking through your site. Go very deep and broad, selecting random pages along the way. Compare the primary, utility, and footer navigation on those pages. Is it consistent? Do the groupings make sense? By understanding these three components of global navigation, you’ll find it much easier to develop a cohesive system and apply it consistently throughout your site.