Navigation BarsOne of the most important factors influencing website usability is the degree to which a user can see answers to key navigation questions:
- Where am I now?
- Where can I go from here?
- How do I get there?
- How can I get back to where I was before?
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 AidsA 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.|
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 EffectivelyAs 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:
- 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.
- 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.)
- 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.
- 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.
- 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.
- 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.
- 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.
For other suggestions about usability engineering methods, see the