Cursor Invitation

Best Practice · Last modified July 15, 2009

To invite a user to try a lightweight operation on an object, one that does not require or cannot easily accommodate a preview, change the appearance of the cursor.

For example, change the cursor when it is placed over the object with which you are inviting the user to interact, and change the cursor again when an operation is initiated with a click or a drag.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

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

When to Use This Pattern

  • The interaction will be an operation you perform on the object.
  • The operation is not easily previewed.
  • It is not necessary to preview the operation.
  • You want as lightweight of an invitation as possible.

What's the Solution?

  • Change the cursor to indicate the operation. For example to indicate drag use the CSS cursor move (which normally shows as 4 arrows; but on the Macintosh as a hand.)
  • Change the cursor when over the object with which you will interact.
  • When the operation is initiated with a click or a drag.

Why Use This Pattern?

For more information, see the rationale for Invitation patterns.

Accessibility

See the general discussion about accessibility for Invitation patterns.