Designing Navigation and Wayfinding Systems

DESIGNING NAVIGATION AND WAYFINDING SYSTEMS
How should the availability and change of information be represented and what is the sequence of its presentation?

GENERAL CONSIDERATIONS

A primary goal of website design is maintaining consistent and understandable interactivity. Perhaps the most common form of interactivity is navigation -- the movement from one location to another, or more precisely, the presentation and representation of available information and the representation of the changing of information. On the surface, navigation would seem to consist of little more than the click of a link button. While on some level this is what happens, it is merely the middle step in a sequence of steps necessary to completing the act of retrieving new information.

To initiate this sequence, a user must know what options are available, and from these options, which one is the correct one to follow. These communication instances are handled in large part through navigation/wayfinding and interface designs. A good navigation system will afford a user with an understanding of both how to move through the site (or access new information), as well as where he or she may be located at a given time.

As mentioned in Designing Layouts, the design of a navigation system should proceed concurrent with the design of layout schemes, to allow the two to influence and shape one another. Certain layout designs may suggest particular kinds of navigation systems over others. Ultimately, you want the layout design and navigation system to integrate seamlessly. Achieving this result will likely require a great deal of interplay between both design activities.

Consider the content in terms of its presentation in time, and the availability of information at any given time (or from any given location).

Is it appropriate to devise a presentation sequence, however rigid or flexible? If so, what is that sequence?

Should the user be able to access information in a free-form fashion?

Is the duration a user will spend in a given location roughly consistent throughout the site (or are the various pieces roughly equal in importance?) or does it vary greatly? If there are marked differences how can visual cues and/or sequential ordering schemes be employed to emphasize or minimize certain sections of your site?

Consider the way the information would be best accessed. Should it be accessed by a menu, list, timeline, set of icons, buttons or image maps? How would each of these alternatives work with your layout scheme?

Consider how the retrieval of information should be conveyed. Do you want to promote the feeling of movement or travelling from one location to another (standard, simple HTML structure)? Or do you wish to convey the sense that information is coming to the user, who is remaining stationary (frames structure)?

Menu considerations:

What is the target display proportion and size (the area the user sees at any given time). Need you abide to a space-conserving, restrictive layout, or is ample screen space available?

Are there many menu options available from a given location or just a few? In other words, are there many general categories of information or just a few (e.g. is a horizontal or vertical arrangement of menu options more appropriate?)?

Are there many subcategories within a given category (e.g. is the structure vertical?) or are there only a few subcategories (e.g. is the structure horizontal?)? If so, how will you represent the structure of those nesting categories and communicate to the user where he or she is within that structure (both globally and relative to other information)?

Is it desirable to jump immediately from one section of the website to another? to all other sections form any particular section?

GENERAL RULES OF THUMB

NOTE: The following guidelines are general principles, which should be applied intelligently and not mechanically. An individual design context may call for solutions contrary to these principles. In these cases it is absolutely acceptable to break a rule of thumb. You should, however, be able to articulate concrete reasons for doing so.

Aim for consistency, or even identity of use. It is important that a user know how to sucessfully navigate a website and retrieve desired information. A consistent navigation system will help achieve this end. In this way, a user will always know (at least implicitly) the kinds of actions to perform or the kinds of objects to look for to satisfy his or her goals in visiting the site.

NOTE: This needn't mean identity of appearance or the elimination of surprise or novelty. New objects, layouts or presentation sequences may be introduced, but the means of use should be kept highly standardized (e.g. it may be appropriate to introduce a novel, complex image-map, so long as the use of image maps (the notion of clicking areas of an image to link to other locations) is understandable.).

To clarify the information relating to a graphic link, combine brief text descriptions with iconographic representations, like the buttons in the Netscape toolbar.

See an example at: Metadesign or Guggenheim

Do not neglect wayfinding in your navigation system. Always be sure your user knows both where he or she is within the website, and how to go elsewhere. Moreover, this how should be easy to achieve. Present location is commonly achieved by somehow enhancing the menu item corresponding to the current section being visited (e.g. one these menu items is doing its own thing ... therefore it must be different, different in the sense that it is active and the others are not.). In emphasizing one item, be careful not to de-emphasize the other items to the point where they disappear into the background and cease to be recognizable as button links. Also think about color coding sections for easy identification.

See an example at: Macromedia or Apple or SGI

If possible, always make your navigation device or menu visible to the user (or it least readily available, e.g. without too much scrolling). To this end, you may consider using a frames structure with an established menu window. This may also eliminate the need to reload the menu when the user follows a menu link.

Minimize the amount of steps between locations.

Minimize the depth of the site. Increased depth means an increased number of steps to reach those levels.

Create direct access paths (or shortcuts) for users to follow only when necessary and keep them to a minimum.

Avoid creating multiple paths to the same location from the same screen, as this may cause confusion about which to choose.

PROTOTYPING TECHNIQUES

The following techniques are suggestions only. Choose a method that best suits your needs and abilities. It is most important that you work in a manner that is comfortable and efficient.

Similar to layout design, for preliminary navigation concepts quickly sketch on paper or in Quark/Pagemaker/Illustrator. Use varying shapes to represent text, menu buttons, icons and other images. Again, try to generate as many concepts and iterations of concepts as possible, and do not invest a lot of time or effort in any one concept.

To test the structure and general use of navigation systems and avoid the time and effort in developing a complete mock-up, use HTML with text objects as place holders (e.g. text hypertext links). Test user comprehension by creating mock-up static images of interaction elements, and avoid spending a lot of time creating images for menus or other navigation devices before you know the concept behind them works well.