Dealing with complex navigation

Paul Boag

One of the biggest challenges faced by website designers is how to deal with a sites main navigation. It is a particular challenge on deep complex sites.

The problem

How many levels of navigation do you build into your website? Its a fairly fundermental question. Almost all sites have at least two. The main sites sections and then the sub sections underneath. But is that enough? Probably not and yet many web designers fail to consider how content deeper in the site is going to be shown. But how deep do you go? Three levels, four?

Case study

Headscape have recently been tendering for some work with a large university in the south of england. They want a complete redesign of their web presence and require a site flexible enough to encompass all of the different organisations and departments that make up the university. They also want a site that is able to expand and change over the coming years. This is particularly challenging when it comes to the navigation. It didnt take us long to realise that a conventional approach to navigation was not going to work. After all the site could easily become more than 6 or 7 levels deep by the time you navigate through faculties, departments, research groups, and individual courses. Ignoring the fact that this would be horribly confusing there simply was not enough space of the page for that amount of navigation! Add to this the fact that some pages deeper within the sites structure also acted as homepages in their own right. For example the International students section would be the landing page for most enquiries from abroad and so it was important that the user quickly grasped where they were in the sites structure and could easily see the sub sections of that part of the site.

Traditionally breadcrumbs have been seen as the answer to helping users establish where they are in a sites hierachy however experience from usability sessions I have run over the years has shown me that the average user does not use breadcrumbs as much as we would hope. In many cases users simply do not notice them and even when they do many do not understand the concept. Also even if we used breadcrumbs to help the user identify where they are in the site structure this did not solve the fundermental problem of the size and depth of the navigation.

One possible solution

In desperate need of inspiration we started looking at other large and complex sites to see how they deal with the problem. Once again the BBC website proved itself head and shoulders above the rest. In particular it was the BBC sports website that caught our attention.

When you arrive on the site the left hand navigation shows a list of all the different sports they cover. Where it gets interesting however is that when you click on "football" it does not expand the menu as you would expect. Instead it replaces the first menu with a new one that shows the parent of "football" (in this case "Sport Homepage") and all of its children. When you click on a sub section of "football" the process is repeated. You see the children of the new section and the parents which now includes both the "Sports Homepage" and "Football". In effect they use a vertical form of breadcrumbs as the sites navigation.

Pros and Cons

The obvious benefit of this is that it can expand forever. It doesnt matter how many pages you add to the site or how deep it gets the navigation will never break. However it also gives the user a much clearer idea of where they are in the site. This would work particularly well on one of the landing pages I mentioned earlier because the user can see where they are in the overall site but be primarily focused on the children of that landing page.

The downside is that the user cannot jump from one sibling to another. In other words they cannot move between pages on the same level without first going back up a level. Although this could be annoying on slower connections I think this is a fair compromise for what is a much more flexible approach to navigation.