Being careful with fly-out menus

Posted October 23rd, 2008 by David Hamill

There was a time when I thought fly-out menus were the work of the devil. But I’m a little older now and hopefully a bit wiser too. I’ve seen that they can have some benefits. For example they can certainly help make up for poor 1st level categories.

On one website I tested they definitely made a big difference to a fairly ambiguous top level menu. Participants just quickly hovered their mouse over each section and quickly found the page they were looking for. However I’ve tested others that have been an absolute nightmare.

Delay is very important

If you don’t allow some delay before the menu opens and closes then it will annoy people. Users are often unaware of what their doing with their mouse cursor. Without some delay the menu will fly out when they don’t want it to. Your menu will also have no tolerance for diagonal mouse movement. This can be infuriating. I’ve included a little example below.

The example above shows the ‘Choosing your investments’ sub-category is expanded. If I were to try to select ‘Trading tactics’ I would need to move my mouse horizontally and then down. This is because the sub-category will disappear the instant my mouse moves off ‘Choosing your investments’.

If you think this is frustrating using a desktop mouse you should try it with a laptop mouse pad. It makes your blood boil.

Keyboard accessibility

Of course not everyone uses a mouse. Screen reader users navigate with a keyboard and there are various other pointing devices that people with physical disabilities use. So it’s important to make sure your menu works for them too. You can do this by ensuring that your top level links are in fact links and not just headers for your fly-out links. The subsequent page should then have normal links to the lower level pages, effectively bypassing the fly-out navigation.

Remember when you do this that not everyone using a keyboard to navigate will be using a screen reader. Use a:focus in your CSS to change the visual property of links as they are tabbed through with the keyboard. You can see how this works by tabbing through the links on this site. If you don’t do this it can be difficult to know which link you are on.

Few people will see your top level pages

When you use fly-out navigation your 1st level pages (the ones directly after the home page) will be seen by just a small percentage of your users. So don’t put anything useful there that isn’t provided elsewhere. Here is an example:

The table above helps customers choose the right account for them. The company offers different accounts and some people need some facts about each in order to choose. Unfortunately when the user hovers over the link to this page from the homepage, a sub-menu flies out. The user is then likely to choose one of the options from the sub-menu. So they bypass this helpful table altogether.

Be careful

So as you can see, flyout menus have some benefits. But you need to be careful not to introduce usability issues when you implement them. I’ll add to this post if I remember any other things to consider.

Tags: navigation