Printable version of lesson; return to section index when finished.



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:


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 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.


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:

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:

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

Group exercise

Individually, consider which information needs to be included to give each page a clear location. Do you need to simplify from the underlying structure or not?

Make a list of the information required (probably two or three points). Don't worry about how to display the information; just decide which information needs to be presented to the user on each page.

In the group, briefly discuss each other's lists. Will that information be adequate for users to locate themselves? Is it simple enough for everyone to understand, without requiring people to be too familiar with the individual 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 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:

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.


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

Individual exercise

On a piece of paper, list all the primary navigation controls. Don't worry about where they will go on the screen, or other such details; simply list each page that you will be able to directly reach from most pages using the primary controls. An example list like this might be:

(If you use words like "section", make sure you clearly understand what constitutes a "section" in your 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

Individual exercise

Try to come up with secondary navigation for your site. You can normally list this in a few sentences or bullet points, for example:


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.)


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:

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:

Your own site

Group exercise

In small groups, examine each other's site navigation plans (from the earlier exercises) in turn. The group should invent a possible user for the site, consider what content that user might want to get to, and imagine how they can get to it using that navigation. This may bring out problems with the navigation controls.

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.


A good navigation control:

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:

Case studies

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

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.

Amazon's top bar of navigation is available everywhere, linking to different areas of the site (books, music, etc.) and to general options (shopping basket, help). Once within the site (for example, looking at a book description), a left bar provides a small amount more primary navigation within the section (to reviews or customer comments for a book, for example). Secondary navigation, apart from the search facility, includes some "highlighted" bestsellers or books "recommended" for a specific user, as well as category links; these are provided on the front page and on section contents pages.

The Java Tutorial

This tutorial site contains lots of secondary navigation. A front page links to all lessons, a lesson contents page links to sections within a lesson (sometimes there are subsections with their own contents pages), there is a table of contents for the entire lesson including all subsections etc., and there is a search facility.

Primary navigation contains buttons to the next and previous sections and TOC, links upward in the hierarchy, and a link to the search and feedback facilities.

Larabie Fonts

This site only really has primary navigation. There is a sidebar at the left with links to all sections of the site, which is always visible. Within the alphabetical sections, there are also "back" and "next" buttons to go through the site.

Location information is somewhat nonexistent, partly because the site uses frames.

dmoz open directory project

Primary navigation includes links to information about the site, etc. Location shows you where you are within their hierarchy, and this also works as navigation controls. The front page contains secondary navigation - links to all their major sections and some often-used pages within those sections, a good technique - and all the section pages also contain navigation to subsections etc.

As a directory site, this is basically all navigation, but it's fairly well done.


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:


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.)


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.


Jakob Nielsen's

Nielsen's site contains lots of thought-provoking articles on the subject of usability, some of which relate to navigation. The site is quite opinionated, and not everybody agrees with what he says, but his articles often make interesting points.

IA guide: navigation

Many articles about navigation from an 'information architecture' point of view. (Information architecture is a common term for the kind of subject discussed in this and the previous lesson.) Most of these are rather scholarly, but some may be useful for beginners too.