Navigation Bars

One of the most important factors influencing website usability is the degree to which a user can see answers to key navigation questions: Since each user operates in isolation, the answers must be clearly apparent at all times. This is why navigation mechanisms that provide the user with a sense of "context" have become so important.

Contextual aids are the part of website design that require the most knowledge about target user audiences and usability engineering. This guide presents only a very superficial treatment; the user should consult the recommended references for more information.

Types of Navigation Aids

A navigation bar lays out the structure of the website - or a portion of the site - in a hierarchical, outline form. It is typically located along one side of the webpage or in a box at the top of the webpage's main content area.
Example:This guide provides a hierarchical table of contents at the top of each page. It expands and contracts according to the location of the user in the hierarchy in order to ensure that all topics in the "current section" are visible even if the browser window is quite small.

So-called bread-crumb trails are another contextual aid; they show the path of links that led to the present page, typically in a horizontal row at the top of the page (e.g., Home -> Usability Guide -> Navigation Aids -> Navigation Bars). However, this mechanism only answers the first and last questions, so it is not as effective as a navigation bar.

A site index, like a book index, provides an alphabetical listing of topics areas found on your site. This is a familiar convention for users, but unfortunately it is extremely susceptible to misinterpretation. A user looking for "centrifuge" materials may never see that the entry was structured as "laboratory equipment, centrifuge." A thesaurus is usually required to make a site index effective, but it is quite time-intensive to implement.

The other type of contextual aid, a site map, is a graphical representation of the website's structure. This can be very helpful to you in managing the growth and organization of your site, but it is less likely to be of assistance to users. Graphical representations of complex structures have to rely on cryptic locational names (indeed, site maps often refer to the names of directories and even files) rather than clearly indicating the content that is included in that location. They can be hard to generate and require significant download time. For those reasons, it is not as effective an aid as the more user-oriented navigation bar.

Using the Navigation Bar Effectively

As discussed in the "Dos and Don'ts" at the beginning of this section, the most important thing you can do in developing the navigation bar is to identify the top 10 things that users will want to do on your site. An understanding of user tasks is necessary in order to organize website materials in ways that are easily navigable.

Navigation structure and labels must be selected carefully. This is an art rather than a science, since it's based on common sense and sensitivity to user needs rather than on standard practices and vocabularies. The following process has been effective for a number of website designers in various fields of science and engineering:

  1. Based on your analysis of the 10 top user tasks, create a list of all the functionalities (operations) that your website will have to support for users to accomplish those tasks. For example, if one task is to plan new experiments, the functionalities might include observing how previous experiments were planned, calculating the costs of constructing a model, determining the type and placement of instrumentation, consulting with on-site experts, etc.

  2. Write the functionalities on individual index cards. (Of course, it's also possible to carry out these steps using electronic lists, but it's easier to describe the process in terms of index cards.)

  3. Spread out the cards and begin grouping them into logical categories. Once you think the categories are correct, order the cards within each category. Record the results of your categorization.

  4. Find at least 5 potential users - hopefully representing the diversity of your intended user audience(s) - and have them go through the same exercise. Allow them to modify the names of the functionalities if they choose, or add key functionalities that they think are missing.

  5. Compare the results of all the sortings. If your functionalities are appropriate for the user tasks you identified, some pattern of categorization should be emerging (even though details like precise ordering are likely to vary from one sorting to another). If not, start over again in defining the user tasks and functionalities.

  6. Once the categories arrived at by most users are roughly similar, use them to create an outline of your proposed website structure. Adjust the titles of the functionalities to reflect the users' corrections and modifications.

  7. Show the outlined structure to at least 5 other users, asking them to modify the organization or naming of the functionalities. Repeat the process as needed. You'll know you have a "good solution" when all further changes are trivial.
Repetition of this process as many times as needed to arrive at a solution that most users agree on is tedious, but it will ultimately save you huge amounts of effort in developing the structure of your website and its navigation aids.

For other suggestions about usability engineering methods, see the recommended references.