Drop-down menus; no thanks!

Written by Jamie Freeman

Some websites seem dead set on using drop-down menus for navigation, I really can't understand why they persist when there are clearly so many problems with them.

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 forbid 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 developer 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 known 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 instill 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.

Comments

  • Eddy -

    High-profile:
    http://www.whitehouse.gov/
    http://www.porsche.com/usa/

    You only discuss the bad drop-downs and most problems you describe can be taken care of with jQuery for instance.

  • Jamie Freeman -

    Hi Eddy

    Thanks for your comments. Thanks also for pointing out that some high profile sites do indeed use drop-downs. The White House site is a classic case in point, and the drop-downs display some of the usability problems I refer to in the article including inconsistency in behaviour and tricky mouse-manipulation.

    jQuery is a powerful library and we use it on most projects these days. It does not, however, solve all usability ills - in some ways it just makes it easier for careless designers to create them!

  • rascalpants -

    Jamie,

    I feel like I have read this same article over and over, and the same points are made and in the same way. The problem with your posting is not that is has bad or incorrect information, but that is it misleading.

    You shouldn't condemn a technique or technology based on poor implementation. That is like telling everyone they should use a hammer to build a house instead of a nail gun because some guy shot himself in the foot once. This is the same mentality of people who say to never use Flash because of the "skip intro" phenomenon. Condemn the poor implementation and explore ways to make the technique better.

    So with Drop Downs, I would say this…

    - Avoid the "diagonal issue" by having a mouse out state delayed with a timer
    - For clarity, limit the number of menus to just the top nav and the initial sub section.
    - If your web site has repeated subsections, then you might need to revisit why you have the need for so multiple layers of sub sections. Possibly create an interactive experience or video that provides the information and provides a marketing message as well.

    etc etc etc.

    It is very dated and closed mindset to condemn a technology. Instead, explain how to make it better. I normally disagree with most of what Nielson says, but even He seems to like drop downs now… http://www.useit.com/alertbox/mega-dropdown-menus.html

    I will say that the ones he has pictured do not work properly though.

    One last point…

    Why are you making your users type in all italics in this comment box? You might want to rethink that approach. ;)

    rp

  • Jamie Freeman -

    Hey Rascalplants, thanks for your comments. Not so many thanks for having a pop at me for my 'dated and closed mindset'; a little harsh.

    I still dislike drop-down menus, and I love the fact that the ones Nielsen likes apparently 'don't work'. I'm not sure if that makes him look bad or you for referencing him.

    I do like your general thrust though. I guess that's down to your modern and open mindset, kudos. ;-)

  • MikeD -

    You rant against one HCI issue then introduce another. The underline on comment input boxes looks exactly like an hr tag; otherwise the control is invisible. That's not innovative, it's counterintuitive. I agree with the previous commenter that italics is ugly/difficult to read.

  • Jamie Freeman -

    Hey Mike. Calm down just slightly. I hate it when people counter a perfectly reasonable argument by having a pop at something that person did that wasn't perfect. Why not actually argue with my article?

    I don't think the line underneath our input boxes represents a usability issue on anything like the same scale. I certainly never laid claim to it being innovative.

    As for the italics, yeah, I think we'll change that at some point.

    BTW, Licensed to Ill was a brilliant album.

  • Don -

    Hi Jamie,
    Great article and a timely reminder. I thought we'd seen the last of them but they seem to be creeping back into the subconscious of some clients. Ultimately it comes down to lazy design. Keep flying the flag bro! ;)
    Don

  • Mark -

    These comment boxes are perfectly usable.

    I don't love drop-downs, but sometimes they can be helpful. No more than one level though, I think.

  • Austin Pray -

    Drop-downs are more trouble than they are worth. If I use a drop-down menu I am required to create an attractive index page for each item I use a drop-down for in order for iPhone and javascript free users to be able to use my site. Why not just take the time I would spend fixing a drop-down's usability problems and put it into making a really really nice index page?

Any questions? Please get in touch…

We'd love to talk to you about your web project, e-commerce, EPOS system or bespoke web application.

Message Digital Design Ltd

+44 (0)1273 772247

© Message Digital Design Ltd. 2014