Drop-down menus; no thanks!
Some websites seem dead set on using drop-down menus for navigation, but I see so many problems with them I really can't understand why they persist. In this article I list out the main reasons I find them problematic and why I would always advise against their use.
They're hard to use
I'm about as computer-literate as you get. I've been using computers for graphic design since 1988, and running the Message website design company since 1995. So I can use a mouse, okay? But even I still come across the odd drop-down menu that I find tricky to use.
There are several reasons for this. Sometimes the 'target' area is too fiddly and small. Other times you're just not expecting the drop-down behaviour and it comes as a surprise. My least favourite reason is when some items in the menu have drop-downs, but others don't... talk about setting doubt in the user's mind!
Now, swap me out and put a 'silver surfer' or a disabled user in my place, and those problems that I can deal with without too much trouble suddenly turn into major - or even insurmountable - hurdles.
They're not scaleable
Even a relatively simple website could have many sub-levels, quickly rendering a drop-down menu system totally unusable. These are possibly the worst kind. You're on the last item in the first level, and a menu pops out to the side. You move across to it, but your mouse slips a single pixel outside the 'hit' area and the whole things suddenly disappears and you have to start over. Again. And again.
They're not accessible
Okay, okay, calm down! Many people claim to have come up with the perfect accessible drop-down menu solution. While there are certainly levels of badness amongst drop-downs I wouldn't say any of them were actually good from an accessibility point of view.
You can make them standards-compliant, sure. But consider the sheer quantity of information in a drop-down menu; say seven menu headings, each with five to ten items. Heaven forfend they should have sub-sections too... you could easily be looking at 50, 60, 70 or more 'menu' items.
What does a screen-reader make of that? Well, you could put in a 'skip navigation' link so the user doesn't have to hear it read out on every single page. But what if they want to actually use the menu? If the thing they want is at the bottom of menu heading number seven they have no choice but to listen to the whole darn list. Not great.
But Mac and Windows use drop downs?
They do, but they're operating systems. They can be totally standardised in appearance, functionality, behaviour, look and feel. They can also build in accessibility features such as keyboard alternatives. Web-based drop-down menus can behave, look, feel (and yes, sometimes smell) different, which means users have to figure each one out individually.
You'll notice, too, that those menus at the top of your OS window are not generally for navigating but for performing actions, which is quite a different thing.
Mis-information architecture
Such systems are often implemented because of a fundamental mis-understanding of information architecture and how to apply it to web projects. Good planning at this early stage can ensure that all your content is easy to find; it doesn't have to be exposed in a drop-down menu.
These menus can also lead site owners to mistakenly put content in places it doesn't belong, in order to 'expose' it to users. Rather than put items in sub-sections that make sense from an IA standpoint, everything is kept at the same level, simply so it will show up in the drop-down.
Worse still are those examples where the menu is not even representative of the actual site structure. This leads to confusion when the user realises they're actually somewhere different to where they were told they were going.
What would the BBC do?
I think it's reasonable to take a lead from those websites that we know have spent large amounts of time and money looking at usability issues. The BBC, Amazon, eBay, Google, Apple, YouTube, Yahoo!, Blogger... I can't think of a single high-profile site that uses drop-down menus*. Not even the usability nightmare that is MySpace. Why do you think that is? It's not because they don't have the technical know-how, that's for sure. I think the reason is that their usability tests tell them not to. Who are we to know better?
When I asked my friend and leading usable web dveloper Jeremy Keith for two words to describe drop-down menus he replied... well, I can't publish either of the words he used.
*Actually, I just remembered one high-profile site that does; Adobe.com. But at time of writing it's still an awful, flickery experience for the majority of Mac/Safari users. And, by the way, it has over 70 'menu' items.
Clunk-click!
There used to be an obsession with reducing the number of 'clicks' a user had to make to get from A to B. (The fact that they actually wanted to go to 'C' was often overlooked.) These days we understand that two easy clicks are better than one intellectually and physically challenging click.
A drop-down menu system that includes sub-sections (and even sub-sub-sections) might well be able to expose the entirety of your website structure to your users, allowing them to travel from any point to any other point with a single click. But so what, is two clicks really that hard? The answer, for the majority of users, is 'no'.
Remind me; what were they for again?
What were drop-down menus for in the first place? Back in the late 90's we were all creating drop-down menus every chance we got. Mostly this was simply because we could suddenly do it, with the advent of 'dynamic' HTML. The rationale was that it enabled people to see the contents of the whole website from wherever they were. Okay... but what if you have sub-sections? No problem; just stick in some little pop-out sub-menus! Things got ugly very quickly on all but the smallest sites.
A more considered approach
Rather than literally show everything that resides in a section with drop-down menus, a better approach is simply to make those menu headings clear and explanatory. The user knows enough about what to expect within that section without having to see it all up-front.
For example, what would you expect to find in a section called 'Products'? Maybe some products? That's right! A menu heading called 'Solutions' just wouldn't do in that example as it leaves too much up to the user's interpretation. Users don't need to see every detail of the section they're heading into; they just need to be made aware of the kind of content they're going to find there, with no nasty surprises. They're not children! Well, apart from the children, of course.
Dude, where's my section content?
Well, in our world, clicking a menu heading takes you to an index page for the section. (This page can itself contain content of course, but it also does the job of orientating users to their new location.) We then use a sub-menu to list the content within that section. Including further sub-sections. (That's another plus-point; this method is totally scaleable.)
Other navigation aids
To further orientate the user we find that a breadcrumb trail (also know as a cookie trail) is a great way to show the current location within the site structure. Because these reflect the users actual location, they instil confidence in the site, and also offer a convenient way of stepping back through the sections above.
Site Maps are another great help. If you really want to expose your entire site to the user give them a (standards-compliant, accessible) site map - like this one - not a clunky drop-down menu!
The last word
If you want an accessible website that is usable by the widest possible range of people, is expandable, logical, and reflects the best practice of the world's leading web developers then what you don't want is drop-down menus.
