Cursor Invitation

From Interaction-Patterns.org

Kategorie:Interface Interaction

Contents 1 Cursor Invitation 1.1 Quick Summary 1.2 Visual Examples 1.3 Examples found on the World Wide Web 1.4 Use When 1.5 Possible Solution 1.6 Rationale 1.7 This pattern is being used to 1.8 Source

[edit] Cursor Invitation

[edit] Quick Summary

Cursor Invitation is indicating when an object can be used to interact with. This is solved by showing a different cursor when hovering over an object that can be manipulated.

[edit] Visual Examples

Found at www.google.ch	Found at www.netvibes.com

[edit] Examples found on the World Wide Web

• http://www.netvibes.com

[edit] Use When

• 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.

[edit] Possible 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.

[edit] Rationale

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.)

[edit] This pattern is being used to

• Immediate Feedback
• Help
• Immediate Display Of Information
• Tool Tip Invitation
• Undo

[edit] Source

• The pattern described by the Yahoo! Design Pattern Library. This article is copied from there: http://developer.yahoo.com/ypatterns/pattern.php?pattern=cursorinvitation#
• Deepen your knowledge about this pattern and patterns in general by reading this article about AJAX evangelist Bill Scott: http://www.netmag.co.uk/zine/design-culture/designing-with-patterns
• More about patterns in this blog entry when Yahoo! first released its Design Pattern Library: http://yuiblog.com/blog/2006/02/13/yahoo_patterns_released