Brain Food for Web Developers


Website Navigation

Web pages are more than just a collection of pages containing useful information and forms for interaction. They are a network of interrelated nodes that have been structured and organised so that users can find what they are looking for. Since the structure of websites varies so much, users are forced to relearn how to navigate around them. Users frequently have trouble deciding which page within a site to visit next. This decision usually involves an understanding of their current location within the site, and for poorly constructed sites this can be difficult to determine. One possible reason for this could be that developers design the navigation system around the assumption that users will first visit the home page when they enter the site. This is not always true, as users may be linked to any page on the site from a bookmark, url or search engine result.

One method for effectively communicating the site structure is to organise headings and pages in a way that is instinctive and logical to the target audience. This can be accomplished early in the design stage, by carrying out a method known as ‘card sorting’. By asking representative users to sort cards into category piles based on how they think the site should be arranged, designers can gain a better understanding of how users mentally organise the information. This fresh perspective can also be used to come up with suitable menu titles and headings by choosing words and phrases that are familiar to the user.

In his book The Psychology of Everyday Things 1988, Norman describes what he calls ‘the gulf of evaluation’. “The gulf of evaluation is the degree to which the system/artefact provide representations that can be directly perceived and interpreted in terms of the expectations and intentions of the user”. In other words, how well the system communicates the current state and how easy it is to interpret. The gulf is small if the system presents itself in a way that the users’ actions match their expectations of how easy it is to complete their goal. Closing the gulf of evaluation on a website is particularly important because as soon as the user becomes confused it is very easy for them to leave.

Communicating current location in a site can be accomplished through visual cues. According to Nielsen (1999), linking is the most important part of hypertext. He advises that the names of links should be carefully chosen and should supply a short, yet accurate description as to where they lead. For example, link names such as “click here” should be avoided because the name itself does not carry any information about what it links to. Since we know that users scan pages, suitably named links can avoid users having to read the context in which they are placed. In 2004, Nielsen wrote an article outlining some of the guidelines for visualising links. In the article he strongly recommends that visited links and unvisited links should be coloured differently, as this is what users have become accustomed to on web pages. The colour of text for these links should not be used for any other text, as this would make it difficult to distinguish between them. Another cue is a list of words or phrases presented by the side of the screen. This is a common style of navigational column and may also be associated with links. When these cue’s are not provided on a website, users can lose track of which pages they have visited before and can become lost. This is especially true when the websites are ‘deep’, having many levels and sub menus. By conforming to these simple guidelines, designers can improve the ‘learnability’ of a site, one of the factors of good usability.

Designers are confronted with the task of grouping all the information on a website into sizeable chunks. This involves separating the content into individual pages whilst making it easily accessible to the user.

Links and menu need to be careful arranged so that information retrieval is efficient. With a hierarchical website structure, choices need to be made about how deep or how broad the site becomes. The deeper a website structure is, the more sub levels it has. A broader website will be relatively shallow, with a larger number of levels accessible from the root. Miller (1985) learned that human memory is an important factor in a hierarchical structure, with test subjects taking longer to reach a target in a deeper hierarchical structure. Later, Larson and Czerwinski (1998) carried out a study with three different structures (8x8x8, 32×16, 16×32). His findings supported Millers findings. Users completed tasks more quickly with the broadest structure (16×32) and took the longest time with the deepest (8x8x8). However, these experiments are based on the fact that the menus are spread out in a symmetrical fashion. Since it is unlikely that all website will have such a symmetrical structure, this does not accurately reflect real world web pages. Shneiderman et al. (1999) conducted a study which took into consideration not only an asymmetrical hierarchical structure, but also the difference in menu presentation. The two types of menus tested were sequential and expanding indexes. The results reinforced previous research, as time and efficiency of tasks deteriorated with depth. In addition to this, tasks were accomplished faster with sequential menus than those tested with expanding menus.

The implications for designers are that site structures should be broad with most of the nodes within 3 levels of the root. As the site becomes deeper there is more strain on the short-term memory of the user. Especially broad levels can group page links under headings and make use of secondary links within closely related nodes.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.