rss

Webmastering - Webdesign

They need your help All unanswered messages

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.

Webpage Visual Path

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:

Section Building

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

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.

Tab Navigation

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

Software found in the relevant downloads
Download Firefox 3.0.1Firefox - Mozilla Firefox is a secure web-browser frequently updated and with Hundreds extension, themes, etc. Easily installed,...Category: Browser
License: Open Source
Download Beneton Movie GIF 1.1.2Beneton Movie GIF - Beneton Movie GIF is a free animated GIF editing tool. It is simple, quick, and effective. <h2> </h2> Require : A...Category: Animation
License: Freeware/gratuit
More freeware about « website »