Hover Invitation

Also known as: Dynamic Invitation, Tooltip Invitation

Tags: actions

Use hover invitation to clue the user in to interact with objects and still keeping the interface lightweight.
Flickr uses hover invitation to let the user know he can edit image title directly “in place”. When the user hovers over the image title, the background of the title changes to yellow and mouse cursor changes to an insertion cursor to hint the user about what will happen on mouse click. Also a tooltip is displayed to enhance the hover invitation.

Flickr invites the user to edit image titles.

Flickr invites the user to edit image titles.

What problem does the pattern solve?

  • You want to lead the user to discover a new feature.
  • You want to introduce the user to a new way to interact (new idiom like drag and drop).
  • 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, drag and drop).
  • The user’s input is state based (e.g., rating, flag in mail, etc.).
  • Hover invitations should be used with secondary actions and when visual simplicity is an important goal.
    • Use always visible “Call to Action Invitation” for primary actions, actions that are essential for the user to notice.

When to use it?

  • You want to lead the user to discover a new feature.
  • You want to introduce the user to a new way to interact (new idiom like drag and drop).
  • 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, drag and drop).
  • The user’s input is state based (e.g., rating, flag in mail, etc.).
  • Hover invitations should be used with secondary actions and when visual simplicity is an important goal.
    • Use always visible “Call to Action Invitation” for primary actions, actions that are essential for the user to notice.

How to use it?

  • Provide immediate feedback when the mouse is over the target area that calls the user to action.
  • Try to provide a preview of what will happen if the mouse is clicked on the hovered object.
    • On hover, show the preview in a slightly contrasting manner (usually cursor and 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.
  • Consider showing a tooltip to describe what will happen on click (like “Click to edit”).
  • 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 then continue to show hover invitation to indicate it can be changed (usually toggled).

Why to use it?

Modern Web applications often let the users interact directly with them. For example, Edit-In-Place and Drag and Drop-patterns are rather common patterns these days, but problem with them is that the user doesn’t necessary know they are available. Therefore providing an invitation to the user is essential.

Hover invitations also help make interactions feel more lightweight and simplify the user interface. Keeping the invitations always visible would add a lot of noise to the UI compared to a UI where invitations are shown only when the user needs them.

Accessibility

To make the hover invitation accessible by assistive technologies consider using the following techniques:

  • 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 (1×1 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.”
  • Support keyboard activation of the item.

Sources

This pattern is based on the “Hover Invitation” pattern from Open Design Patterns.

Useful linksUseful links icon

Comments

  • There are no comments posted yet. Be the first one!