Global Navigation

Problem

It’s easy to get lost in a big or unfamiliar place.

Solution

Design a persistent, global navigation facility that enables people to get to the key areas or functions of your site or application.

Context

• Your solution is such that it allows for arbitrary navigation between areas/functions.
• The target form factor/device can support a global navigation structure.

Rationale

If your site or application has more than one view and/or predefined navigation path, you almost always want to enable people to easily move from area to area or access common/global functions from anywhere. Being consistent and persistent means that no matter where a person is, she can always get back to somewhere familiar, so it is both a useful tool as well as a comfort.

Global navigation is pretty standard on the Web and is pretty prevalent in applications that make use of the standard menu bar or other approaches to surface the navigation. People have come to expect it, so if you don’t have it, they will probably notice and probably won’t appreciate it. If you want or need to hide the global navigation, be sure that people know that it is there and how to get to it. Further, they are often used as a means of exploration, both of information structure as well as application capabilities—some users will literally read through the menus to understand what an application can do.

Implementation

As a function of information architecture, the first step in designing global navigation is to think through the organization of your information and functions. Find the similarities and relationships and create meaningful groups based on those. They should reflect the way that your target audience thinks about it both in organization and terminology. A good exercise to help with this is card sorting.

Due to visual space constraints (and cognitive load), you normally have to choose a small number of top-level groups. These may be all you need if you have a small number of key areas/functions. More likely, you’ll need to do some nesting, which can take the form of fly out, accordions, ribbons, trees, nested tabs, etc. As a rule, though, your global navigation should not have more than two to four levels.

As part of your consideration of what kind of representation to choose, you need to factor in the various views in your applications and their particular needs to decide on the optimal place and kind of implementation to choose. In terms of location, there are typically four choices: top (a.k.a., “horizontal”), left (a.k.a., “vertical”), top and left (a.k.a., “inverted L”), and top and bottom.

Probably the best and most popular option is top navigation. This is because most views start out showing the top area (if they’re scrollable at all), it is close to other navigation facilities (e.g., the address bar, favorites, back/forward, etc. in browsers, the always resident top menu bar in Mac, most Windows apps have it there, and the window controls themselves), and it maximizes the horizontal space for content—people are more okay with scrolling vertically than horizontally.

Some sites and applications will compliment a top navigation with a left navigation (the “inverted L”), usually for secondary (or lower) navigation choices, and it is often local and contextual to a higher level option. Others will use the bottom of the view to put secondary and lower navigation. Using a primary left navigation can work if you don’t mind losing that horizontal space and/or need to use the top area of the view for something else (such as ads).

In terms of form, there are all kinds as already mentioned. Tabs can be a good choice for top menus in order to also show the currently selection location/function. The ribbon uses tabs to group related commands and keep them visible. On the side, an accordion can be used for the same purpose. They can also lend themselves more to iconic representations; however, for many sites a simple, standard menu bar will suffice, especially when accompanied by a wayfinding device such as Breadcrumbs.

It’s worth noting that even with global navigation, you can have exceptions. It is fairly common for sites to use a Hub and Spoke approach on the homepage, and of course Modal Panel type views do not need to replicate the global navigation since they are usually within the visual context of global navigation on the view that opened them.

One last thing to keep in mind is that people will inevitably not rely solely on your structured, global navigation. It is common (and good) to provide other means to get around such as contextual cross linking within sites, site maps, searching, browsing by tags and categories. You should provide one or more of these alternatives to help people get around.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Global Navigation pattern can be implemented by using any of the following ASP.NET controls: WebDataMenu,WebToolbar, WebListBar, WebDataTree, WebTab. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebMenu, xamWebOutlookBar or xamWebTree control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinToolbarsManager, WinExplorerBar, WinTree, or WinNavigationBar. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called MyFinanceto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: XamRibbon and XamOutlookBar. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamShowcase called xamSalesManagerto see it in action.

Sources

Jennifer Tidwell, Global Navigation

Patterns in Interaction Design, Main Navigation

Jared Spool, Global Site Navigation: Not Worthwhile?

Tags

Tree, Navigation, Hierarchy.