Designing a Navigation System

A website's structure must be the reflection of a strategy. Navigation scenarios must be worked out in order to push users into follow a path on the website.

However, visitors should not feel trapped and should be free to leave or change sections at any time.

Visual Path

Studies have shown that the eye of the average Internet user generally travels over webpages in a "zigzag" pattern, starting at the upper left-hand corner and working its way down to the lower right-hand corner.

The upper-middle area represents a particularly strategic spot for placing information.

Structuring a Website

Structuring a website consists of building the website's overall architecture by organising the different pieces of information.

The first step is to make a list of the website's content and group the content together by theme in order to form sections. This is sometimes called section building.

As soon as the main sections are identified (no more than a dozen main sections should be used), they must be organised and divided into subsections. Most of the time, a website's structure is like the shape of the tree, with the home page at the roots:

Standard Elements

Some elements are found on almost every website:

• The website's logo in the upper left-hand corner. Clicking on this logo leads directly to the website's home page
• A link to the home page is present on every page of the site
• Navigation elements are present on every page so that users can see where they are on the website and easily return to the main section

Elements of Navigation

Elements of navigation are tools that help visitors to know where they are on the website, go back, and move between sections. There are several methods for setting up navigation elements:

• Breadcrumb trail
• Tab navigation
• Site map

Breadcrumb Trail

A breadcrumb trail is a navigation tool made up of a series of hierarchical links. A breadcrumb trail represents the navigation path and allows users to:

• see where they are on the website
• easily return to the main sections

A breadcrumb trail looks like this:
Home Page > Webmastering > Navigation

A breadcrumb trail includes the following:

• Links separated by the character ">", symbolising the idea of hierarchy
• The last link cannot be clicked and appears in bold. This represents the page that the visitor is on

The term "breadcrumb" refers to the Grimm fairytale "Hansel and Gretel", which tells the story of two children lost in a forest who drop pieces of bread behind themselves to be able to find their way back.

The French term for this translates as "Ariadne's string", which refers to Greek mythology. In the myth, Ariadne gives Theseus, her love, a ball of yarn before he runs into the labyrinth to kill the Minotaur. By unwinding it and then winding it up, Theseus is able to get out of the labyrinth.

Tab Navigation

Tabs are useful navigation tools that help visitors to make out the sections of a website and easily move from one section to another. Colour codes can also be used to reinforce the difference between sections.

Site Map

A site plan gives Internet users a global view of a website. In addition, a "you are here" label can help internet users to figure out where they are on a website.

Navigation Arrows

Navigation arrows (next, previous, return to chapter, return to home page) are intuitive natigation tools for the user.

Last update on Thursday October 16, 2008 02:43:14 PM.This document entitled « Webmastering - Webdesign » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the licence, as this note appears clearly.