Invitation

Designer needs to cue the user that an interactive feature exists.

Delicious Bookmark this on Delicious

Patterns in this Category

Cursor Invitation

Designer needs to cue the user that an object can be interacted with.

Drop Invitation

Designer needs to indicate valid candidate drop sites during a drag and drop operation.

Hover Invitation

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


Tool Tip Invitation

Designer needs to cue the user about what will happen if they click the mouse on the hovered object.


Why Use This Pattern?

With the more widespread adoption of Ajax and the resurgence of Flash on the web page, more subtle interactions are possible. Instead of a read-only web, we can now have a read-write web. Where before all content on the page was view-only, the user can now edit selected content directly. This inline editing capability is not immediately discoverable. The idea behind an invitation is using as many avenues as possible to get the user to discover the feature through lightweight interaction (e.g., mouse hover).


Invitations are good when:

  • 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).
  • You want to make the interaction feel lightweight.
  • The actual interaction engagement you are driving towards is the next logical event (hover leads to a click; click leads to another click, etc.)

Accessibility

Since invitations are about visual communication they by default are not accessible by users with visual impairments. To make the invitation accessible try the following techniques.

  • Set the focus on the item that got changed. This enables assistive technologies to detect where a change happened. Of course if the user is typing or needs the focus in another area then this solution cannot be used.
  • Provide ALT tags that preview what will happen when the user engages an interaction. For example, if you can close a panel and provide a way to communicate where the panel is collapsed to, you might consider putting text in the ALT for the image that tells the user what will happen when the click/activate the close icon and how they can get the panel open again.