27 December 2015

Hover menus are problematic

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.

User moves across the menu which uninitentionally opens it

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.

User uninitentionally clicks menu item

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.

User accidentally closes the menu

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.

User tried to move the cursor diagonally to the sub menu but activated a different menu by accident.

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.

You can't open the menu with keyboard and hover.

Open the menu on click #

To avoid the problems above let users open a menu when they click the menu.

Not only does it give users control but it also provides a consistent experience regardless of what device they user or method of operation.

Conclusion #

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.