Skip to content

Contact us

Sydney

Phone (02) 9261 4624 Fax (03) 9684 3434 Level 1, 26-28
Wentworth Ave
Surry Hills
NSW 2010
Sydney map

Melbourne

Phone (03) 9684 3470 Fax (03) 9684 3434 Ground Floor
119 Ferrars St
South Melbourne
VIC 3205
Melbourne map

Get in touch

At U1, we love hearing from people. So whether you have a query about the work we do, who's on our team or when's the next training event, contact us via email or phone.

3 Types of Navigation

Alysia Former UX Consultant 2nd Apr, 2012

We have recently been working on a number of wireframing projects with clients which has led to a number of discussions about the different types of navigation that are employed within a website. As a result we thought that in this month’s newsletter we would explore the different types of navigation used in a website and their role and function in maintaining a sense of structure and order within a website.

There are three main types of navigation that we will discuss in this article

1)      Main navigation

2)      Local navigation

3)      Contextual navigation

Each of these have very distinct and important roles in assisting users to navigate a website and ensure that they don’t get lost, as shown below in Figure 1. The Main navigation is often located along the top of the website. The Local navigation is often located to the left (A) or under the main navigation (B).

How different types of navigation are represented within a site

Figure 1 - Shows how different types of navigation are represented within a site

1. Main navigation

The purpose of the main navigation is to divide the website content (which could be 50,000 pages) into a small number of menu options. This can be anything from 4 to 8 or even 10 main menu options. Each of these menu options represents a ‘section’ of the website. It allows the user to know where to start looking. For example, Target stores are always open planned, with thousands of products available. To help people find these products, they are grouped and classified and sign posted (using large overhanging billboard style signs). Somehow all 100,000 products can be grouped and classified and logically fit under headings such asWomen’s Casual WearMen’s wearHome DecorKitchen wearCosmetics and so on. The main navigation of a website serves the same function.

2. Local navigation

As previously mentioned, a main menu option represents a “section” of the website. A section might be Women’s Casual Wear. A local navigation represents sub-sections and groups and classifies the content within its respective section. For example, The Women’s Casual Wear local navigation might consist of tops, skirts and pants.

3. Contextual navigation

Contextual navigation is the user’s passport to different sections of a website. It is generally found within the body of the website (the Body of a page is the area coloured pink in Figure 1.), and provides links to relevant content that are not housed within the section of the website that the user is currently viewing.

The following are examples of contextual navigation

  • A  Back, Next or Previous link on a page
  • A word converted to a link within a paragraph.
  • A paragraph heading converted to a link to allow the user to see more information
  • Read more link
  • An area of the page devoted to displaying a list of links for a particular purpose (e.g. Related Links).
  • Any link in the body of the page

During user testing, we are increasingly observing users exploring contextual navigation in preference to “main” and “local” navigation and referring to the “main” and “local” navigation, only if they can’t see any contextual navigation that looks promising.  This points to the increasing importance of contextual navigation and the need to understand how it differs from “main” and “local” navigation.

The following are two common visual examples of Contextual Navigation.

1. Relevant content of interest

Contextual Navigation is often used in e-commerce sites to up-sell or show related products. For example, at netaporter.com when searching for the designer Michael Michael Kors, the Gathered stretch-jersey dress appears in the search results. On the page that details the Gathered stretch-jersey dress, below there are images of dresses by other designers of a similar unstructured style and red in colour. What is clever about this, is that it identifies that perhaps users might be interested in purchasing from other designers (possibly even a cheaper designer) if they can still achieve the ‘look’ that they want.

Suggested items from ecommerce site

Figure 2 - netaporter.com

2. List of Links

 

A list of links are often used to promote and provide quick access to top user tasks, which might fall under a number of sections. At South East Water, some of the top main user tasks are users needing to pay their Bill, mange their account and water bill, especially when moving home. The links provided to do this are “Pay my bill”, “My account” and “Moving home”.

List of quick links from South East Water website

Summary

The Main navigation and Local navigation are designed to give the user a sense of understanding as to how the site is organised and structured. Contextual navigation allows the user to explore the site and jump around various parts of a website when the need arises. If all 3 types of navigation are implemented correctly, this user is more likely achieve the purpose of visit to the website.


About The Author

Alysia Former UX Consultant

Alysia is our interaction design specialist who has a passion for good web design – with purpose. After all, websites shouldn’t just look great; they should be as user-friendly as possible! With a web design background, she thrives on undertaking the research that influence how designs should work – analysing how concrete research and proposed wireframes complement each other to produce the most intuitive and engaging product.

Related

Visit our website if you'd like to learn more about U1 Group     U1 Group