What is: Navigation?

Navigation is both the system(s) that a visitor can use to move around a website (global navigation, breadcrumb trails, related links, pagination (previous/next page), footer navigation, etc.) and the visual manifestation of such systems (hyperlinked text, tabs, buttons, etc.).

Website navigation has two main functions:

• to tell the user where they are
• to enable the user to go somewhere else
• In the case of text-based hyperlinks, navigation may also inform the user of where they have been.

Depending on the interface conventions used, links that have been followed may be assigned a different visual treatment than an unvisited link. For example, on the website, unvisited links are grey, and visited links are purple.

If the user is familiar with the notion of unvisited and visited link states, they may revise their browsing behaviour, e.g. “I’ve been to that page already and didn’t find what I was looking for—so I’ll try that (unvisited) page instead.”

Navigation is often referred to when discussing website structure and information architecture.

Global/top-level/persistent/primary navigation

Global navigation helps to orient the user. ‘Global’, ‘top-level’, ‘persistent’, or ‘primary’ navigation is navigation that is displayed on every webpage, usually at the top or left of the screen.

This type of navigation provides access to the main content sections or services. In function it is similar supermarket signage—it helps to orient the user to their surroundings.

The text chosen for navigation links (label) can help to describe the content or services the website provides.

For example, if the global navigation items are: Headlines, Breaking News, Articles, it could be deduced that the website represents a newspaper or news-agency.

If the current section is highlighted, the global navigation may describe the type of content the current webpage contains.

For example if the Articles navigation option were highlighted, it would suggest that the current webpage is an article (or an article index/gallery).
In addition to the main sections of a website, global navigation often includes a link to the homepage, contact information and a search feature.

In-page navigation

When arriving at longer-length webpage, a person may need to scroll down to get a sense of the topics covered. If content has been structured through the use of headings, then they will be able to figure-out if they have found the content they are looking for (before they start reading).

In-page navigation simplifies this initial orientation process (also referred to as ‘scanning’), by linking to major content headings from the top of a webpage.

Within the MakeAwebsitehub.com Glossary, this form of navigation is headed up as ‘On this page’. This label is used to avoid potential confusion with terms such as ‘table of contents’ or ‘contents’ which, in the real world, typically relate to multi-page documents.

In-page navigation is of most benefit on webpages that extend beyond two ‘scrolls’. The value of this form of navigation is limited on shorter pages; as adding it may push headings and content (that a person would otherwise have been able to see), further down the screen (under the fold).

Footer Navigation

Footer navigation is also often displayed on every webpage and as such is global navigation. However, rather than linking to content sections, footer navigation typically links to administrative content; copyright statements, terms of use, legal disclaimers, website feedback links, etc. Footer navigation also tends to be presented as text links.

Repeating section links in footer navigation

A common practice is to repeat content-level global navigation options in the footer navigation. This is often borne out of a desire to make a website more accessible, in particular if images or an image-map have been used to display global navigation items.

Repeating the navigation as text-only links ensures that a user accessing the web with a screen reader or without displaying images can still use the website. However, text-only links are unnecessary if navigation images have appropriate alternative (alt) attributes.

…choosing a new section is often a change of task…

An additional argument for providing redundant section links in footer navigation is that it is more efficient; when a user reaches the bottom of the webpage they will not need to scroll back to the top to choose a new section.

The counter-argument is that choosing a new section is often a change of task, and that a form of cognitive ‘resetting’ occurs.

This resetting includes:

• forming a new task
• considering if the current webpage (or website) will help complete that task
• evaluating which navigation link will most likely lead to the content or service they are seeking
• Presented as text-links and located at the bottom of the webpage, footer navigation has a negative perceived affordance; it just doesn’t look like a starting point.

An additional usability argument for not duplicating global navigation in the footer is that it introduces uncertainty—a different visual treatment may infer a different destination webpage (even if the label text is identical).