También disponible en Español

Inf@Vis!

The digital magazine of InfoVis.net

Navigating through the Web
by Juan C. Dürsteler [message nº 32]

Navigating inside a web site can be a frustrating experience. Respecting some elementary rules can be very helpful.

One of the first things that we forget is that some of the most important navigation elements aren't in our web, but in the browser. The Back and Forward buttons, the History and the bookmarks stored in the browser and the colours of the visited and non-visited links are common elements to most of the browsers. Corrupting or modifying these navigation standards is much more frequent than it would be desirable.

A typical case: changing the colours of the visited and non-visited links. If the selection is not very obvious and consistent, the user can be confused about which ones are the visited and which ones the non-visited.

As an example, Garden.com. The links to secondary pages have the same grey colour as the rest of the text; they aren't underlined and they change to red only when you hover over them. Once you have visited the links and come back they switch to purple…only to switch back to grey as soon as you click elsewhere on the screen.

In other cases the main page is written in Flash. In these cases the Back button no longer works if you are in this page. You can take a look to Eyetracking.com in order to have this experience. Once in the main page, it doesn't matter how many web sites you visited before; you can click on the back button for ever with one single result, the Flash presentation reinitializes.

Inappropriate use of frames has also the potential effect of creating navigation problems. This occurs especially due to the fact that when bookmarking it isn't clear which of the frame's URL we are storing. In general, frames tend to confuse the user because they subvert the concept of page, which is the base of the current web paradigm, which the Internauts are very used to.

There is much more literature regarding what happens on the other side of the browser, in the field of the navigational elements provided by the web sites. A commendable list of articles on web navigation is the one offered by Usable Web. Jakob Nielsen has also an Alertbox devoted to Navigation: "Is Navigation useful?" . We can also find information on the topic in Webreview using the search engine with the word "navigation" in order to find the list of related articles.

A particularly interesting article due to its clarity is "Seven steps To Easier Web Navigation" by Constance Petersen.

In brief, the basic ideas that this article proposes are

  1. Use standard icons and conventions. Don't oblige the user to learn again how to navigate through your web site.
  2. Avoid irrelevant links. There's no need to link all the pages with all the others. Only do it for a good reason.
  3. Reveal the structure of your web site by means of navigation bars. Do the design of the site thinking as your users do instead as your convenience dictates.
  4. Help your user to know at every moment where in the web site he or she is. Typically this is done with a line containing links to the previous levels which the page is nested to. "For example Home>Computers>Graphic Cards" if you are in the Graphic Cards page
  5. Don't bury information too deeply that require many clicks (more than three) to reach it.
  6. Don't be mysterious. Avoid links that only reveal themselves when you place the mouse over it, changing in shape or content dramatically. Don't oblige your users to play the Memory game "I bet that there is a link to the shopping cart below some of these icons…"
  7. Provide help. A good search engine is a must in big sites.

This advice is just common sense, and its application is not very difficult. Nevertheless, more frequently than it ought to be, the ease of use and navigation is not taken into account for the sake of differentiation and originality. In the next article we'll continue talking about how to build a user hostile web.

Links of this issue:

http://www.garden.com  
http://www.eyetracking.com/  
http://usableweb.com/topics/000689-0-0.html  
http://www.useit.com/alertbox/20000109.html  
http://www.webreview.com/  
http://www.enterprisedev.com/upload/free/features/entdev/2000/04apr00/fe0400/fe0400.asp  
© Copyright InfoVis.net 2000-2014