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.
Graham Charlton is Editor at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+.
Recommended reports
SEO Best Practice: Conversion efficiency
The SEO Best Practice: Conversion Efficiency Guide is part of Econsultancy's renowned SEO Best Practice Guide and is has been created with the help and frontline insight of globally-esteemed SEO practitioners, in order to give you the edge in your natural search marketing activity.
Alternatively, see our Global Customer Experience & Engagement Statistics or SEO Agencies Buyer’s Guide.
9:49AM on 24th March 2009
Jakob Nielsen's Alertbox, November 12, 2000
'Drop-down menus are often more trouble than they are worth and can be confusing because Web designers use them for several different purposes. Also, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance.'
9:54AM on 24th March 2009
Neat article with helpful reviews and recommendations!
4:16PM on 24th March 2009
Interesting article.
Be good to know if this also holds true to the Sony site; where the drop-down menu is almost a site within a site. Take a look to see what I mean -> http://www.sony.co.uk/section/home
Creative Director at Foliovision
5:50PM on 24th March 2009
This is extremely irritating. We got rid of drop down menus based on Mr. Nielsen's studies and recommendations.
It looks like we need to resurrect them and make them bigger. A pity as our original drop downs were something like the ones he's recommending now.
IT consultant at Zac Craven Ltd
5:44AM on 25th March 2009
My personal feeling is there is no best way with drop downs. A 'huge' drop down allows users to get jobs done quicker, but it limits your options do things like cross-selling.
If you have good reason to encourage the user to window-shop around your site, e.g. in the case of Amazon, eBay, Rakuten etc, then I think minimal complexity in the drop down is better. You want to have a simple drop down to get the user into the target area (e.g. Baby section) then use a great splash screen to introduce the options in Baby area.
If on the other hand most of your visitors are just coming to perform a simple task (e.g. download product manual from Canon's support area) then I would argue a complex drop down is better as it enables the user to get the job done faster.
The Sony dropdown linked above is really fascinating, but I would be surprised if it catches on to become commonplace. It reminds me of <frame> sites!
Senior Digital Marketing Manager at The Black Hole
10:24AM on 25th March 2009
Well summarised Zac - the simple objective of these is to give people the option of deep linking straight into an area from any page on the site, without going through multiple splash pages or being directed through a series of pages (potentially increasing drop-off).
It gives them an idea of the range of product at a glance, allowing one click navigation across the entire site to any area - which can be quite a valuable resource.
I think provided they are clear, well layed out, logically structured and easy to use (unlike the first example) these methods of navigation provide quick and straightforward methods of getting around a site.
12:18PM on 25th March 2009
An interesting article and there is merit for improving the user's ability to search for information, reducing the number of clicks to find what they want, and increase the screen real estate for key content.
However, designers and developers need to carefully think how this will work for those who use the keyboard only to navigate websites, and those who use assistive technologies. It can be rather frustrating to have to listen to a list of over 50 links when you only want to access the third menu item in the top navigation.
7:49PM on 27th March 2009
does anybody still listen to jakob nielsen? this is a guy who has a website like this http://www.useit.com/. i mean, seriously ...
1:14PM on 5th April 2011
I dont think Nielsen is right. For myself i do not want to look in such big list. If the pieces of information on a particular website are not presented in a good fashion (in terms of usability), i dont want to have this information anymore.
Nielsen has pretty much knowledge about usability, but this i a sign of bad usability.
Some experts say (including Nielsen): If you have several items to be presented for the user`s selection, limit the amount of visual items to maximum of 7. Thats what i read a couple of years ago in Nielsen`s "Usabality and Web Design". I am wondering why he is stating just the opposite, as some time went by.
One could say these huge fly-out lists, would better be replaced by full text search. Especially for the use case, that visitors already know the term they are looking for.