4 reasons why hover menus are problematic

Adam Silver
Dec 27, 2015 · 3 min read

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.

The menu accidentally closes when you move directly from Companies to the latest article
To keep the menu open, you must move the mouse carefully down and then across

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.

User wants to click link below the menu but…
…the menu is opens accidentally so the user clicks Energy instead

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.

Don’t want to miss an article? Subscribe now

Simple = Human

Design, Development and Leadership articles written and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store