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.
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.
Structuring a website consists of building the website's overall architecture by organizing 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 organized 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:
Some elements are found on almost every website:
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:
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:
A breadcrumb trail looks like this:
Home Page > Webmastering > Navigation
A breadcrumb trail includes the following:
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.
Tabs are useful navigation tools that help visitors to make out the sections of a website and easily move from one section to another. Color codes can also be used to reinforce the difference between sections.
Navigation arrows (next, previous, return to chapter, return to home page) are intuitive natigation tools for the user.