Build Navigation

Arriving at the best design for your navigation system can be quite a complex process, requiring a lot of trial and error. You also need to communicate your design to the web development team and the client, to ensure all stakeholders agree with the final design. The technique described below is one strategy for designing, documenting and ultimately building a navigation system.

The design of the navigation system should begin with an analysis of the business requirements of the website. The design process needs to be informed by answers to the following questions:

• What is the purpose of the website?
• What information will users want to find on the website?
• What is the most likely scenario that users would follow to perform common tasks?

These questions were explored in previous resources. Once you understand the requirements of the website you can make decisions regarding the most appropriate navigation structure to be used on the website. To explore different navigation systems you can employ the use of mock-ups, navigation maps, prototypes and finally scenarios.

Mock-ups

A mock-up provides stakeholders with a visual representation of key web pages. A mock-up should show the layout of graphics and text and what the menu or navigation system will look like. It can be created on paper, using a graphics program such as Adobe Photoshop or created directly as an HTML page. The example below is of a mock-up for the website you are viewing. It was created using Dreamweaver and shows page layout and the major navigational elements.

A mock-up can be created on paper or using a graphics program. The graphic below shows a mock-up created using a graphics program. It shows the basic layout of a web page. For example where the different elements such as multimedia and content are to be placed on the page.

A Navigation Map

A navigation map is similar to the site map described in the resource Identify Content Needs. It shows the hierarchical structure of the website, but it includes information regarding how users can navigate from one page to another. One technique for representing this information is to use arrows (like a flow chart) to illustrate which pages a user can access from a given location in a website. This can become quite complex and it may be necessary to simplify the diagram or break the diagram into sections.

The example below shows a simple navigation map used in the design of a website.

Prototypes

A prototype is a model of a system and it is used to test a proposed design. The Information Architect may choose to create a horizontal or a vertical prototype. A horizontal prototype will develop the first few levels of the website in reasonable detail. A vertical prototype will take one or more key areas and develop these to much lower levels of the site hierarchy.

A prototype can be computer-based or paper-based. Paper-based prototypes can be quickly developed allowing for fast feedback from clients. Site maps, mock-ups and navigation maps all form the basis of a paper-based prototype. A computer-based prototype implements a segment of the system, enough to demonstrate how the site will look and function.

To build a computer-based prototype of the navigation system, you would implement the logical component of the menu and link it to a few pages. You would not attempt to implement the full system.

Scenarios

Once a navigation structure has been designed, it is a good idea to test the design by developing a scenario. A scenario is a story describing a user's experience as they navigate the website, providing a more user focussed exploration of the proposed navigation structure. In developing a scenario, you should select a type of user who is likely to be representative of the people using the site. For example a scenario for a student visiting the Adelaide University website shown earlier, could be:

This is a simple example only. In reality the scenario would be more complex, describing a more complete interaction, as the user navigates into the deeper levels of the website. The scenario is a useful technique for communicating the website design with your client. It allows the client to visualise how the site will function and can help in gaining approval for the design and sign-off.

For further information read Gerry Gaffney's article on scenarios (PDF - 10KB) .

^ top