Problems with expanding navigation

Posted December 15th, 2008 by David Hamill

If your site structure is more than a few levels deep, I recommend that you don’t use an expanding navigation menu. This might sound like a bizarre opinion because they are used everywhere on the web. But larger web sites would be better off with a different style of navigation menu in my view.

What is expanding navigation?

When I say expanding navigation, I mean the kind of vertical menu that expands to show new levels of links as the user moves deeper into the site. I don’t mean fly-out menus. In the example below I am on the Golf Lessons page within the Academy section. If I were to choose Golf Breaks, the  Academy section would collapse and the Golf Breaks section would expand.

This type of menu is used throughout the internet and on many intranets too. But it’s not really appropriate for displaying any more than 2 levels of navigation. In this example it’s trying to show 3 levels (did you notice?).

People don’t notice them changing

Few people concentrate religiously on navigation menus as they click through a website. When a new page loads most are attracted to the content area. So they often miss any changes that take place on the menu. As you probably know, web users skim through the page. When they glance back to the menu and see many of the same options, they often don’t realise that a few more options have appeared.

The noise of choice

With an expanding menu, your users need to consider all of the options they may have already discarded every time they make a selection. The more choice you give a person, the more likely they are to make the wrong decision.

If I offer you a choice between golf, tennis, croquet and polo and you choose golf then I can be pretty sure you’re interested in golf. When you ask me which golf courses are available to play, it would be inappropriate for me to include tennis, croquet and polo in my response. This is what the expanding menu is doing. It keeps repeating all of the options you have already decided against.

Lack of emphasis

As you go down the navigation levels of a site with an expanding menu, your immediate options get more and more difficult to notice. This is because the links tend to get smaller on every level. Going back to the example pictured above, when I’m in Golf Lessons the links (there’s actually only one in this example) within this section are the most important. But they’re the hardest to see because they are so small.

So my immediate options are playing second fiddle to the ones that aren’t even relevant.

My suggested alternative

There is a menu style that is slowly increasing in popularity. I don’t know the name of it so I’m just going to call it the immediate options menu.

This menu doesn’t offer cross navigation. Instead it only offers the options contextual to that page (the child pages) and the route back to the homepage.

By doing so it can support many levels of navigation while keeping the immediate options free from visual competition. Let’s have an example.

BBC Sport

Example 1 (below) is from the BBC’s Sport section:

On this menu, I’m not pestered with options for cricket, rugby or football after I’ve chosen golf, . If I decide to read about football then I’ll go back to the Sport Homepage and choose football. Simple.

In this example the grey box provides more emphasis on the new options than the ones that go back up toward the homepage. This is a more appropriate use of emphasis than you’ll find on an expanding menu.

My problem with this example is that the relationship between Golf and Sport Homepage isn’t implicit enough for my liking. It’s not clear enough that golf is a subsection of sport. This point brings me on to the second example of the same idea.

Transport for London

Transport for London (TFL) also use the immediate options menu. Here’s a picture of it:

In this example I’m on the ‘Modifying a vehicle’ page within ‘How to comply’. I like this example because the arrows help explain the relationship between the menu items. However unlike BBC Sport, TFL have not given the immediate options most emphasis. The page background is white so the immediate options just blend into the design. The links back up toward the homepage have the emphasis here.

If I were them, I’d remove the black backgrounds here in favour of white ones with blue borders. I’d make the grey links black with a light blue background. I’d also make the yellow links grey. And if I had Photoshop on this computer, I’d mock it up rather than try to explain it all in text. By doing all these things, the immediate options would stand out better.

The impact for disabled users

Expanding navigation can be a pain for users of screen reading software. They need to listen through the menus in full on ever page just to see if any of the options have changed. With an immediate options menu, they only have to go through a short list of links. This dramatically improves their experience of each page.

However it’s not so good for people who use a joystick to navigate. The availability of cross navigation options is beneficial because each click of the cursor takes quite a bit of effort (depending on their physical disability).

What do you think?

Do you agree with me or do you think that expanding menus are a better option? Post a comment to let me know.

Tags: navigation