Avoid Dropdown Menus (Bad Web Design UI)

You should avoid dropdown menus if you want conversions!

Stop doing that sh*t. Cut it out. I’ve long read the many debates on dropdown menus for both desktop megamenus as well as mobile hamburger-menus. They go on and on about the pros and cons of each but only from the vantage-point of the designer rather than the user!

I’ll tell you why dropdown menus are HORRIBLE for conversions.

 

Why dropdown menus are bad for conversions

1. Users don’t click what they don’t see.

It’s as simple as that. As a designer or website-owner, you may think hiding 10 awesome options behind one descriptive label helps direct them to the dropdown items but this isn’t the case. Users don’t know what the awesome options are and unless they’re even interested in the category label, they’ll never explore further.

Want proof?

Go to Yahoo or Youtube and tell me where you see dropdown menus. NOWHERE! And why? Because it hurts user engagement. Again, users don’t click what they don’t see!

“But what about Amazon and ecommerce sites?”

I’m glad you asked, they only further validate my point. Tell me, when you go to Amazon…how do you usually browse through items? Do you methodically go through the dropdown category menus, or do you click randomly on products?What about when you surf around on Youtube. Same goes for the grocery store…how do you find things? Are you really looking at the aisle categories or just kinda aimlessly wandering around the store?

Even when we know what we want, we still love exploring!

The truth is users don’t really know what they want. They just click on whatever shiny thing gets their attention.

2. Dropdown menus require extra (clicks).

This may seem silly but it’s true. Instead of making one-click exactly to where they go, they need to first direct the cursor or press on the menu (mobile), and then select the item. That’s TWO actions instead of only one. That extra action required will decrease conversion rates. This is why many e-commerce sites have 1-page checkouts.

3. Dropdown menus (usually) create too many options.

This one is a giant IF. It depends on who the designer is, and depends on if the designers knows what they’re doing. I always feel you can probably decrease the number of links you have on your site. Most sites have 10 options when 4 would have done just fine.

Instead of: Home / Services / Testimonials / About / Contact

  • Try: Services / About / Contact

What about HOME and TESTIMONIALS, you wonder? Easy…just use your logo as the “home” button and sprinkle the testimonials throughout the homepage, services page, and even about page!

Seriously, dropdown menus are usually a reflection of poor UI and lack of design clarity. And the common habit is to try and sneak in more options under each dropdown. You should be doing the opposite! Reduce clutter, keep only the essential. Present fewer options for visitors and raise your conversions.

Focus on your conversions! Every click on your site needs to funnel into a conversion that either makes money or causes some desirable user action. There’s no sense in having 10 links (all occupying equal space) when only 1 of them is a conversion link. Reduce that to 3 and now you’ve effectively increased your possible conversion rate.

 

Can you EVER use dropdown menus?

Absolutely! They are a useful design tool and incredibly helpful for making space. Right off the top of my head, I can think of two best scenarios for dropdown menus:

DROPDOWN SCENARIO #1 – Obvious links

Examples of obvious links:

  • ACCOUNT > Profile > Settings > Log out.
  • HELP > Support > Submit a ticket > Documentation
  • RETURNS > Refund policy > Submit Return request > Check Return Status

These links are obvious. You know where to look for them (usually top-right) and you know what they do. They’re perfect candidates for being hidden away because they aren’t as important for conversions and users don’t need to be enticed to click on them. They are there if you need them but otherwise, totally out of the way.

You’ll also notice that when these kinds of links aren’t in the dropdown menu at the top, they’re usually found tucked away in the footer. Again, they’re so obvious in that you KNOW they exist and you know where to find them. There’s no need to shove them in front of user’s faces.

DROPDOWN SCENARIO #2 – Granular navigation 

Examples of granular navigation:

  • Shopping > Womens > Dresses > Tops > Buttoms > Accessories
  • Car Parts > Make > BMW > Honda > Toyota
  • DMV Renewal > New application > Renewal application > Lost Application
  • Shows > Movies > Times > Tickets

These links are in a way also obvious links but they’re there to help users get exactly to where they need to go. In moments like this where you have highly specific users who know exactly their needs, dropdowns are a perfect way to offer many options without cluttering up the page.

Or better yet, another way to say it is that the dropdown menus allow users to choose from many options without forcing them to look at each one. There’s no point in listing all options out in a giant mess and forcing all users to look at all options when they’re only there for one specific thing.

DROPDOWN SCENARIO #3 – Mass options

You should use dropdown menus if you’ve got tons of options that need to be visible from every page. I’m talking like above 30 options. If it was only 10-12, I might recommend just leaving them out. Have the main 3 options highlighted and then the rest below in smaller text. But if you have more than that, you’ll have no choice but to tuck them away.

2 thoughts on “Avoid Dropdown Menus (Bad Web Design UI)

  1. Very nice article. Exactly what I´m thinking about dropdowns. In most cases, it makes no sense at all.

    When I first designed websites without dropdowns, it was quite strange. But now it´s standard (if possible).

    It´s funny how many customers tell me: there has to be a “Home”-navigation-entry link. They don´t get used to it, when there is no “Home” in there. It´s just so common. Sometimes I manage to convince them, that it´s not necessary and sometimes we meet us with the idea of a “home icon” instead of the home text.
    web standards are powerful 😀

    keep up your great articles!

    1. I’m right with you, Mike. So many clients who want the “HOME” link have no idea how many websites they’ve used everyday without one. Youtube, Amazon, Gmail, etc. You don’t need the home link…you only need links to what they want to do. Hamburger menus are useful for directory-style links, but terrible for discovery links or conversion links. Nobody searches for what they don’t know exists!

Leave a Reply

Your email address will not be published. Required fields are marked *