Dropdown Menu Alternatives To Consider -

Are there dropdown alternatives to the classic dropdown menu? In this article, I discuss several reasons why you should no longer use a dropdown menu today. I also give several alternatives for the dropdown menu.

The so-called ‘Dropdown menu’ is experienced by many users as annoying because they do not work on devices without a mouse. They are also confusing and difficult to use. Fortunately, there are alternatives, such as traditional sub-menu, clear pages, and filters.

Table of Contents

Cannot be used (properly) on devices without a mouse

The dropdown menus became popular when hardly anyone had a smartphone. The tablet, as we know it today, did not even exist. Everyone visited websites via a desktop computer where you navigate with the help of a mouse.

With the mouse, you can hover with your pointer over an element, the so-called ‘hovering.’ Therefore, it is possible to associate a certain action with hovering. That way, you can expand a menu when a user hovers over a certain link. But with the emergence of devices (mobile phones and tablets) that are no longer controlled with a mouse, this is problematic. With your hand, you can click but not hover over something, which makes a dropdown menu unusable. There are solutions for this, but they generally work poorly or not.

Confusing

A dropdown menu also makes it easy to add lots of menu items. This can be confusing for the user as he or she has many choices. When you are limited to seven menu items, you are forced to think more about which menu items you want to offer the user. Stef Miller from UserTesting has watched thousands of hours of user-friendliness testing videos. A common problem was the so-called ‘information overload’ of the many menu options that a dropdown menu offers.

Hover tunnels

Sometimes dropdown menus are like a game. You have to hover exactly over the right piece for the submenu to slide out. And if you are even slightly off, everything will collapse again, and you can start over. Playing games becomes especially frustrating when you have multiple layers in your dropdown menu. The user is in a so-called ‘hover tunnel’ that must be followed precisely.

Simple submenu

If you really can’t put all your menu items in your main menu, you can create a submenu. You only show this submenu on pages where this is relevant. For example, you have the main menu item, ‘Products.’ Below that, you want to make a subdivision between ‘tablets’ and ‘smartphones.’

The user then clicks on the main menu ‘Products’ and is redirected to the ‘Products’ page where a submenu appears with the choices ‘tablets’ and ‘smartphones.’

The user is only confronted with the choice when it applies.

Navigation overview on the page itself

Another way to solve this problem is to offer the user on the ‘Products’ page a choice between ‘tablets’ and ‘smartphones.’.

The best thing is to combine this solution with the submenu so that when the user has made a choice, it is also easy to switch between the other options.

Filters

You can also show all products on the ‘Products’ page and give the user the option to filter by the type of products ‘tablets’ or ‘smartphones.’

This is ideal when you have multiple factors on which your content can be filtered. Consider, for example, events that have to be filtered by date, category, or location.

Dropdown menus are hopelessly outdated and most frustrating for your website users. Fortunately, some alternatives make using your website a lot easier.

So, here are a few menu dropdown alternatives to consider.

Eric Campbell and Golden Krishna over at fuckdropdowns.com make many (many!) incredibly fascinating and pertinent arguments, and I’m quite sure I don’t need to tell you how they feel about using drop-down menus!

Drop-down menus are frequently utilized in these instances.

Every day, frequently multiple times a day, you’ll come across this in the selection of shipping addresses, dialing codes, country of residency, billing/credit card data, amount of things in your basket, and so on…

Navigation menus: Another thing you’ve probably seen on a regular basis is that websites frequently use drop-down menus to offer you a list of subcategories or more alternatives beneath the main menu items and to send you further inside a site or app.

So, why are they harmful if they are so widely used?

Dropdowns are problematic since they are so often utilized. I believe the key is in the title.

They’re a sure thing; there’s no need to think about it. They’re thought to be a safe bet to use in any situation, but in reality, you should consider how they affect your user’s experience; after all, there’s more than one way to peel an orange!

In the case of forms, there is frequently a far more appropriate approach to obtaining information that is far less labor-intensive for your users. And there is unquestionably a better approach to designing site or app navigation than providing a menu that then hides a slew of sub-options nested within the first, generally cluttered menu.

Because of their inability to be customized, dropdowns can provide a poor user experience.

They can be perplexing. Don’t assume that because they’ve become the norm, everyone will understand how to interact with them.

They conceal information. Once discovered, this information must be sifted out in the user’s mind. This contradicts the adage “don’t make me think.”

They frequently require the user to perform multiple actions—for example, if you come across a date input as a drop-down, you’ll need to select a date, scroll down some way if it’s not a date in the first week of the month, and click, then scroll to find and select a month, and do it all over again for the year… There’s a lot of opportunity for improvement in terms of UX here!

They present users with an excessive number of options. I’ve written an entire post about how restricting choice is vital for a good user experience; having too many alternatives can lead to option paralysis.

They don’t function well on mobile phones. Because having many slide downs on today’s smaller screens is just clumsy and time-consuming.

Dropdowns are inaccessible: For someone with impaired vision or possibly limited motor abilities, dropdowns constitute a significant obstacle and an unsatisfactory experience.

They can have an impact on SEO. As usability becomes more important in SEO, drop-down menus might have a negative impact on SEO.

They’re simply plain annoying—I’m sorry, I’m not sorry! They certainly are!

What can you use in place of drop-down menus?

The use case heavily influences what you can or should use in place of a drop-down. Here are six alternatives to drop-down lists informs that you may use to improve your user experience:

1. Radio Buttons: A radio button, according to Google, is an “icon indicating one of a group of possibilities, only one of which can be selected at any time.”

You can use radio buttons or radio groups for a simple yes/no selections or when a user must pick between a limited number of options.

All of those alternatives will be readily available for the user to select with a single action, a click, or a tap.

2. Steppers: Steppers can be used to modify a value by increasing or reducing it by a predefined amount.

Instead of a slide down urging you to wade through a list of numbers, if you think I’ll obtain so ‘n’ so’s the ticket at the same time, simply click the plus sign and add another person to your travel schedule.

3. Switch: If the user has only two alternatives for any reason, you should definitely consider utilizing a switch, and if you do, you should also consider pre-selecting the most frequently selected option.

This means that while some people will have to perform one action to select the alternate option, the majority will not have to click on a drop-down to view two options and then move the mouse or their finger to select it.

4. Slider: Filtering by price is an example of when a slider might be used instead of drop-downs. Sliders allow you to select values from a predefined range.

5. Buttons: You can use buttons to easily display otherwise hidden items within a drop-down menu.

This, once again, simplifies the viewer’s action and optimizes their experience; the alternatives are obvious, they only have to make a single tap or click, and they may continue on as a result of the many actions required in clicking the drop-down, scrolling with the mouse or their eyes to the proper selection, and then clicking or tapping it.

6. Auto-fill: When selecting a country for shipping, for example, there can often be a seemingly unlimited number of possibilities to pick from if a drop-down menu is used as a method of selection.

This is frequently compounded by the fact that not all lists of countries are standardized and exhibited in the same order; some are alphabetical, others are ranked in terms of “popularity,” and others appear to be (infuriatingly). Random!

In situations like these, when you may have 20–100+ alternatives, it’s good to consider integrating a text field with auto-fill functionality to eliminate the need to click any drop-down and then scroll for days before making a selection.

Now, when it comes to navigation, that’s obviously a whole new kettle of fish! Here are a number of methods for displaying menus without drop-downs:

1. Sticky menus: Sticky menus make it extremely easy to navigate. Simple is usable – fantastic!

Sticky menus get their name because the menu bar sticks to a specific portion of the screen (typically at the top) rather than vanishing when you scroll down the page.

It implies that browsing the site will always be a breeze; you won’t have to look for how to navigate or where you want to navigate because the menu will be right there with you wherever you are on the page!

Sticky menus are one of my favorite ways to offer navigation; there aren’t many more simple and user-friendly ways to present navigation.

2. Scroll Panel

Scrolling is quite simple. It is less time-consuming than clicking to get anywhere, and consumers are very forgiving of scrolling. (This is one of the reasons behind the long-form landing page’s meteoric rise.)

You don’t have to cram every potentially relevant piece of content above the fold on the first page your prospect visits.

Using a scroll panel design allows you to create a dramatic design and use large, eye-catching artwork.

You just need to make sure to properly separate distinct panels so that your user knows where they’ll be sent if they click on that panel. Remember that snazzy design isn’t enough; your site needs to give a wonderful experience, and in order to do so, you must always let the user know what’s going to happen next.

You may always include a site map type menu at the bottom for those users who prefer a more traditional interface. However, keep in mind that you must make your product available to all of your users.

3. Card navigation: Card navigation has the potential to go either way, so use caution!

On the one hand, by keeping things simple and intuitive, you may create a very visual, logical, and delightful user experience… Or design might take precedence over function, and things can soon become intricate and convoluted.

Don’t overwhelm your users with bright colors or flashy animations. You must ensure that users can easily explore your site if you utilize card-style navigation.

So, now that we’ve covered why drop-down menus and navigation might be problematic and what you can use instead, there will be times when they appear to be inevitable, but there are always exceptions to the rule!

People may be pro-drop down for a variety of reasons, including:

They only allow the choosing of “legal” options (forms).

They free up desktop screen space (navigation).

So, if you do need to use a drop-down, here are some recommended practices to remember:

Avoid interactivity in menus: When you have several menus, it can be quite confusing for the user if they interact with one another.

An excellent example is within iTunes—the options provided in a dropdown when you pick “view” while also in your “library” differ from the options presented when you click “view” while on the “for you” music tab.

Drop-down menus should not hide important navigation –You’re going to have issues if you obfuscate top-level navigation by tucking items away in drop-downs.

Again, you want the crucial information to be visible to the viewer right away; don’t make them look for it. If your users have a bad experience, they will just give up and go somewhere else.

Avoid slide downs for tasks that individuals can accomplish quickly on autopilot; I’m referring to details like your date of birth here.

You are aware of it without having to think about it. That’s a short and simple one to fill out… Unless it isn’t, and you get the terrible three-stage drop down, one for the day, one for the month, and one for the year!!

Why, I mean, why? Do you despise your customers?

Avoid extremely long dropdowns: If a user clicks on a dropdown and it falls off the bottom of the screen, they will need to carefully scroll down to see all of the alternatives available to them. That can be difficult at times, resulting in the mouse falling off the side of the dropdown and the user having to repeat the process, which is obviously annoying. That is not a nice user experience!

Try to make all the alternatives available to the viewer from the start; it’s less tiring to try to make a choice, even if the list is a little bit if you can at least see everything, to begin with.

Make sure your drop-down label is visible. You’ve selected an option from a drop-down menu, and your thoughts wander for a moment. You suddenly recall that you neglected to text your mother. Or maybe you start wondering what’s for dinner…

Anyway, let’s get back to business. Erm… the drop down no longer makes sense, you’ve forgotten what you were doing, and there’s no label to provide information about the option you need to choose.

It’s both annoying and useless. The addition of a label is a simple item that can significantly impact the user’s experience.

If typing is faster, avoid drop-down menus. Returning to the list of countries scenario, it is clearly easier and far preferable to just write France or the United Kingdom into a field rather than cope with a big, long, and frequently weirdly organized list.

Support keyboard input: Your users should be able to use the keyboard as well as a mouse to make a drop-down selection.

Make it possible for your users to use the arrow keys to move up and down the list to find the item they want to pick.

Similarly, if a user begins typing, they should be directed to options that begin with that letter or letters, shortening the list of options, speeding up the scrolling process, and lowering the cognitive load. Hurrah!

Conclusion

Every drop down you utilize hides options that you want the user to make.

Most drop-downs also disguise a number of activities that the user must perform in order to make those choices.

If hidden options are critical to conversion or the user flow across your website or product, it will cause friction, irritation, and drop-off. You’ll need to take care of that right away!

Consider whether a drop-down menu is the best way to gather information and whether you are making it simple for your users. Or is a drop-down menu the best way to navigate?

All of the solutions outlined above do not imply that you should never use the drop-down menu. The best forms, those built with the best user experience in mind, use the appropriate tool/input for the questions that the user is required to answer.

There will undoubtedly be instances when you need to utilize a drop down or two, but I strongly advise that you give them some thought as well, and that you consider the best practice ideas above-not all drop downs are created equal!

Do you have any questions about dropdown menus or about the alternatives that I am discussing? Let me know by leaving a comment below!

Why you shouldn’t use a dropdown menu