Drop-down menus seem like an obvious solution to website design clutter. By grouping various items under a parent, fewer options are on display – visibly cleaning up a design.

But this comes at a cost and isn’t always the right answer to a design problem.

We’re all used to drop-down menus – after all, it’s how pretty much all computer applications work.

People use applications to accomplish a task or series of tasks. These are sometimes complex or, at the very least, multi-stepped. There’s a real need to get the job done so there’s an emotional or professional investment in finding the features needed to accomplish it. Or, it might be something you do frequently – such as writing letters, mailers and so on.

To be able to be ‘all things to all people’ applications simply have to use drop-down menus to provide a means for people to discover every feature. (Although Microsoft uses the Ribbon a lot, it takes up more space and displays fewer items.)

But a website is not an application – the same usability rules do not apply.

When people visit a website, they visually scan the page. Within a fraction of a second, they decide if the website has what they’re looking for. If they don’t see it – they leave. If you’re in any doubt about this, just check out your website’s bounce rates, using Google Analytics. It’s common for websites to have bounce rates of 50% or higher, with people leaving half a second or less after they arrived.

Here, the biggest flaw of the drop-down menu is in evidence. A person has to click on it (or hover over it) to see the hidden options. A vast number of people simply don’t. They scan the page, then leave.

They are simply not invested enough in your website to learn about it. There isn’t the same need or payback that you’d experience with a computer application.

There are other drawbacks too. If the menus work using a mouse-over, then they may not work on tablets or mobiles. Even if they do work, they may be very fiddly to use. After all, the desktop computer paradigm from which drop-down menus were born is a world (and a few decades) away from many of today’s devices.

There’s also the fallacy that drop-down menus offer superior usability because they ‘require fewer clicks to find something’. This is often nonsense. To click on a menu, see a drop-down, then click on an item takes exactly the same number of clicks as clicking on a menu, seeing the options on another page, then clicking again. Indeed, with the latter there is the benefit of a greater range of design elements to make the various options more clearly delineated.

There’s also the question of why drop-down menus should be implemented. Sometimes they are needed; more of that shortly. But sometimes they’re implemented because the designer is lazy – too lazy to draft a coherent menu structure that works at a glance. Sometimes the client demands drop-downs without having a clear rationale. Sometimes it seems that drop-downs will provide a solution when the opposite is true – “people can find every page, just by hovering over the menu”-er, no, most won’t. They can’t be bothered.

So, when should drop-down menus be used?

There’s a solid case when your website is really an online application with lots of features. But even here, it’s worth noting that many of the world’s most successful online applications don’t take this approach.

If your site is genuinely vast, then drop-downs can indeed be helpful. But, the groupings beneath each of the top-line menu options do need to make logical sense and be utterly intuitive, so that people understand what ‘might’ be beneath each one.

It can also help where a site is revisited by a known audience – perhaps a vast product catalogue of a specialist supplier. You’ll notice that Amazon has implemented them on its site. Amazon ticks the boxes of being (actually) an online application (it’s a department store) and being a large catalogue used by a known and revisiting audience. But just because it’s right for Amazon, doesn’t mean it’s right for you.

Like any element of website design, the decision to use a drop-down menu is contextual. There isn’t an inviolate rule that they are either good or bad. It depends on the site. But if they are deployed, it has to be because they are needed and that they will pull their weight. In themselves, they don’t provide a universal solution.

If they are to be used, the menu should also work regardless of their use – which is to say, if someone clicks on the top-level item, it should still take that person to a page – using the items on the sub-menu alone shouldn’t be mandatory, if for no other reason than a lot of people will expect it.

As I said, sometimes drop-down menus are useful or necessary. But seldom do they reduce the number of clicks needed to find something, provide a genuine usability advantage or increase traffic flow to a specific website area or page. You can do all of that with great design.

Add a comment

  • Comments