While regular drop-down menus on websites can be bad from a user experience perspective, bigger versions can improve usability by overcoming the drawbacks and allowing users to see all the options at once without scrolling.
Usability guru Jakob Nielsen makes this point in his latest Alertbox post, recommending the use of such menus to improve the user experience, as well as providing some tips on making ‘mega drop-downs’ more user friendly. I’ve been looking at a few examples of drop-down menus…
One of the biggest problems with standard drop-downs is that they can make users work too hard to find what they are looking for. This is especially true of menus that users have to scroll within, especially when there are a lot of options to go through.
In this example from Sportsdirect, users looking to scroll down through the list of brands using the bar on the right could easily miss and click away from the menu, while the list is far too long, and the menu pops out and obscures much of the page behind:
This can be awkward to achieve, particularly when menus are small, and clicking outside the area by mistake puts you right back to square one, making it a source of frustration for web users,
According to Nielsen, while these sort of drop-downs perform poorly in user testing, ‘mega drop-downs’ do much better and can improve usability if executed well. They also have the added benefit of tidying up the page and leaving more room for other content, product promotion etc.
Looking through a few UK e-commerce sites, it seems that fewer and fewer are now using drop downs for navigation, and those that are doing so are relatively usable.
I found a couple of examples of large drop-downs, so how well do they work?
On the M&S website, the majority of its links (60+) are contained within one huge drop-down menu:
All the links are available to click without having to do any scrolling at all, though more could be made, through use of colour for instance, to make links stand out more. Also, without careful control, users could easily move the cursor away from the menu and have to start over again.
The Mamas and Papas drop-downs have a similar problem, the links are clear, but it is still easy to lose the menu if you aren’t careful enough with the cursor:
One website which has mega drop-downs but solves this usability issue is Microsoft’s UK site. Some of the navigation options have huge menus with 50 links or more, but the potential for frustration is reduced:
If you move the cursor outside of the menu area, it doesn’t instantly disappear, but instead users are given a second or two to return to the menu before it vanishes; an elegant solution to the problem and one which removes a potential source of frustration for web users.