All Articles

UX Design

Dropdown Menus: Best Use Cases

June 28, 2018

Dropdown navigation menus make sense in a lot of digital experiences. They can help users narrow down their choices as to where they want to go. In fact, Amazon and most online retailers have utilized detailed dropdown navigation to help users find what they’re seeking.

However, there are also places where dropdown menus don’t make as much sense and can, in fact, damage the user experience as well as the accessibility of the website. Consider all situations when planning your site’s UX.

User experience experts across the web have varying opinions about dropdown navigation. Some are on board, others avoid them at all costs. But the truth is, dropdown menus can work if used correctly.

Types of Dropdown Menus

Dropdown menus are more than just the main navigation on a website. They come in many applications across a web experience.

Megamenus
Megamenus are what we see on websites like the aforementioned, Amazon. Big, detailed menus that give users plenty of options. While it may require more reading and less scanning by the user, it gives more options to help people get to where they want to go.

amazon megamenu

Form Selections
Organizations frequently employ dropdown menus to help users accurately complete an online form. Dropdowns are used for choosing options such as selecting your country, language, or responding to a question.

pizza hut form

Command Menus
You’ve likely run into command menus, especially on computer programs and applications like Microsoft Word or Adobe Photoshop. Command menus give the user options for next steps — whether it’s to save, place, print, or publish.

photoshop command menu

Mobile Dropdowns
To optimize the mobile experience, mobile dropdown menus — often built from the main, secondary, and other menus of a desktop website — allow users to easily navigate a website on a smaller screen. Approaches can vary with mobile dropdowns, sometimes coming from the top of the screen, or from the bottom or sides.

spartanburg mobile menu

What Makes a Good Dropdown Menu

Well designed and developed dropdown menus have key traits. If you’re considering developing dropdown menus on your website or next redesign, keep these considerations in mind:

    1. Keep dropdown options no less than 7 and no more than 15.
      Too few options make the dropdown a bit useless, and too many dropdowns confuse and frustrate users. Dropdown menus that are long or over detailed are cumbersome to users, especially if it stretches down the screen and requires scrolling (which also may require extra code to make it functional on hover menus). Mobile experiences, too, can be hindered quickly by dropdown menus that are over detailed. This applies not only for navigation dropdowns, but forms, too. If more than 15 items are impossible to avoid in a form dropdown, give users an option to input text to find what they want, like when instructing users to choose a country.
    2. Stay under two levels deep.
      Similar to the guideline above, navigations that keep building out make for poor use of the screen and get more difficult for users. Whether the dropdown accordions fly-out on hover or click, it requires careful control by users to keep options open. This can be frustrating and complicated, especially when considering accessible access for all users. Instead of investing in deep accordion dropdowns, consider a better internal site search so users can find what they’re looking for with ease. Or, simplify your navigation to top-level categories and topics that make sense to your end user and their goals.

accordion menu

    1. Unavailable options aren’t visible, or are grayed out.
      Whether it’s in your navigation or on a form, Nielsen Norman Group recommends keeping unavailable options out of view by graying them out.mazda gray outAs seen above with the Mazda website example, graying out unselected items (or highlighting the selected) is a helpful visual for users to know where their mouse is and what option they may be about to click. Similarly, if you’re giving users options on a form — such a an ecommerce or retail site with options for products — gray out anything that’s unavailable or is not in stock.
    2. Function by click, not hover.
      Hover dropdowns are particularly tricky for users, whether using a mouse on a desktop, or a clickpad on a laptop. They require people to hold their mouse steady. And if you’re breaking guideline number 2 above, it’s even more difficult to navigate effectively. A click-activated dropdown keeps the control in the users hands, while still giving them the ability to browse the options before making their next selection.

CDC click menu

    1. Design for users, accessibility, and space.
      This includes not only highlighting options when selected or hovered on a dropdown menu, but making sure the menu and navigation itself can be easily read. Contrast ratios are a must for accessibility, but even more important if you’re giving users many options to choose from. Consider simple colors with nice contrast, and keep the verbiage used in your dropdown as simple but direct as possible to avoid access clutter, which can add to user confusion. Also, consider padding around options to give open space and make it easy for users to digest the options available in front of them.

olympics accessibility

  1. Develop dropdown menus for mobile first.
    As mobile use continues to climb over desktop, it’s vital that any dropdown menu on a desktop is equally easy to use on a mobile device, though it likely won’t function or display the same. That’s why keeping your options light, activating with click, and avoiding multiple displayed subnavigations are good practice. According to Think with Google, mobile users are constantly engaged on their devices, from communicating on social media to creating micromoments, like finding directions or hours of operation for a local business. When a question arises, 96% of those surveyed by Google said they turn to their smartphones. Long story short, if your navigation experience doesn’t work well on mobile, it’s not working for your audience.
  2. Build menus that are accessible for all users, including keyboard input and selection.
    As Web Content Accessibility Guidelines (WCAG) continue to expand, your ability to meet the needs of any user on any device or software is important. With the various formats for developing dropdown menus, it’s imperative that your organization first meets users where they are, regardless of abilities. This includes the ability to use keyboard inputs, such as tabbing across the site, to access the options users need. Keeping dropdown menus easy to use, read, understand, navigate, and convert with, is essential. Fortunately, there are some helpful dropdown and fly-out navigation resources from the Web Accessibility Initiative to help developers create functioning menus for all.

When to Use a Dropdown Menu

According to Nielsen Norman Group, dropdown megamenus can work well for navigation if the site content calls for it. If a site is large and covers many topics (online retailers are especially capable of megamenus), megamenus can be helpful for grouping like-topics.

office depot megamenu

But dropdowns, even small ones, don’t always have a place. If your organization is large and covers a wide variety of topics, dropdown menus can be helpful to get users where they want to go efficiently. They’re also helpful if you have a limited capability with your internal site search.

As displayed in megamenus, dropdown navigation can be great for grouping like-items or categories, or when using broad but distinct main navigation terms that can mean several different actions to the end user. Lists of content, too, can be effective when used in dropdown navigation, especially for interactive online forms.

Don’t be Afraid to Ask Your Users

Remember: It’s best to do user research and learn how your target audience expects to interact with your brand or website, rather than just assuming you’re helping them with dropdown menus.

A/B testing, heatmaps, and click tracking can be valuable assets as you test different design approaches. Even talking to your users in small groups, to gain an understand of their frustrations and preferences, will help you build a better navigation experience that meets them in the middle.

TAGS: , , ,

Recommended Articles

Join over 180,000 registered users

plans start at just $8.99 a month

Get Started Today

No credit card required