Hover menus open and close when the user moves their mouse over or out of a menu.
Despite their popularity they have several downsides.
Here, I’ll explain what they are and what to do instead.
# 1. They’re easy to open by accident
Hovering the cursor over part of the interface is not an intention to activate it. Technically speaking, users are always hovering.
If a user moves the cursor across a menu it’ll open by accident, obscuring content beneath and disrupting the user’s intended action.
Even worse—if the intended action is to click an in-page link, when the menu opens the user could accidentally click a menu item instead.
You can solve this problem by adding a small delay before opening the menu, but this makes it feel unresponsive. And the menu could still be opened accidentally if the user happens to rest the cursor there.
# 2. They’re easy to close by accident
Once the menu is opened, the user has to keep the cursor within the bounds of the menu to stop it from closing. This is especially hard for people with motor impairments.
# 3. They’re difficult to operate with accuracy
Moving the cursor directly and diagonally to the sub menu may cause it to close accidentally or activate a different sub menu.
To reliably activate the intended sub menu, users have to carefully and unintuitively move their cursor down and across. This is known as a hover tunnel.
# 4. They don’t work with keyboard or touch devices
Menus that open on hover exclude users who use a keyboard or touch device.
# Open the menu on click
To avoid the problems above let users open a menu when they click the menu.
While hover menus are everywhere, they’re really hard to use, especially for people with motor impairements.
Instead of trying to work around these issues with sub par solutions, let users open menus on click.
Not only will it avoid all the pitfalls of hover menus but it provides a number of benefits too, no matter what the situation is.
Sign up to Good Design
I’ll email you once a month on nailing the basics, avoiding complexity and making things that work for everyone.