Designing Site Navigation

Once you understand the information architecture of your site, you can start to think about how your user is going to navigate their way around the content. There are many different ways of implementing navigation, and which one works best will depend on the amount and type of information that you are presenting.

Design Patterns

The idea of patterns has been a driving force in object oriented program design for a long time now. The basic insight is that that most problems you are likely to face have already been solved several times by others and that the essential aspects of their solutions conform to a particular pattern which can be easily adapted and applied to your case.

The same is true in the design of user interfaces, and significant patterns have been identified and collated that solve common user interaction problems. The following two sites both have large collections of design patterns for user interface design.

UI Patterns: User Interface Design Pattern Library

Welie - Patterns in Interaction Design

For each pattern, there is a description of the problem being solved, along with an example of the technique, and a description of how and when to apply the pattern. Both of these sites also have a comments section which sometimes contain interesting discussion of the technique. Although there is a lot of overlap, the two sites do contain a slightly different catalogue of patterns. You might want to consider what navigation pattern they are using themselves to help you find what you are looking for...

Some Example Patterns

These sites both contain a wide range of types of pattern. For our current purposes we are interested in navigation patterns. Let's think about some common navigation problems, and their pattern-based solutions...

First, an easy problem: where ever the user is on the site, you want them to be able to return to a well defined location. Then, if they should ever feel lost, it is easy for them to get back to a famililar point.

You might be so familiar with this technique from your own use of the web that you may not even think about it any more. The typical solution is to provide a common element on every page, usually called the "home button" that will take the user back to the site's front page. The green house icon at the top right of every page on this site is a good example.

The two sites mentioned above provide the following descriptions of this pattern:

For a second problem, consider the scenario where you have information organized by date, and you want the user to be able to look for a particular date and see what information is relevant. This kind of problem is typical of both events lists and archives of material.

There are perhaps two approaches here. The first would involve presenting the user with a calendar widget that would let them select a date and then the site would present them with the necessary information. This pattern is described here:

An alternative approach would be to give a simple list organized in date order. This pattern is described here:

Consider the pros and cons of these two patterns. Is one better suited to some types of problem than others? Why?

Identifying the Correct Pattern

Once you have designed your information architcture you have a clear idea of how the content of the site is organized. Combining this with knowledge of how a user is likely to want to use the site will allow you to identify the best navigation pattern to apply. There are no hard and fast rules and often there may be more than one possible pattern to consider. Also, experience plays a big part here. However, you probably already have a lot of experience of using the web - what you need to do is learn to organize and apply your experience!

Example Problem: consider designing the navigation for a site with a lot of information which is organized into a clear heirarchical structure. There is not enough space on the web page to show all of the information heirarchy at the same time. Also, it is important that the user always has a clear idea of where in the site they are.

Have a look at the design patterns on the sites and identify one or more patterns that meet the requirements described in the problem above...

My suggested navigation pattern to solve this problem is here...


Navigation that works for one site might not be appropriate for another site. Sometimes, navigation that works for just a section of a site is not appropriate for the whole site.

Overall it is important to have a very broad knowledge of design patterns simply because the more patterns you are familiar with, the more choices you have when you come to design sites for your clients and, therefore, the more likely you are to find a solution that best meets their requirements.

You might want to consider the design of the navigation for this site in the light of what you have learnt about patterns. What improvements might you suggest?

...Return to the Overview