Main Navigation Types and Usability, Pt 1 Horizontal Navigation

1
2182

Main Navigation Types & Usability

Main navigation, also known as Global navigation (if the navigation is always present on each page) is a crucial element for web site or web-based application usability. There are many variations of main navigation systems, however for the vast majority of existing web sites or web-based applications* there are four primary types:

  • Horizontal
  • Vertical
  • Inverted L
  • Mega Footer

(* For ease of reading, from now on I’ll just use the term ‘web site’ in place of ‘web site or web-based applications.’)

Which main navigation system is used depends on several variables, including;

  • Information architecture of the site
  • Screen size or typical location of use of the web site
  • User needs including any special accessibility issues

The screen size issue is a very important consideration now that more and more users rely on mobile devices to find and access content and functionality.  With mobile screen size being extremely limited vs. typical displays in homes or offices, it’s important to consider which type of main navigation will work best for each environment.

The main navigation type chosen will have a direct and significant impact on the usability of a web site, and because of this great care should be taken before deciding on a navigation type.  From a usability standpoint, there are multiple benefits and challenges for each primary type of navigation.

Main Navigation: Part 1 – Horizontal Menu

Horizontal menus have links placed across the page, well, horizontally.  This has a tendency to work well for Western cultures, in which reading from left to right, top to bottom is the norm.  Horizontal menus align with Western user’s expectations for important content being at the top of a page.

First level horizontal menu items “Subject 1” “Subject 2” & “Subject 3”
First level horizontal menu items: Subject 1, Subject 2 & Subject 3

Typically horizontal menu bars are located at the top of the page, but there are several notable exceptions to this rule, including the home page of Blogger.com, which has the main navigation at the bottom of the page.

Blogger.com home page horizontal main navigation is located at the bottom of the page.
Blogger.com home page horizontal main navigation is located at the bottom of the page.

Active vs Inactive Menu Items:

A good horizontal navigation menu relies on a visual change to indicate Active vs Non-active state.  The active state of a menu item provides the user with visual feedback that the user is on that page, or in that section of the site.  Typically active state menu items will use a change in font or background color, size or shape of the text, or the addition of objects such as underlines, arrows or other objects to indicate active vs. not active.

As the example from Yahoo below shows, the Active subject ‘Web’ in the first screen shot has the tab, which is connected to the Web Search bar.  In the second example, ‘Images’ has the tab connected to the search bar, because it is now the active subject.

As a side note, it is also interesting that Yahoo changes the text of the search button to be aligned with the main navigation active subject to ‘Web Search’ when the ‘Web’ tab is active, and ‘Image Search’ when the ‘Images’ tab is active.

Click here to view latest job postings

Yahoo horizontal menu navigation

Yahoo is an example of a horizontal menu visually changing to indicate the active menu item
Yahoo is an example of a horizontal menu visually changing to indicate the active menu item

Multiple Levels of Horizontal Menus:

Adding more menu choices to horizontal menus is typically achieved by providing additional horizontal menus below the 1st level menu.  This provides additional visual information with which to make navigation choices, and helps provide additional contextual information about the contents of the web site.

Likewise, 2nd or 3rd sub-levels of menu links can be added below the main navigation level.  As demonstrated below, each subject in the main level can have a sub-level, and sub-sub level added below that.

An example of adding sub-levels of main navigation links
An example of adding sub-levels of main navigation links

In the past, it was more common to see multiple rows of horizontal menus being used for main navigation, however they are not as commonly used today.  An example of a web site using multiple levels of horizontal menus is in the screen shot below.

Example of a web site that uses multiple=

However, as more main navigation menu rows or sub-levels are added, this technique causes other usability issues.  The most significant usability issues include:

  • Content is pushed vertically down the page
  • The visual (thus cognitive) load on the user is increased by the additional menu choices

For these reasons, caution should be used when displaying multiple rows of sub-level or main navigation.

Horizontal Menus with Drop Down Sub-Menus:

Because of the usability issues caused by multiple levels of horizontal menus, alternative methods of displaying sub levels using drop down menus were developed.

Techniques for displaying drop down menus from main navigation horizontal menus include mouseovers (where the menu drops down when the user rolls the mouse cursor over the menu item) or clicks (where the menu drops down when the user clicks the menu item).

Most often, a single main navigation link will have a single drop down below it, containing additional main navigation menu items or sub-level navigation links.  The example below demonstrates a drop down menu of sub-level menu items attached to the ‘Subject 1’ main navigation menu item.

A drop down menu can display 2nd level items via mouseover or click of “Subject 1”
A drop down menu can display 2nd level items via mouseover or click of ‘Subject 1’

To display additional sub-levels of menu choices, many drop down menus include fly-outs, menus that appear to the right of the higher-level selection (see example below).

A Fly-out 3rd level menu resulting from hovering over the 2nd level “Subject 1c”
A Fly-out 3rd level menu resulting from hovering over the 2nd level ‘Subject 1’

This use of drop down menus and fly-outs solves the problems of page content being pushed vertically downward by multiple horizontal menus, and also of the increased cognitive load caused by displaying multiple rows of horizontal navigation.

Google’s horizontal navigation menu with additional navigation links via a drop down

Google’s horizontal navigation menu with additional navigation links via a drop down

However, the use of drop down menus also causes a new set of usability problems.  These include the fact that menu items, thus content, are visually hidden from users, causing potential navigation issues.

In addition, another usability issue may be encountered by users with motor skill impairments.  These users may have difficulty accessing certain kinds of drop down menus, especially those menus that require the user to carefully move their cursor to the right on a drop down menu item to reveal additional sub-levels for that item via fly-out menus.

As a side note, in addition to user problems, certain technology implementations of drop down menus can cause search engine spiders to be unable to access the drop down menus, and thus not be able to access the lower levels of web site content for indexing purposes.  For this reason, caution should be used when choosing the technology that will display the drop down menu.

A recent variation of drop down menus that is becoming more popular for main navigation is the ‘Mega Drop Down Menu.’

Mega Drop Down Menus

Mega drop down menus are large (usually 2 or 3 column) boxes with groups of sub-level links from the main navigation item, often sorted into distinct visual groupings.  Because they have a much larger amount of screen space available for display, most mega drop down menus do not require the user to scroll.

Also, because of their larger screen size, mega drop down menus have the benefit of being able to display 2nd and 3rd level items at the same time, and thus do not hide important links from users as a typical drop down menu with a fly-out would.

As the example below demonstrates, mega drop down menus can group multiple categories of sub-menu items and can easily accommodate 2nd and 3rd level items.

A mega drop down menu can contain multiple=

As the screen shot from DIYNetwork.com below demonstrates, a mega drop down menu can accommodate multiple sub levels of navigation in a much large screen space.  This provides the added benefit of visually separating and grouping menu choices using white space, headers, bullets and/or icons.  This gives far greater contextual information for users, enabling faster and more efficient web site navigation.

DIYNetwork uses mega drop down menus as part of the horizontal main navigation system
DIYNetwork uses mega drop down menus as part of the horizontal main navigation system

However, because Mouseovers or clicks are required to display the mega menu, they suffer the same issue of hiding potentially important navigation choices as traditional drop down menus, and thus must be used with care.

Information Architecture and Drop Down Menus

Because of the hiding effect of drop downs, including mega drop downs, a common information architecture issue most web site designers must carefully address is what items should be included in the 1st level main navigation menu, and what items are secondary or tertiary and thus should be grouped in subsequent sub-levels (i.e., inside drop downs).

When making decisions about the structure of a horizontal navigation system (or any of the other main navigation choices) and drop down menus, a carefully planned information architecture and labeling system should be developed and used in advance.

This information architecture and labeling should be the result of card sorts and ethnographic research regarding the typical user’s mental map of the content & flow.  Matching the mental map of the users with the main navigation and drop downs is one of the most important ways to ensure good usability and a satisfying user experience.

There are other variations of horizontal main navigation, beyond what was covered here.  However all variations of horizontal main navigation have the same basic benefits and limitations, a summary of which is:

Benefits of Horizontal Menus:

  • Uses minimal vertical screen real estate, allowing maximum width of screen for content
  • Follows Western cultural reading process of left to right, top to bottom
  • Provides simple and effective visual context of the content structure of the site

Limitations of Horizontal Menus:

  • Limited width of screen means limited number of main navigation links
  • Difficult to scale, adding more main menu links over time is problematic
  • Adding 2 or 3 levels under 1st level uses more vertical screen space, pushing content lower
  • Adding additional levels of main navigation causes additional cognitive load on users

Summary: Main Navigation using Horizontal Menus

The benefits of using horizontal menus as the main navigation for a web site are compelling, and if done correctly, greatly contribute to the usability of a web site.

A proof for this may be the fact that out of the Top 10 most visited web sites (according to Alexa as of 9/12/2009) 9 out of the 10 use Horizontal navigation:

Web Site:  Main Navigation Type

1. Google.com: Horizontal Menu
Google Main Navigation

2. Facebook.com: Horizontal Menu
Facebook Main Navigation

3. Yahoo.com: Horizontal Menu
Yahoo Main Navigation

4. YouTube.com: Horizontal Menu
YouTube Main Navigation

5. Bing.com: Horizontal Menu
Bing Main Navigation

6. Wikipedia.org (English): Vertical Menu
WikiPedia Main Navigation

7. Blogger.com: Horizontal Menu (bottom)
Blogger Main Navigation

8.MSN.com: Horizontal Menu
MSN Main Navigation

9. Baidu.com: Horizontal Menu
Baidu Main Navigation

10. MySpace.com: Horizontal Menu
MySpace Main Navigation

Part 2 in the main navigation and usability series is a review of vertical menus.

Comments are closed.