Why hover menus are problematic
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. The hover tunnel and 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. Understanding user intention and accidental activation
Hovering is not an intention to activate. It is at most a suggestion that the user might interact with 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 poor experience.
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. Accessibility and fine motor skills
Items on the bottom of the menu are hard to click because the user might accidentally move the mouse off leaving the user to reopen the menu again.
4. Touch-enabled devices and Responsive Design
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.
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.