Hover Invitation

Best Practice · Last modified July 15, 2009

When you want to invite the user to click on, or interact with, an object, provide immediate feedback when the mouse hovers directly over the object, to suggest that something something interesting will happen if the user interacts directly with the object by clicking on it.

Show the user a preview of what will happen if they click the mouse while hovering over the object.

If the object is write-once then no longer show the hover invitation after saving the choice, but if the object's value can be altered again (or toggled) then contine to show hover invitation to indicate this.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

Designer needs to cue the user about what will happen when the mouse is clicked on the hovered object.

When to Use This Pattern

  • You want to invite the user to click or interact with the object being hovered over.
  • You want to make it clear that something will happen when the user clicks on the object being hovered over.
  • The user is interacting directly with the object (e.g., rating).
  • You want to entice the user to interact with the feature.
  • The user's input is state based (e.g., rating, flag in mail, etc.).

What's the Solution?

  • Provide immediate feedback when the mouse is over the target area that calls the user to action.
  • Show the user what will happen if the mouse is clicked on the hovered object.
  • Show the preview in a slightly contrasting manner (usually color or border change) that indicates they are in preview mode. However, make the preview mode close enough to the final state that they will know what will happen when they click on the object.
  • Allow the user to take action via direct interaction with the object.
  • If the object is write-once (like many reviews) then no longer show the hover invitation after saving the choice. If the object's value can be altered (as in Y!Mail Flagged column) then contine to show hover invitation to indicate it can be changed (usually toggled.)

Why Use This Pattern?

Since we want the user's input we are employing techniques that are visually engaging and simple in interaction. However, they do not always involve the normal user interface controls. By engaging the user during hover we make the interaction as simple and lightweight as possible hopefully increasing feature usage.


For more information, see the rationale for Invitation patterns.

Accessibility

To make the hover invitation accessible by assistive technologies use the following technique.
  • Considering setting focus to items on hover. This will the user to toggle between the mouse and the keyboard for navigation. Additionally, assistive technologies will detect the focus change and read the text.
  • If the item has an image (as in a menu item), place the image inline to the text and set the ALT text to convey the state of the item (e.g., expanded, collapsed or disabled). If you don't have an image you can use a small (1x1 pixel) filler image and place inline to the text. This will allow the assistive technology to read the ALT text as it reads the inline text
  • In addition to communicating the state, have the ALT text also communicate the invitation. For example, in a menu system you might place the following ALT text on a submenu item: "Search options collapsed. Click to expand." A nice side-benefit is that Internet Explorer will display ALT text as a tooltip if no TITLE attribute is specified.
  • Support keyboard activation of the item.
  • See the general discussion about accessibility for Invitation patterns.