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.

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.