Web Usability Guide: Navigation

Related Articles

In order to simplify navigation, the number of links should be minimized. According to Miller (1956), "The span of absolute judgment and the span of immediate memory impose severe limitations on the amount of information that we are able to receive, process, and remember." The number of buttons or options therefore, for these two forms of navigation should be kept below seven. (Robinson, E. as cited by Kerr, M., 2001).

This figure is supported by the findings of Miller who stated: "There is a clear and definite limit to the accuracy with which we can identify absolutely the magnitude of a unidimensional stimulus variable." Miller calls this limit the "span of absolute judgment", and maintains that "for unidimensional judgments this span is usually somewhere in the neighborhood of seven."

One website to follow this rule is Minimalistic, illustrated in figure 8.0a. This site uses six main navigation links on its homepage. It utilizes white space to simplify the design, ensuring the page stays uncluttered and the links are prominent.

Fig 8.0a Minimalistic keeps its main navigation below Miller's "magical number seven".

The margins of a page define the reading area and provide sharp contrast with the text and white space used on the page. They help to ensure text and navigation are kept separate. It is conventional to place global (site-wide) navigation links at the top of the page, underneath the main header; sectional navigation down the left-hand margin and allow the prose to reside within the main block to the right of the side margin.

With regard to clear navigation, the left-hand margin has particular importance. Because the majority of languages are read from left to right, our eyes naturally fall to the left hand side of the page and because HTML allows the right-hand side of the page to wrap if column and table widths are not specified, the left hand margin is more consistent in size than the right. (Kerr, M. 2001). The "Yellow Fever" design style for the left-hand navigation was introduced by CNET in 1996 and has spread to so many sites that it has become a fairly strong convention (Nielsen, 1999). Adhering to convention is something that Nielsen advocates strongly. However from a designer's point of view, challenging convention is the root of innovation and innovation is what has driven the Web forward. Although it has become convention to place navigation down the left-hand side of the page, users could just as easily point to links from the right-hand side.

Pointing operations have been the object of a moderate amount of Fitts' law research (MacKenzie, 1991). Fitts' law can be used to describe a general rule when applied to the Web. Essentially, when a user moves the mouse pointer, certain characteristics of objects on the screen make them easy or hard to click on. The smaller the icon is, the harder it will be to click on and the greater the distance between the icon and the user's mouse pointer, the more effort it will take to get to. Therefore, placing the navigation links to the right, where the scroll bar is located, would speed up human-computer interactions.

Another argument in favour of the right-alignment of the navigation bar is that "users always look at the content first" (Nielsen, 1999) so for cultures that read from left to right, it would be more practical to structure Web pages this way. Nielsen, 1999 estimated that a right-handed navigation system would have improved usability by 1 per cent. However, such a radical change would "almost certainly impose a much bigger cost in terms of confusion and reduced ability to navigate smoothly."

But is it too late to challenge convention? Nielsen states: "Anything that is a convention and used on the majority of other sites will be burned into the user's brains and you can only deviate from it on pain of major usability problems". The blue link was the only kind of link for many years but that didn't stop the widespread adoption of image rollovers once the main browsers supported JavaScript. .net magazine like many other sites uses JavaScript rollover effects for the main navigation on its site. This has now become a convention.

The use of image icons as links is as much a part of a design feature as non-linking images. They provide websites with metaphorical meanings, making comparisons and analogies between the virtual world and the real world, allowing users to construct a more accurate mental model of what to expect from the hypertext. "Work in this field supports the idea that metaphors in general, and the travel metaphor in particular, are extremely powerful aids to navigation around complex data structures such as hypertext systems." (McAleese, 1999).

There is an old maxim that "a picture paints a thousand words" and this holds just as true on the Web as anywhere else. One example of a metaphorical link is the ubiquitous "shopping cart". When users see this icon, they know instantly what it represents. Browser interfaces are covered with icons such as the stamp and postmark metaphor (figure 8.0b) used by i-mail to represent its e-mail service.

Fig 8.0b An example of the use of metaphors on the Web

When talking about traversing the Internet, we have subconsciously used the travel analogy to describe the operations performed. One talks about surfing, jumping and navigating the information highway. Yet when one travels by car, simple road signs are all that are needed to indicate to drivers what lies ahead. They are easier to visualize and transfer as much meaning as many words. The same is true for the Web.

The fundamental difference to consider when writing for the Web is that content isn't merely text but hypertext. Traditional text is sequential; it is read in a single linear sequence. Hypertext is non-sequential; there are no rules that determine in which order it is to be read. Veen (1997), along others is of the opinion that if one isn't careful, a website can become a "dizzying mishmash of options". Because hyperlinks are coloured differently (though technically they don't have to be) from their surrounding text, they stand out as focal points on screen. This can be distracting and can draw the reader's attention away from the meaning of the content.

It could be argued that scattering hyperlinks around prose on the Web is exactly what was intended at conception. Personally, I don't have a problem with seeing blue links embedded in a length of prose, as I perceive it as utilizing the capabilities of the electronic medium. Also it is rare that I would read an article of such length as to become distracted by links because as stated previously, reading from screen is tiring on the eyes. Nielsen advises that web content should be as short as possible if it is to be read from a website.

For lengthy articles, I would consider creating them in Portable Document Format (PDF), then printing them out. This format was proposed as the alternative format to HTML and has the advantage that it has the capabilities to render text and graphics more precisely than HTML, similar to paper-based publications but has the disadvantage of larger file size.

One technique to be adopted that purports to overcome the distracting effect introduced by placing coloured hyperlinks within text is illustrated in figure 8.0c. Links and main content are separated; all links are placed in a left-hand column, leaving uninterrupted prose to reside within a wider right-hand column. The idea is that the reader can "fall into a rhythm" as they read, allowing the "words and phrases to flow together" as their eyes move through a paragraph, undistracted by links that stand out (Veen, 1997). Although fine in theory, the technique is betrayed on commercial sites that include highly distracting animated GIF advertisements.

I like the aesthetic effect that the separated link technique provides but it does introduce a new problem, which is that placing all the content links down the left-hand side uses the space where global navigation links are conventionally positioned.

Fig 8.0c Distracting hyperlinks are extracted from the main body of the text and placed in a separate left-hand column.

Publication Date: Monday 14th July, 2003
Author: Ukwdc View profile

Related Articles