Navigation - Menus

Problem

An application provides complex, in-depth content with many views.

Solution

Provide users with an intuitive, easy-to-access menu system.

You have several major content areas/categories but usually no more than 10 - having more might suggest the need for an alternative menu structure.

HTML code here
	

CSS code here
	

Why

If an application has more than one view and/or predefined navigation path, users will need to easily move from one area to another, or access common/global functions from anywhere. Being consistent and persistent means that no matter where a user is, they can always get back to somewhere familiar.

Global navigation in the form of a menu is standard on the Web and is prevalent in applications. Users have come to expect it, so if a menu in some form is absent from an application, the user will likely notice and will find this lack confusing. Menus 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.

How

As a function of information architecture, the first step in designing the menu navigation is to think through the organization of your information and functions. Find the similarities and relationships and create meaningful groups based on these. They should reflect the way that the user thinks about it both in organization and terminology.

Due to visual space constraints (and cognitive load), choose a small number of top-level groups. These may be all that are necessary if there are a small number of key areas/functions. More than likely, some nesting will be required.

Variations

The most popular option is a top navigation menu bar. 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.). This maximizes the horizontal space for content.

Some applications will compliment a top navigation menu bar with left navigation, 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.

In terms of form, there are several varieties... tabs can be a good choice for top menus in order to also show the current 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.

Examples