Navigation

Introduction

Every Web site has navigation facilities, so that the user can navigate around the site.

Providing good navigation requires a good site organisation, because good navigation relies on the sense of place that this provides.

Navigation facilities appearing on a page of a Web site can be divided into two categories:

• Location (keeping users aware of where they are)
• Controls (providing routes to other places)

Location

Each page on a site needs to let users know where they are within the logical structure of the site. Users can easily lose track of their place without clear information. Some users may enter the site at an inner page and will need to know where they are.

Controls

Controls for navigation are those which take the user between pages on the site (links). Navigation controls tend to be arranged similarly on each page so that they can be found easily. A good set of navigation controls allows users to get where they want quickly, without cluttering the screen with links.

Location

Once you have decided how the site's content will be logically organised, you need to decide how this is represented to the user. In order for the user not to get lost, each page must clearly show their current location.

Directly representing the organisation

Often you can represent the user's location in the site based directly on the organisation you came up with. This works well where the site is organised as a hierarchy that doesn't have too many levels.

For example, a site might include reviews of books and CDs. The hierarchy could have two branches (one for books and one for CDs), each of which contains a series of reviews. In this case it would be simple to represent the user's location, requiring only two pieces of information:

• The section they are in (books or CDs)
• The review they are currently looking at

Representing a complex organisation

Problems arise when the hierarchy has more levels, or when some more complex organisation was used. Users may not be able to follow a multi-level hierarchy, or may find it tedious. Also, listing the user's position in (for example) a four-level hierarchy may take up too much space on the screen.

In these cases there are several possible solutions, including:

• Break the content into distinct "sites" which appear to be completely separate. Within each site the hierarchy will be simpler.
• "Fold in" some of the middle hierarchy levels so that they appear to be only a single level.
• Group information at the lowest hierarchy level so that it appears in single pages corresponding to the next level up.

This site displays all hierarchy levels (down to an individual section of a lesson) along the top of a section page. If it were any more complicated, one of the above strategies would probably have to be used.

Your own site

Location details

Location information should be available on every page of the site. The displayed information should also completely specify a user's location within the site. Otherwise, some users - perhaps those who follow more unusual routes to reach a page - may become confused and lost.

Location should be constant

In order that users don't get lost, it's important to have location information available on every single page of the site.

The information should also be in the same place on the page, and in the same format or style, so that users recognise and understand it.

Location should be complete

In most cases the location information should be complete - in other words, it should entirely specify the user's location within the site.

For example, if the book/CD review site mentioned earlier did not include full location information (perhaps if the section information, that indicated the user was looking at either book reviews or CD reviews, were omitted) then a user looking at book reviews might forget that there were other sections of the site, and consequently miss the CD reviews completely.

Unusual access routes

Location information is particularly important if users might reach a page without going through the normal navigation. For example, you might link directly from a review in the book section to another one in the CD section (perhaps if the CD were connected to the book in some way). A user following the link needs to understand that they've ended up in the CD section and will have to back out to the book section if they want to continue reading book reviews.

Since this is the Web, users might also reach any page in your site directly, from a search engine or a link from some other site. Wherever they enter your site, they should be able to quickly find their way around, and clear location information is an essential part of this.

Visual location

Location can be indicated in many ways, the obvious one being text. Graphics or colour schemes can also indicate location. These are useful but are not likely to be immediately clear to new site visitors, so are most appropriate in addition to clear textual information.

For ideas on how to display location, look at existing Web sites such as those in the case studies for this lesson.

(Graphic design aspects will be covered in a future lesson.)

Controls

Controls on the page (normally simple links) allow a user to find their way to the page they need. Controls should be designed so that most users can get where they want as quickly and easily as possible.

Categories of navigation controls

Navigation controls can be divided into two categories:

• Primary navigation (navigation controls that are present on most pages)
• Secondary navigation (navigation that provides easier or more direct access; normally seen on front pages, contents pages etc. where the main part of the page is given over to navigation)

Links that are not navigation

Other links, such as those embedded in normal text, are not really navigation controls; users should not need to rely on these in order to navigate the site.

Hyperlinks like these will be discussed in a future lesson.

Primary navigation

Primary navigation controls are those which are present on most pages of a site (normally all the "inner" pages), in a regular format. These controls should allow users to get anywhere on the site.

Positioning

Often these controls are present in a sidebar to the left, right, or top of a page. (On this site, the hierarchical position information, which also contains links, is at the top, and the list of all sections within the current lesson is at the left.) Following this convention can make a Web site easier to use because it is a common standard on the Web.

As with location information, it's very important that these controls are in a standard position on every page of the site, so that users can find them quickly without confusion.

Combining with location

Navigation controls are often combined with location information. If the location information includes the name of the section which a page is in, then clicking on that section will normally take users to the main page of that section.

Again, this is common to many Web sites so it can make the site easier to use.

Navigation to where?

Primary navigation controls should always provide access to upper levels of the site. It should be possible to get to the main page for the current section, or to the main page of the entire site. Users need to do this if they get lost or if they arrived at the site from a search engine or outside link.

Sometimes primary controls also include links to other pages at the same level of the site, for quick access.

In addition to a sidebar, a common technique is to include "Next" or "Back" controls as standard within each page. This is often useful rather than (for example) requiring users to go up to a higher level and then back down, when they simply wish to go through all the pages at one level.

Your own site

Secondary navigation

As well as primary navigation controls, included on each page, most sites use their home page for navigation (i.e. a list of contents) and there may also be contents pages for sections of the site.

I am referring to these pages as secondary navigation. This navigation is not included on all pages, only a few specific pages. However, it is usually the main focus of the page which contains it, rather than being pushed off into a sidebar.

(Note: I don't mean to imply that "secondary" navigation is less important to users than "primary" navigation. The main distinction is simply that it doesn't occur on all pages of the site.)

Importance of secondary navigation

Secondary navigation is important because, unlike the sidebars, it appears in the main section of the page that users pay most attention to. Since there is more space it can also give detail about the contents of each section or subsection of the site, so that users can make a sensible choice about where to go.

Secondary navigation often also provides fast routes to information. For example, a site might highlight the most recent new content on the front page, so that regular visitors can go directly to it.

Other secondary navigation

Contents pages are the most common form of secondary navigation. Other examples include site maps, indices, and search pages.

(You may not have come across site maps before; a site map is a page that shows the structure of the entire site and allows access to all pages within the site.)

Your own site

Trade-offs

There is usually a trade-off in both primary and secondary navigation.

Including more links makes it quicker to get around the site (because there is more likely to be a direct link to the desired location), but clutters the screen and makes it more complicated for users.

In general it is a good idea to keep primary navigation to a minimum because these controls are present on every single page and will clutter the whole site. There is more room for maneuver with secondary navigation (contents pages etc.)

User-focusing

A good way to resolve questions like "What should be directly linked from the front page?" is to think about the site from the perspective of users.

Analysing user types

Considering each type of user accessing the site, and each type of content, you can ask three questions:

• Will users of this type sometimes want to reach this content? (If not, go on to the next.)
• Starting from the home page, will it be obvious how they can reach the content?
• How many "clicks" (page links) are there between the front page and the desired content?

Revising navigation accordingly

Then you can revise your navigation so that each type of users can reach commonly-accessed content quickly and easily. Less frequently-accessed content should also be easy to reach, but does not need to be as quickly available.

Common revisions you might make are:

• Adding links from the front page (or section sub-pages) directly to frequently-accessed content
• Removing front-page links to content that isn't often used, or de-emphasising these links
• Adding cross-links between one section and another related section
• Removing cross-links to unrelated sections
• Altering the site organisation or the way it appears to users, to take more account of the different user types

Your own site

Good controls

Once you have decided on a navigation control which will take the user to a particular location, you need to decide how to design that control - what text or graphics it should consist of.

Objectives

A good navigation control:

• is clear (users can tell it's a link, either by standard visual cues or from location etc.)
• has obvious location (users know where - within the site's organisation - they will get to when they click the link)
• leads to obvious content (users know what content will be at that location within the site's organisation)
• is consistent with other navigation controls - this helps achieve the other objectives

Obviously it isn't possible to achieve all these objectives perfectly with what may be a single-word link within a sidebar! But some progress can be made in each way.

Example: "Next" control

For example, consider a primary control (present on every page) which always leads to the next section. Some alternative text for this might be:

• "Next" (this is obvious in terms of location within the site, but not in terms of the actual content at that location)
• "[Title/description of next section]" (this is obvious in terms of content, but not in terms of location within site; it's also less clear as a link and reduces consistency over plain "Next" since all these links will be different)
• "Next: [title/description]" (this is obvious in both content and location, and retains consistency)

Case studies

I recommend that you try to do two things when investigating one of these case studies:

• Analyse the navigation: Note down simple lists of where you can get to from each page using the primary navigation, what location information is provided on each page, and what secondary navigation is provided.
• Evaluate the navigation: Are there too many options or too few from each page? Are the links as clear as possible? Is secondary navigation sufficient? Any general praise or criticism?

As usual, my brief answers (which are obviously not perfect) are included by each site, so you may prefer to jump to the site before you read my comments.

Summary

The aim of a Web site's navigational facilities is to make sure users can easily get to the content they require.

This objective is usually achieved by making sure users:

• understand where they are within the site (their location)
• can easily get to other places (using navigation controls)

Location

To make sure users understand where they are, each page on the site should give its location within the site. This information should appear in the same place and the same format on every page.

(Of course, users will only be able to understand their location if the site has a clear concept of location, based on a good organisation.)

Controls

Each page should also include standard (primary) navigation controls which allow users to navigate. Once more, these controls should be consistent across all pages. However, because they do appear on every page it is important to keep them to a minimum and avoid clutter.

Secondary navigation controls should give the user quicker access, from pages which are entirely devoted to navigation around the site such as the front page.

User-focused design

To inform and evaluate your planned navigation, it's useful to consider different types of user. You can consider whether each type of user will be able to find the content they desire, easily and quickly.

References