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.
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.
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.
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.
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.
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.
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. Do you have any questions about dropdown menus or about the alternatives that I am discussing? Let me know by leaving a comment below!