Do not use a mouse hover to trigger functionalities
Posted on November 16, 2023
Takeaways
- Functionality may be triggered unwillingly because users moved their mouse to a specific location
- The mouse hover does not exist on mobile devices
- The mouse hover is not an accessible interaction method
- Instead, design for explicit interaction with elements to trigger functionality
This article is part of a series on user interface micro interactions and how they affect the user experience.
The concept of a mouse hover is only a mental model for humans: it allows to believe that there is depth on the flat pixel screen in front of them.
The mouse cursor is understood to be “above” any element on the screen.
Over time, to ensure users understand that an element is interactive, it has become customary to user a mouse cursor that looks like a hand.
Many Designers and Developers have taken the habit to create elements that trigger functionalities as soon as the mouse “hovers” over them. The most frequently known example of this design pattern is the mega menu that opens on websites as soon users move their mouse over items in a site header.
There are a few issues with this design pattern:
1. Functionality may be triggered unwillingly because users moved their mouse to a specific location
As far as user experiences go, this is not acceptable. Users should always remain in control of what functionality is triggered, not the interface itself.
The example above shows that the mega menu hides the content of the page when users move their mouse to reach an element above the navigation.
2. The mouse hover does not exist on mobile devices
A hovering mouse takes for granted that there is a mouse. With tactile screens, there is no such thing—except for some quite specific device implementations that cannot be considered mainstream.
Making a functionality unreachable on mobile devices is not acceptable design.
3. The mouse hover is not an accessible interaction method
Finally, when interacting with a computer with other devices than a mouse—keyboard, sip and puff devices, switch boards, eye trackers, etc.—the hovering mouse does not exist either.
Making a functionality inaccessible is not acceptable design.
In conclusion, do not trigger functionality with a mouse hover
The hover state should only be considered for decoration, a little additional thing that helps understand elements are interactive.
Last updated on February 13, 2024