Design Tips > Designing a Navigation System
- Part I
by Katherine Nolan
OutFront News Article: December 26, 2001
The aim of a Web site's navigation is simply to allow users to get to the content they require. To find their way about users need to know two things:
- Where they are now
- How to go elsewhere
Navigation does not exist in isolation; good site organisation is a prerequisite for a coherent navigation system.
Objectives of a Navigation System
A good navigation control:
- Is clear: it looks like navigation
- Leads to obvious content - users have a good idea what they will find if they click
- Is consistent with other navigation controls
- Is predictable in its style and location on the page
Navigation can be broken into two primary types, Location
Indicators and Navigation Controls
Location Indicators
Location indicators let users know where they are in the site at the moment.
It needs to be borne in mind that users coming from outside your site can enter at any page, not necessarily in a 'main' page. They need to be able to orientate themselves. Equally it is important that users navigating around your site have a clear idea of where they are both in absolute terms and in relation to other content
There are a number of ways of presenting location information, which you choose really depends on the complexity of the content and the depth of the site structure.
Whatever method is chosen there are a few essentials in a good location system.
- Consistency: location information should appear on EVERY page of the site, in the same place and in the same style
- Completeness: Location indicators should tell the user precisely where they are and should be clear even to a user who has entered the site at an internal
page
- Clarity: The location indicator should be identifiable for what it is
and make sense in the the context of other navigation.
How to Indicate Location
- In simple sites a page banner - text or graphic - naming the page will be sufficient. For this to work the page name should also appear in the main navigation so that it is relevant within the overall structure of the
site
- Page banners can also work with subsidiary navigation - that is the banner has the same name as an item that appears in navigation specific to that section. (See below)
- A 'crumb trail' can be used
eg Home > School Information > Departments > Sport > Tennis
- Colour can be used. For example a different colour background, contrast colour or sidebar in each part of the site. To be really effective the colour change should be reflected in the
navigation
- Graphics can be used, although it is quite difficult to do this successfully.
Navigation Controls
Navigation controls are the main navigation links and allow users to move around the site. Whether they comprise images or text they should be predictably located in the same place, and with the same appearance, on each page.
These have several purposes
- To allow users to move about within the site
- To tell users what information is available at the site
- To work with location indicators to orientate users
Navigation controls can be divided into 3 categories
- Main Navigation: Should appear on ALL pages in the same style and in the same place. Choosing to place it on the left or the top is generally a good idea since this is where people expect to find it.
- Subsidiary Navigation: Navigation specific to the section of the site the page is in.
- Secondary Navigation: Site Map pages, search boxes, drop down lists of pages for quick access etc. These may be on special pages or selected pages only or may appear on all pages.
Links within the page content are NOT navigation; they may be used, and should be, to link to content elsewhere within a site but should not be the main or the only way to reach that content.
What to Include in the Main Navigation Controls
Having broken your content into categories you need a link to each category in the main navigation bar. Some categories will be a single page (eg Home or Enquiries), others will be whole directories of pages (eg School Information). It helps to think of sections with a lot of content as mini sites, each with its own home page to which the main navigation link goes and which can be used to further orientate the user. Each can also have its own subsidiary navigation if it contains multiple pages.
Links to other sites should NEVER appear in the main navigation controls.
Navigation and Location Indicators Working Together
Having subsidiary menus that only appear once a section, or mini site, is entered can successfully combine navigation and location indicators.
One approach is to have a sub menu drop down from the main menu item once that section is entered.
Another approach is to separate the section's navigation from the main navigation, perhaps having the main navigation at the top of the page and section specific navigation at the left, or the main navigation on the left and the section navigation on the right.
Whatever method is chosen it should be used consistently throughout the site.
Secondary Navigation
Secondary navigation is important for at least three reasons.
- If a user gets lost then a drop down box, search function or a site map provides an opportunity for them to quickly reorientate themselves or get back to a familiar
page
- A site map page can provide more detail about what is in each section of the site than a navigation bar
can
- Secondary navigation provides a fast way for users to get to content at a deep level, especially in areas of the site where there is a lot of
content
Most, if not all, sites will benefit from the inclusion of some form of secondary navigation.
However you choose to design your
navigation there are a few general points about the
techniques used and some things you might need to
consider about your users and your overall site design.
We will take a look at a few of these issues in Part two
of this article.
Part
II >>