you are here: tetridia Home > Resources > Usability

How web navigation really works

The navigation is the component of a Web site that enables the user to easily find her way through the site structure. Its main purpose is to make sure the viewer always knows which page took her to where she is, the location within the structure, where she actually is and where she can go from there. Clear, simple navigation structures and explicit navigation elements can point the user to content on the current or other pages. Missing or unstructured navigation can cause the user to leave the site being disorientated, angry or dissatisfied.
Constant and clear orientation prevents the user getting lost, raises the profile of the site and allows for a high degree of flexibility for co-ordinating within a site. While a well-organised structure is clearly easy to navigate, a user can easily be overburdened by too many options if the navigation is overly extensive.

The following methods can help to prevent too complex structures:

• Aggregation
• Summarisation
• Filtering
• Truncation
• Example-based representation

Talking about navigation and its elements, the designer should not forget the environment in which the user views the page. The user's browser is an important element as it is the component that allows access to the Web and its offerings. The browser's navigation elements such as back and forward buttons, history, bookmarks and default options have been developed based on scientific research and analysis to support the user's orientation. Often, Web designers modify these elements (for example the default colours for links or visited links), making the site harder to use or navigate.
It is important for a designer to accept both design- and usability aspects and merge them in the most efficient way possible.

Within a Web site, different navigation systems are deployed which together allow a flexible and concise orientation.

Hierarchical Navigation

The first level of a Web site is the homepage, which displays an overview about the site's content and navigational elements leading to the different main sections of the site. The deeper the user navigates into the site structure, the more detailed the content is shown (e.g. Homepage of online magazine -> sport -> different disciplines -> detailed information ->…)

Global Navigation

Vertical and lateral navigation allows flexible content-related navigation. Especially on sub-pages it is important to allow easy access to the homepage or other overview pages. A common application of this sort of navigation is in the placement of a hyperlink to the homepage in the upper left corner of the page.

Local Navigation

Local Navigation is often used in complex site structures to support global navigation by linking internal pages.

Ad-hoc Navigation

Enclosing links into the main content of a page that take the user to further information within a site or to external sites, highlights the relationship between content.

Of those link-types listed, the most commonly found and also the most important links are those that are directly included in the page content.

Navigation bars can consist of hyperlinks, images or a combination of both, mostly placed on top or at the bottom of a page. For faster download times and flexibility when modifying the navigation structure, the use of text links is highly recommended.

Pull-down or pop-up menus consume only very little space on a page as they are displayed as a single line. In order to select one of several options, the user has to act first by clicking an item or triggering a rollover event with the mouse, before all options are displayed.

Breadcrumbs are a simple and effective method to visualise the current hierarchical level within the site. (e.g. Home - Recreation - Sports - Snowboarding - Clubs) Except for the current position, the individual levels are linked as shortcuts, allowing quick access to the next higher level.

Sitemaps are additional navigation elements, visually displaying the site's information architecture as an overall view.