Hover menus are very popular on the web. People think they are popular because they “aid discoverability” and “save users a click”, the latter of which is a common UX fallacy. The thing is, hover menus are problematic and here’s why:
1. Accidental deactivation
When a user opens a menu, they can’t intuitively move the mouse directly to a sub menu item because this will accidentally close the menu — either by leaving the menu or activating another menu by accident. This makes the menu very hard and frustrating to use which drains peoples energy.
2. Accidental activation
Hovering is not an intention to activate. It is at most a suggestion that the user might activate something. Technically, the user is always hovering. This is why hover states are beneficial to the user, such as a change of cursor (browsers do this by default) and a change of style.
With hover, a user can accidentally open a menu even though they never intended it and when this happens it obscures the content behind disrupting the experience.
Also, if a user intends to click a link within a page, when the menu pops open just before clicking that link, the user may end up navigating away accidentally. I have seen this happen several times and it’s a very bad experience indeed.
Often to work around these issues, a small delay is added before showing a menu, but this induces another problem — when the user does intend to activate the menu, they have to wait for the delay to finish which makes the menu feel unresponsive again causing further frustration.
3. Fine motor impairments
Items on the bottom or edge of the menu are hard to click because the user might accidentally move the mouse off leaving the user frustrated.
4. Sometimes you can’t hover
There is no hover on touch-enabled devices (unless the user plugs in a pointing device). And touch-enabled devices are everywhere and they come in all shapes and sizes.
Embrace the web, design for everyone
Instead of focusing on device classification, focus on device capability. You can’t control who will access your website and with what device so it’s advisable to design for touch, mouse, finger, keyboard interchangeably.
The simplest solution is to show a menu via click. Click works when the user taps, when the user clicks with the mouse, and when the user tabs via keyboard and presses enter.
Also with click, once activated it stays open until the user clicks elsewhere which solves the tunnel problem altogether. And because clicking or tapping is a clear intention, there is no accidental activation/deactivation solving all the aforementioned problems above.
If you enjoyed this, please hit the ♥ button below so that more people can avoid the hover menu problem!
Don’t want to miss an article? Subscribe now