In this guide, we’ll look at five common dropdown issues and how you can fix them so your users’ experience with your product doesn’t get compromised.
Generally, I’d say there are two categories of dropdown features we use on websites and apps. Dropdown boxes for forms, action buttons, attribute options, country selectors and so on. And dropdown menus in the header.
This post is going to focus strictly on dropdown menu design.
UX Design Tips for Dropdown Menus
If it ain’t broke, don’t fix it. That’s a motto I absolutely, positively hate. It insinuates that, so long as the job gets done, there’s no point improving it unless someone complains. Which is just bad business.
I often worry that navigation falls into this category. After all, it’s a universal element across websites and apps, and users depend on it to get around. Because of this, I’m sure most people just deal with whatever the experience is no matter how clunky it feels.
Knowing this, have we become complacent when designing navigations and, more specifically, dropdown menus?
While a cramped dropdown menu, for instance, might not completely ruin a user’s experience, those tiny bits of friction can add up. So, let’s look at some common ways in which dropdown menus aren’t making the cut and the simple UX fixes you can use to improve them.
1. Consider a Click Trigger Instead of Hover
Think about how many times you’ve been on a website or in a web app and the menu accidentally opened because you hovered your mouse too close to it. It’s annoying.
So, you really have to think about what kind of effect a hover-triggered dropdown menu will have on your users. With a session recording tool like Crazy Egg or Hotjar, you should be able to see if the menu is too sensitive or perhaps the menu’s size or placement is leading to an increase in accidental dropdowns.
If you notice this happening frequently enough, then the fix is simple: Turn the hover trigger into a click trigger.
You can see how nicely it works on the PayPal website:
As a bonus, a click-triggered menu is good for consistency.
For starters, whether a top-level link drops open to reveal additional links or it takes visitors directly to a page, the user has to click on it. So users don’t need to change their mode of engagement when using the navigation.
It’s also good for the omnichannel experience:
While it can’t be an identical experience since the top-level links are aligned vertically on mobile, the click experience is the same. So, users who interact with the site or app across devices don’t have to change the way they engage with it.
2. Use Dropdown Indicators
When your menu has mixed links—ones that drop open and ones that go directly to a page—it’s a good idea to let your visitors know which is which. Otherwise, they could end up spending time hovering over or clicking on each link to find out what their options are.
It’s wasted time and effort than can easily be avoided by including dropdown indicator icons the way the Toyota website does:
The red down-facing arrows in the navigation bar immediately let visitors know that the “Select Vehicle” and “Shopping Tools” links have more options hidden beneath them.
Also notice how Toyota uses various hover state changes like the red underline, the vehicle rotation animation and the icon grow animation. These UI changes make sure visitors never lose track of what they’re doing in the navigation.
These design choices should empower Toyota’s shoppers to more confidently and intentionally interact with the website.
3. Don’t Be Afraid to Add More Space
When it comes to hyperlinks, spacing isn’t really an issue since text links aren’t usually near competing links. So, when a user goes to click one, there’s no surprise or frustration if they go to a page or initiate an action they hadn’t intended on.
But when a dropdown menu is jam-packed full of links, that can easily happen.
Of course, you need to be cognizant of how much space you add around the links in a dropdown menu. You don’t want it to be so long that users have to scroll and scroll and scroll to see all of the links, especially on their smartphones.
