Two weeks ago, I described hows inserting a fraction-of-a-second delay before display can go a long way toward alleviating one of the major criticisms of hover-invoked pop up displays like pop-up cards, hover help, and banner menus. This week, I’ll blabber about dismissing hover-invoked pop ups via methods that avoid the “squirrely-ness” that users hate…
Say “no way” to auto decay
Don’t design and implement an automatic decay (i.e., timeout) behavior. The pop-up should display until the user initiates dismissal by moving the cursor. The automatic decay behavior is often problematic as the system is guessing when the user is done viewing the contents of the pop-up, rather than allowing the user to indicate this through action.
Define the right cursor boundaries
The pop-up will generally display on mouse-over of a relatively small underlying UI element such as a hover help icon or a text link. The pop-up itself will extend from that underlying element and consume much more space. To prevent accidental dismissal, it is important to treat the underlying element, the pop-up itself, a small area of padding around each, and all the space in between the two as active areas. As long as the cursor remains within these active areas, the display should persist.
Implement a delay before dismissal on mouse-out
Another good practice for preventing accidental dismissal is to implement a delay of 800 ms or so after mouse out before dismissing the pop up. This allows users to persist the display when the cursor momentarily traverses outside of the boundaries of the active area described above.
When to make your hover-invoked pop-up sticky
If the user indicates a desire to interact with the pop-up beyond simply displaying and viewing, it should become a more stable, and less transient, part of the UI.
Once the user interacts with the pop up by setting focus to a field or other control within the pop up, moving it (possible with certain pop-ups), etc, it should become sticky – i.e., the pop up should no longer close on mouse out, requiring a more explicit means of closing (e.g., click-off, selecting the close button, or selecting ESC). As a side note – pop-ups that are displayed on click should almost always require this level of explicit action to close.
Summary: 4 keys to avoiding “squirrely” pop ups on hover
- Don’t implement an auto-decay (timeout)
- Define an appropriately wide active cursor area in which the pop up will persist
- Implement a delay before dismissal on mouse-out
- Once the user interacts with the pop up, it should require more explicit dismissal
The behaviors described here are important for all users and many of them are especially important to ensure a usable design for users with a range of physical and cognitive disabilities.
So, don’t be lazy. Laziness leads to squirrelly-ness…and squirrely-ness leads to unhappy users. We like our users to be happy