Drag and Drop
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Drag and Drop
Drag and Drop is a way of giving the user the freedom to deal with elements of interfaces in a way he is doing in the real world too where we grab things and place them at another spot. Drag and Drop works exactly like that. It's based upon that conceptual model.
The Yahoo! Design Pattern Library is describing it in its problem summary as following: "The user needs needs to re-arrange the layout of modules on a web page directly with the mouse".
[edit] Quick Summary
This pattern is presenting a way of how to decrease the user attention on a certain area by dimming this particular are on the interface. The parts of the interface appear to be of secondary importance, not available or currently inactive.
[edit] Visual Examples
| Found at www.google.com/ig | Found at www.netvibes.com |
| Found at script.aculo.us | |
[edit] Examples found on the World Wide Web
[edit] Use When
- You want to avoid forcing the user to go to another page in order to re-arrange the layout
- You are designing a web portal page requiring user personalization (such as http://my.yahoo.com)
[edit] Possible Solution
Drag and drop interactions can be very complex. The complexity lies in the number of event states (we call these event states interesting moments) that can be used in a specific drag and drop sequence.
In addition, there are a number of on-screen elements (actors) that can be styled, positioned or animated for each of the given event states. To see the complete list of event states possible for drag and drop, check out the Drag and Drop Rationale discussion.
For dragging and dropping modules the set of interesting moments and actors is smaller. Here are the most pertinent interesting moments for Drag and Drop Modules:
- Page generation (for what gets shown when the page is first rendered)
- Mouse hover over draggable object
- Drag initiated (mouse down, mouse moves >= 3pixels)
- Drag over a valid target area
- Drag over an invalid target area
- Drag over the original location
- Drop accepted
- Drop rejected
- Drop back on original location
On a page with content modules, the following user interface elements (actors) may particpate during each interesting moment.
- Cursor
- Module or thumbnail representation of module
- Original location of module being dragged
- Drop target (or insertion bar showing where module will be dropped)
Interesting Moments Storyboard Grid
At each interesting moment in the drag and drop interaction, an actor gets involved. This grid captures each of these interactions that occur while re-arranging page modules during a drag and drop sequence. Table showing interesting moments grid for drag and drop modules
The drag and drop solution is described below in detail. Page Generation
- Since the idiom of drag and drop is not yet common in web pages, discoverability of the idiom is an issue. One solution is to provide an initial help hint that clues the user that modules may be re-arranged by drag and drop. This hint should go away after the user has used the feature a few times or after a set number of logins.
Mouse Hover
- Cursor Change. Change the mouse cursor to the CSS:move cursor. This appears as 4 arrows (except on Firefox on the Mac where it shows as an open hand cursor)
- Optionally: Provide a tooltip when the mouse hovers over the draggable region of a draggable object. Tooltip informs the user that they can drag and drop the module. In testing, user's did not seen to need this additional feedback. The cursor change provided on hover was sufficient
Drag Initiated (and Tracking)
- Drag Module
- Module moves to match mouse movement (starts tracking with the mouse location).
- Opacity is reduced slightly to allow modules and page elements underneath to show through. Reduced opacity is maintained throughout drag experience. Module floats above the other page elements.
- Original Area. Since module is moved, a "hole" appears at the module's original location.
Drag over Valid Target Area
- Drop Target Area. A thin insertion bar is shown where the module would be dropped (between two other modules).
Drag over Invalid Target Area
- Cursor Badge. An "Invalid Badge" is floated beside the cursor to indicate that dropping here will be rejected.
- Drop Target (Insertion Bar). None.
Drag over Original Area (the "hole")
- Cursor. Move cursor.
- Dragged Module. Consistent with dragging (reduced opacity, etc.)
- Drop Target (Insertion Bar). None.
Drop Accepted
- Cursor. Returns to normal cursor
- Drop Target. Insertion bar is removed
- An animation sequence occurs to put the module into the new location
- Drop Target.
- Insertion bar is removed.
- Hole opens for new area.
- Dragged Module.
- Dragged Module animates into the new area (as it opens)
- Opacity animates to normal
- Original Area.
- Area closes up with animated transition (Self-Healing Transition)
- Causes the other modules to close in around the original hole
- Drop Target.
Drop Rejected
- Cursor. Returns to normal.
- Dragged Module.
- Animates back to original position ("the hole") -- zoom back.
- Opacity increases to full opacity.
- Original Area. Is not filled with the module back in original position
Drop on Original Area
- Cursor. Return to normal.
- Dragged Module.
- Animates back to original position ("the hole") -- zoom back.
- Opacity increases to full opacity.
[edit] Examples
[edit] Rationale
This drag and drop solution varies slightly from google.com/ig, netvibes.com, live.com and other portals that have implemented drag and drop. The main difference is the following concepts:
- The drag operation is a preview and not a completed operation. Therefore do not re-arrange anything on the page until the drop has occurred. Instead hint at what is happening by leaving a hole in the original location and highlighting an insertion bar to show where the object will be dropped.
- Since the page will re-arrange when the user drops the module, smooth out layout changes by animating transitions. Close the original hole with a Self-Healing Transition. Slide modules into place with Slide Transitions.
- The dragged module should not get in the way of re-arranging the layout. We use a diminished opacity to allow what is underneath the dragged module to still appear.
[edit] Accessibility
- Drag and drop is not fully accessible. One way to support accessibility is to provide an alternate way to re-arrange your content modules. On My Yahoo! you can select a "Change Layout" feature which takes the user to another page allowing them a way to re-order the content modules in lists.
- Module order may not matter as much to a non-sighted user. If the content modules have been created with good structural HTML markup they should be able to move from module to module quickly. However, they may still want to change the order of the content modules allowing them to access the most important modules first.
- When highlighting D&D source and 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.
