Drop Invitation
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Drop Invitation
[edit] Quick Summary
This pattern revolves around the problem of how a designer can most efficiently indicate the user which area can be used to drop elements. This pattern is highly relevant to the pattern Drag and Drop.
Designer needs to indicate valid candidate drop sites during a drag and drop operation.
[edit] Visual Examples
Is still missing. Pls add links here if you find a suitable example.
[edit] Examples found on the World Wide Web
[edit] Use When
- 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.
[edit] Possible 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.
[edit] 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.
[edit] 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.
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.)
From an other source.
Context A user may want to personalize their site layout, such as a collection of images, personalized home page, dashboard, etc. Implementation Use standard conventions to initially show that an object is interactive by changing the cursor arrow (to hands for Mac OS X implementations, to arrows for Windows implementations), upon mouseover. This is critical for AJAX implementations where new user interactions are deployed. When the user clicks the object, dim the object. Next, dim an object when the user clicks it, and maintain the Dimming while user holds the object. Use the Drop Invitation pattern to show users (via object animation) where they can drop the object. Finally, remove Dimming when the user drops the object. If user drops the object in an inappropriate location, allow the object to spring back to the original location. Purpose Helps users visualize how they can customize their layout, collection, etc.
