Hover and Click: Usability in Rollover Interactions

For many designers, hover states are a go-to UX tactic.  Hover states can be used to provide context, to engage users and to declutter or simplify an otherwise content-heavy design.

But sometimes, a hover state or tooltip can cause usability problems.

Usability problems with hover states usually map back to 2 factors:

1. the fickle “on” and “off” control of the hover state layer (fickle because it is controlled by rollover of a particular area)
2. interaction (or possible interaction) within the “on” state

Users cannot get their mouse to "Click to View" because the tooltip disappears when the mouse rolls off the marker.

In this example, from Reebok’s ZigTech site, rolling over a marked point of interest reveals a tooltip/label.  But if a user tries to rolls his mouse over “click to view”, the tooltip disappears, because the user has rolled off the marker.  So how does one get more information?

Turns out, a click on the marker itself launches deeper information.  But that’s not instantly clear.

To avoid situations like this one, I follow a few simple guidelines.

Usability Guidelines for Hover/Rollover Content

• Click area — Be sure the initial rollover control area is large enough.  Older eyes or shaky hands won’t be able to isolate a specific pixel with the mouse, so don’t make them try to.
• “On” state — Once the rollover layer is “on”, the “on/off control” should expand from the original marker to also include the “on layer”.  A user should be able to roll the mouse over the newly revealed tooltip or hover state without collapsing the hover effect.
• Avoid deeper interactivity (or anything that seems like it) – Since moving the mouse out of bounds can turn the hover state off entirely, be leery of offering deeper interactivity from within the hover state itself.   If you have the need for an overlay with interaction, consider initiating on click rather than rollover.  That way, the user can close the state if he wants to, and doesn’t have to worry about moving outside the rollover radius.
• Slight delay — Although a slight change to indiciate interactivity is helpful, you need not turn on the full hover state the very instant a user mouses on.  In fact, doing so can sometimes cause a “flashing” effect if a user mouses across a page full of rollover effects.  In Jakob Neilsen’s October 5, 2009 Alertbox entitled Powers of 10: Time Scales in User Experience, he writes:

“When the computer takes more than 0.1 second but less than 1 second to respond to your input, it feels like the computer is causing the result to appear. Although users notice the short delay, they stay focused on their current train of thought during the one-second interval.

“This means that during 1-second response times, users retain the feeling of being in control of the interaction even though they notice that it’s a 2-way interaction (between them and the computer). By contrast, with 0.1 second response times, users simply feel like they’re doing something themselves.”

What other considerations do you keep in mind as you design for hover states/rollovers?

See also

1. Love the Hove(r)
2. Brilliant Hover State
3. Is eyetracking worth it?