Introduction

Navigation maps and story boards are are used during the planning and design stages to help the team and client visualise the look and structure of a multimedia (web site) project.

Both can be created in computer drawing programs but are more commonly hand-drawn on paper with pencils and marker pens.

Navigation maps

A navigation map (or nav map) has several definitions ...

A diagrammatical representation of the various screens in a multi-media project together with their links and
connections. This usually takes the form of a number of titled boxes (eg "Home", "Contact", etc), and arrows and lines showing links between them.
A page on a website that has a list of (usually) simple text links to every site page (also sometimes known as a "site map").

nav map structures Nav maps are created during project planning and refined during authoring as unforeseen problems arise.

Creating a nav map is a primary process in making the user interface. The success of a project depends on the end-user experience which in turn is dependent on freedom of choice in navigating around the screens. Users do not like to feel constrained. However, there must be some conceptual flow otherwise the end-user experience will seem aimless.

An interactive version of the final nav map may be included as a clickable "hotspot" screen in the published project, allowing the end-user to view the overall navigational structure and move to any screen immediately.

Structures

There are four recognised pre-eminent navigational structures.

Linear

A user moves through the screens sequentially.

Hierarchical

An end-user moves through the "branches" of a "tree" structure following a logical progression of sub-sections.

Nonlinear

A end-user moves through the screens freely in an order.

Composite

A end-user moves freely but is occasionally constrained to particular linear movement.

Adobe Illustrator Nav Map template (248Kb)

Storyboards

Storyboards are used by multimedia developers to visualise the look and layout of screens. It is common for storyboards to be created for each screen before authoring commences. Designers will often create 3 different designs for their clients to chose from following the first meeting with them.

It is important that a project has both consistency in its navigational framework and that different sections are identifiable in some way. This may involve making some elements consistent between screens (such as typography, navigational devices and headlines) whilst making dramatic content changes in media (images etc) between screens.

Here are some things to consider ...

A user must always know they are in the same project, create a familiar and consistent environment.
Your navigation devices should be placed in the same location on every screen.
Elements should be laid out consistently, perhaps by using a grid.
Margins and columns should be consistent.
Make typography consitent.
Text styling should be consistent (by use of a style sheet).
Colour should be consistent.
etc