The trouble with mega drop-down menus and what you can do differently

Look at this…

Let’s say you’re looking to buy a Samsung watch from EE. The option is there, but how long does it take you to find it? Is it a pleasant experience? Would you say it’s a user-friendly journey?

That’s not even considering that finding this menu is a journey in itself. You must, first, hover over the menu across the top, then you have to hope that the Shop drop-down stays in place while you hunt for the link you need.

If you accidentally move your mouse pointer off the menu, it vanishes again and you need to re-open it and start searching from the beginning.

The Diagonal Problem

This is a frustrating design, but it’s far from the worst I’ve seen. At least EE’s drop-downs are relatively large, encompassing most of the screen, so it’s at least possible you won’t stray off of it and allow it to disappear. Elsewhere, you can find the most infuriating navigations possible; numerous tiny drop-downs that appear and disappear at random as you frantically try to click on them, like something from the movie Labyrinth.

Take a look at the Carnival cruise website:

You hover over Explore and open the appropriate drop-down. Say you then need to go to Dining. To get there, you need to go down onto the menu and across to what you want:

Of course, I shouldn’t need to remind you of the eternal starting point for any user experience design:

Users will do as they wish, not as you expect them to; so, of course, users will try to move diagonally from Explore to Dining. In doing so, they will likely pass through Plan:

When they pass over Plan, they will be switched from the Explore drop-down to the Plan drop-down:

A Benny Hill sketch will then ensue where the user will flip back to Explore, then hit Plan again and again, until they eventually cotton on and move down and across in an L-shape; either that, or get very annoyed and go book with another company.

This major issue with drop-down design is known as the Diagonal Problem and it’s a notorious issue for people who build sites using WordPress, but it’s far from the only problem with drop-down navigation. Let’s take another look at that EE site, this time on mobile:

Now, we have to find the menu under a button, then navigate through to our desired timepiece. How we are supposed to know that the watch link is under Latest Devices? – a good question, but “how many people look somewhere else, back up and get stuck?” is a more pertinent one. Not to mention, the amount of scrolling you need to do to reach the menu options you need is infuriating.

Not to mention mobile…

Even worse, let’s have a look at the Marks and Spencer site:

You can see that it, yet again, has a mega-drop-down structure, but it’s far larger than EE’s with far more options. On mobile, it moves from confusing to unusable:

You can see that, to fit all that information in, our screen is flooded and multiple drop-downs on the same menu push information we need off the bottom, meaning we have to scroll up and down. It’s confusing, it’s not intuitive, it’s a mess.

So what are we to do? If we were handed a site like this and we had to find a way to improve the user experience, how would we start? Well, as with any design issue, the best solutions are the non-technical ones.

Why drop down at all?

Take a look at Craigslist.org, one of the internet’s most-popular websites, which has a design that’s remained unchanged for decades:

Yes, the design is as extensive and hard-on-the-eye as Marks’ and EE’s. but you don’t need to open it from a drop-down. All the options are immediately available; no sub-menus, no Diagonal Problem.

If we don’t have everything on a drop-down, we don’t need to make it quite so expansive. As such, we can start cutting this down drastically. Look again at Marks and Spencer:

• Lingerie is listed in the menu for clothing, so doesn’t need its own section
• Clothing is a general category covering everything, so we don’t need that
• Beauty can come under women, men and kids, perhaps, so doesn’t need its own section
• ‘All shoes’, ‘all accessories’ and ‘personal and styling’ can be both a link and a title, saving space
• The trending and featured sections can be built into the order process, rather than being hero content
• and so on…

With a simple look over the menu, you can rationalise it and reduce the size greatly, thus cutting down the mental load of the user.

From there, we can start looking at analytics – which categories do customers use, which do they not; where do they find what they need and where do they go before returning to the menu and leaving the site; and so on.

This, of course, may lead to you bringing back some of the categories you cut out, but when you do, you can be sure they are there for a reason and not simply taking up space.

Now you’ll have a simple, more-accessible index for your users. That’s better, but an index is always going to be a long way round. An index, in itself, requires you to read through the categories and look for what you need. Why do that, when you can set your site up to do the thinking for the user?

Do your user’s thinking for them

Ask them: are you shopping for yourself? Are you male or female? What size are you? What are you looking for? Then you can provide your users with the answers they need without asking them for too much.

It’s simple to do as well. A little meta-tagging and a search that responds to the answers to those questions and you have an easy route to what your user needs.

Don’t drop down, tag up

Still, when you’ve done the meta-tagging, why expect your users to go to your homepage at all? Get your SEO team to add that meta-tagging to your site data. Bring your users direct to the content they need from their Google search without even needing to land on your homepage and navigate to what they need.

Brand your pages and you still get the credit for providing the content, but there’s not even any need to create a site structure and categorisation if you get the tags right. You could even replace your homepage with a simple search engine to capture people who go to your site directly, as below:

With so many other options available to you that require very little technical expertise to implement, there really is never an excuse to put a gigantic drop-down menu on a site ever again.