1

Designing your sites navigation

by Martijn van Welie When you are designing a website, one of the most important things to design is the sites navigation. The sites navigation is the main way to make the information accessible for your users. The navigation helps users to go through the information structure of the site and tells them where they are and where they can go. Since most sites are primarily hierarchical, the navigation helps the users go up and down that hierarchy or navigating on the same level. Nonetheless, adding cross-links to the hierarchy can help to make relevant information available when it is needed, even if it is placed in another branch of the hierarchy. The sites main navigation is almost never the only way to access the information. Sitemaps, indices, and search functions also allow users to reach the information. The purpose of the site navigation is to communicate to the users what can be found on the site and how it is organized. Moreover, the organization is at least partially visible while the users are going through your site. This gives feedback to the users about where they are in the site. Especially, these last two issues distinguish the main navigation structure from sitemaps or indices. There are several ways to design the main navigation and this article will discuss common solutions for doing site navigation. Before doing so, it is important to realize that navigation is very much related to the information structure. The navigation scheme guides the users through the information structure. Aspects such as the number of items on each levels and whether or not each level has content, influence the decision which navigation scheme is most appropriate for your site. Youll most likely design your information structure and your navigation more or less at the same time. Lets look at several ways to do your sites navigation.

Top Navigation
One of the most basic forms of navigation is to have a horizontal menu at the top of all pages. Top navigation usually consists of a horizontal bar with several clickable items placed at the top of the

2
page. The navigation stays unchanged when browsing through the site and it is present on every page. The currently selected item is usually highlighted is some way: by making the text label bold or by changing the back- and foreground colors. If the information structure has several levels, consecutive levels can be placed underneath the previous level, showing the cascading path down the hierarchy. If you have 2 levels you get what is also known as a Double Tab, see Figure 1.

Figure 1 A double tab as used in Apple's web site

In relation to the information structure, it is important to realize that top navigation has some important limitations: - The maximum number of items is 6 to 8 items depending on the average word length, the font size and browser size you are designing for. If you expect the number of items to grow over time, keep in mind that you cannot expand very much. If you really have to, you have to re-organize the information structure so that it fits again. However, this might be conflicting in your intention to provide a goal-optimized information structure. The number of levels that you can show is limited to 2 or 3. Since each level is placed underneath the previous level, a lot of vertical space is used that pushes down the content area. So if you envision 3 levels, you need to reserve vertical white space for the navigation to expand.

Another important aspect to notice is that all items of the first

Figure 2 A double tab with breadcrumb at Adobe

3
level are always visible while only one set of the level 2 items is visible. When a third level is added great care should be taken that the navigation remains visually clear and appealing. A common addition when 3 or 4 levels are used, is to include a bread crumb to show where the user is in the information structure, see Figure 2. However, the bottom line is that you should think about using a more elaborate navigation scheme when you need to show 3 or 4 levels. An important issue in any navigation scheme is whether or not you have content on each level of your information structure. If there is no content on each sub level, the content area is usually used to show the items of the next level. Once a selection is made, a breadcrumb is updated or a just the page title. This trick can be used in basically any navigation scheme. See Figure 3. One of the main advantages of top navigation is the fact it does not Figure 3 Placing navigation in the content area consume vertical space and thereby maximizes the width of the content area. Often the content area itself is split up in a main content area and a column with related information. This is even recommendable since text is more readable top navigation when the column is not too wide, leaving space for the second column. An often seen feature when using top navigation is to repeat the top navigation at the bottom of the page. This way, users do not have to scroll up again to get to the navigation. The only other way to keep the navigation at hand while scrolling is to use frames, layers or Flash. However, using these techniques have

related stuff main content

4
many known issues as well and should generally be avoided as much as possible. A variation is to use to the top links on the bottom of the page.

Left Navigation
An other often used navigation scheme is to used left navigation, sometimes also called vertical navigation. When left navigation is used, the page is split in at least 2 columns where the left column is used to place the navigation. Several forms are often used: (A) showing only level 1, (B) showing level 1 and expanding level 2 when selected, and (C) showing level 2 grouped by a non-clickable level 1 heading.
Level Level Level Level Level Level 1 1 1 1 1 1 item item item item item item Level 1 item Level 1 item Level 2 item Level 2 item Level 2 item Level 1 item Level 1 item (B) Level Level Level Level 1 label 2 item 2 item 2 item

Level 1 label Level 2 item Level 2 item (C)

(A)

If type A is used subsequent levels must be shown in an additional way, for example using a bread crumb or in combination with top navigation. Type B shows the second level although only one level 2 section is shown at one time. A variation on type B is the use of popup menus to display level 2 items. Type C is the only one that shows all level 1 and level 2 items at the same time. See Figure 4.

Figure 4 An example of type C left navigation

5
Left navigation has two main disadvantages: - Depending on the type, navigation items are pushed down the page, which leads to more scrolling. This may cause several level 1 items to become invisible unless scrolling is used. - When an item under the fold is selected, the highlighted item is not visible because it is under the fold. This situation requires other means of telling the user what the current selection is. The advantages of left navigation are stemming from the fact that the navigation is vertical. First of all, it scales well because as many items can be added as is desirable, limited by the fold of course; the page will just get longer. Second, the content can be placed at the top of the page, whereas top navigation pushes down the content.
heading

Item 1 item 2 item 3 heading Item 1

item 1 item 2 item 3

Item 1

A minor issue concerns headings in the content. In left navigation the headings can be placed at the top of the content area which is also the top of the page. In top navigation, the heading will have to be placed underneath the navigation itself. It often looks visually less appealing because the same words appear directly on top of each other. This becomes worse when 2 or more levels are shown in the top navigation

Top-Left Navigation
Neither top nor left navigation solves all practical needs, especially dealing with levels 3 and 4 in the information structure. Usually it is more attractive to use a combination of top and left navigation. Top navigation can be used for the level 1 items while left navigation is used for level 2 and 3 items. See Figure 5.

Figure 5 Top navigation combined with left navigation

In this case, levels 2 and 3 are shown that belong to one of the level 1 items. This may not work for you. When you want to emphasize level 2 items as well, you could use top navigation for the first two levels and then use left navigation for the subsequent levels. It is also possible to use left navigation for the first level and then proceed with top navigation, although this is rarely used. Starting with top navigation is often a better choice; typically the number of items of the first level is small while it usually expands on lower levels. What is essential for a top-left navigation, is the type of left navigation. Considering the limitations of left navigation it may

7
still be problematic to show enough items. If so, consider a more rigorous approach such as split navigation. For level 4 navigation, the variations that are possible for either top or left navigation can also be applied in top-left navigation. Top-left navigation is one of the more flexible navigation schemes and is hence also useful if a site has sub-sites. The top navigation can be used to access the independent sub-sites while each sub-site uses left navigation locally.

Bread crumb navigation

Taking a different perspective than whether to use top or left navigation or a combination, there is a special navigation scheme that takes the breadcrumb to the max. In this scheme, the breadcrumb is the main navigation! The trick is to disguise it as a navigation scheme. For example, Figures 6 & 7 show sites that use a breadcrumb navigation.

Figure 6 Ferrari's breadcrumb navigation

The essential behavior in breadcrumb navigation is like drilling down into the information structure. You start at level 1, when you have made a selection you see the level 2 items belonging to your selection, and so forth. The list of selections forms a breadcrumb, either horizontal or vertical. The big downside of this scheme is the fact that only the items on the lowest chosen level are shown; all the other ones are invisible except the selected items. The main advantage however is that it scales quite well. The examples show that accommodating 6 levels is not a
Figure 7 Argus breadcrumb navigation

8
problem at all. Although this might seem very attractive, ask yourself if your information structure really needs to have so many levels!

Split Navigation
When sites get really big even a combination of top and left navigation will not work for several reasons. In such cases, split navigation could work. With split navigation, navigating the first levels is separated from navigating the remaining levels. There is a concept for the first, say 2 to 3, levels and another concept for the remaining levels. Figure 8 shows an example where first top navigation is used but as soon as the users arrive at a product page, a new navigation scheme is used based on a left navigation.

Figure 8 Split navigation for the products section

In this example, the users start at the home page and via the products section and a filter for web design, they arrive at a particular product. There a new context is set using the product as the new base. The top navigation can be forgotten and the users only need to use the left navigation. It is like being on a site within a site.

Another possibility it is to start with a Yahoo style page first, followed by a left navigation page. This solution provides much overview of the first 2 levels and then continues with a different concept for levels 3 and 4. Split navigation has the advantage that spreading it over several concepts reduces the complexity of the navigation. It makes use of localities: the first base is the home page, and then there is the product base etc.

Matrix Navigation
In complex web sites youll find that some pages can fit in more than one place in the information structure. For example, the page with drivers for your favorite printer can belong to the products section containing the page with your printer, but it could also be found under support in the section drivers. Both options are logical, probably without a strong user preference. What happens often in such circumstances is that the site gets a kind of 2 dimensional matrix design. Pages will become accessible from different paths down the hierarchy. In practice, this may even get worse with more than 2 dimensions. Ideally, the user does not notice that same information is present in several places; a professional content management system will help to achieve this. More often, the page only exists once and has a fixed place but is accessible through cross-links. When users follow the cross link, they get transferred to the other branch of

10
the hierarchy. So following a cross link in products for a driver will lead to being transferred to drivers in the support section. Basically, the options are to (A) dont change the context and present the content in the same context or to (B) always show the content in the same context and hence switch when needed. Although you may think you have a multi dimensional matrix, you should reconsider your situation. Users may very well prefer one or two dimensions while the other possibilities are not appealing to users. In that case, your structure can be simplified.

Horizontal navigation
Now that several navigation schemes for vertical navigation have been discussed, it is time to look at horizontal navigation. When will you see horizontal navigation? Sometimes a page is actually very long and it does not make sense to structure it hierarchically. So you split is up in several pages, e.g. when putting articles on the web. Another case is when you are designing a guided tour. Basically, the main navigation elements are the next or previous links supplemented with the possibility to go to a specific page directly. The navigation is placed above and below the content so it can always be reached. This mechanism is also called paging. Figure 9 shows an example where paging is used to browse search results.

Figure 9 Browsing search results

Another case where breaking up a large amount of information is often useful, is when a complex task needs to be broken up. This is then called a wizard. A wizard consists of pages for each subtask of a larger task. For example, at Amazon or any other

11
shopping site, the checkout procedure is actually a wizard. The whole task is split up in specifying personal information, shipping info, payment method and confirmation. In addition to the basic paging mechanism, the wizard adds an overview of the tasks to be completed while each task can be dependent on the input in the previous task. Moreover, in a wizard tasks are paged not lists of items of the same kind.

Navigating to other elements

Even though a web site is mainly hierarchical there are always elements that stand outside the hierarchy. For example, meta navigation is available on every page. It typically includes links to things like about, sitemap, and help. These elements do not have a fixed place in the hierarchy and require their own navigation solutions. Another important location is the home page. Usually, a site has a logo that links to the home page so that users can always find their way back to a safe starting point. Home can also be part of the main navigation if space permits it, see Figure 1.

Summary
It hardly needs saying but navigation is very important for your web site. We have shown many kinds of different navigation schemes that are commonly used. Each of them has its pros and cons and there is no winner. The answer to your question which one do I need is essentially still it depends. Look at your information structure and the main purpose/idea of the web site and then select which navigation scheme will get you what you want. Then apply it smartly..

Suggestions or comments? Mail the author at martijn@acm.org