{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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:

bad drop-down menu

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:

M&S mega 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:

Microsoft mega drop down

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

Published 24 March, 2009 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (8)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Graham Sanders

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.'

about 7 years ago

Avatar-blank-50x50

Ifraz Mughal

Neat article with helpful reviews and recommendations!

about 7 years ago

Alec Kinnear

Alec Kinnear, Creative Director at Foliovision

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.

about 7 years ago

zac craven

zac craven, IT consultant at Zac Craven Ltd

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!

about 7 years ago

Adam Tudor

Adam Tudor, Senior Digital Marketing Manager at The Black Hole

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.

about 7 years ago

Avatar-blank-50x50

Leslie Fountain

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. 

about 7 years ago

Avatar-blank-50x50

Andrew Rogoff

does anybody still listen to jakob nielsen? this is a guy who has a website like this http://www.useit.com/. i mean, seriously ...

about 7 years ago

Avatar-blank-50x50

Joachim

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.

about 5 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.