Drop Invitation

From DesignPatterns

Contents 1 Problem 2 Example 3 Usage 4 Solution 5 Rationale 6 Accessibility 7 Related 8 As Seen On 9 Code 10 Source

Problem

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

Example

Example of organizing photos in Yahoo! Trip Planner

Usage

• Clarifying a Drag and Drop operation.
• The object is first selected or when the drag starts.
• The available drop sites can change depending on the value of the dragged object (for example: dragging a hotel reservation on a trip calendar might be constrained to the days there are vacancy and therefore the calendar will only provide drop invitations to the days that are valid.)
• There are multiple drop sites that are available and in order to clarify what is available, drop invitiations are provided for those drop sites (for example, a photo can be dragged to a photo album and when photo is selected, a drop invitation can be placed on the album.)

Drop Invitation is for showing the only legal places an object can be dropped.

Solution

• Use visual style to indicate that an area is available for dropping the object.
• The visual style should be different than Drop Allowed/Drop Disallowed which cues the user the drop will happen here. One example is to lightly highlight for Drop Invitation and brightly highlight for Drop Allowed/Drop Disallowe.

Rationale

If multiple choices are available or if the object can be dropped into a collection that may be rejected based on the object's state then a Drop Invitation guides the user and prevents errors.

For more information, see the rationale for Invitation patterns.

Accessibility

When highlighting Drag and Drop destinations, pick colors carefully avoiding strange color combinations and/or lack of contrast. Good contrasting color combinations can help those with limited sight to find targets much easier. Possibly allow users to configure their own selection of colors for future use.

See the general discussion about accessibility for Invitation patterns.

Related

• Drag and Drop
• Self Healing Transition
• Invitation
• Cursor Invitation
• Hover Invitation
• Tool Tip Invitation

As Seen On

• My Yahoo!
• flickr

Code

Drop Invitation

Source

Yahoo! Pattern Library