Register
Quick and easy! Create patterns and join discussions on draft patterns! Go here to RegisterLogin
Already a member? Go here to Login now.Browse Patterns
Top Rated Patterns
Contact Us
Drag and Drop - Layout Preview
Design Problem
User needs a way to visually preview the new layout of a group of items after one item is dragged to a new position.
Solution
Provide an in-context preview of the item's new position within the current layout. This preview is visible during the 'dragging' stage of the Drag and Drop action. As the user drags the item across the interface, a preview follows the drag action and indicates the potential new position if dropped.
Depending on the situation, this preview may be a high fidelity copy of the original item, or a low fidelity representation (i.e. a blank box with a dotted line, or a simplified icon). The important thing is that the preview is be the same dimensions and orientation as the original item, so that the user can see precisely what the new configuration will look like before they commit the change by dropping the item.
Use When
This pattern should be used when:
- It isn't possible to make clear how the layout will change using just an indicator of where the dragged item will be inserted (such as a bar or an arrow indicator).
- A user wants to see the visual form (e.g. shape, balance, negative space) of the new layout in order to know whether to drop the object.
- A user wants to see all the objects in their new order before making a decision that they should complete the movement of an object. In this case the preview should likely be a high fidelity copy of the original item.
Some situations where this pattern may be used include:
- Reordering modules in a portal environment, especially if they are different sizes and can move horizontally as well as vertically.
- Repositioning items in a WYSIWYG editor.
How
The activity of List ordering has many interesting moments, and the following list breaks this down.
- When the interface is loaded, items are shown as a list, grid, or other arrangement. Provide some sort of graphic drag affordance or textual description that conveys to the user that dragging is possible using either the mouse or keyboard.
- Mouse hover over a movable item - border is highlighted and cursor changes from arrow to a "drag" icon (e.g. a hand, or a 4-way arrow) to indicate that it can be dragged.
- Mouse Down - Enter "drag" mode. A visual indicator that the user is in a new mode may also be given (e.g. changing item to half-tone).
- Drag Initiated - The user drags the item using the mouse to its new desired location. While dragging is being performed, an avatar (a replica of the item being moved) follows the mouse cursor, while a copy of the object remains in its location to indicate its original location in the layout. Both the avatar and original object should be visually styled as to emphasize the original location and the object being moved.
- Drag Over Valid Position - Preview the new placement by showing a representation of how that item will look at that location. While the preview can be low or high fidelity, it is critical that the preview be as close to the same size and shape of the item being moved.
- Mouse Up - The user is no longer in drag mode. If the user was in the process of dragging an item, this completes the drag action.
- Drag Over Invalid Location - The drop preview "snaps" to the closest valid position (meaning a place where the item is allowed to be dropped).
- Drag Over Original Location - No drop position indicator is shown. If dropped, item will return to its original location.
- Item placed in the drop location - The moved item has a highlighted border and background (the frame) to distinguish it from the other item. The drag avatar disappears and the object is moved from its original location to the new location in the layout. The other items on the interface re-arranged to form the new order.
- Drop Rejected or Drop on Original - Return to the original state (the original ordering). Additionally, the originally selected item remains in Mouse Hover mode.
Unlike the mouse interaction, keyboard actions act directly upon the items without any preview. Therefore an "avatar" and drop target indicator are not needed since the user is moving the item directly.
- When the page is loaded, items are shown as a list, grid, or other arrangement. Provide some sort of graphic drag affordance or textual description that tell the user dragging is possible using either the mouse or keyboard.
- Keyboard selection - User tabs to the movable section, and the first item is selected. This is equivalent to the mouse "hover" action. Provide the user with a stronger visual cue than the one used for mouse "hover" to indicate that an item is actually selected (for example, container border is highlighted and object against a gray background).
- Activating Keyboard Move While the user is holding down the action key (like CTRL or ALT key) , they are in "move" mode. Item changes to half-tone to give the user a visual indicator that they are in a new mode.
- Move Initiated While holding the action key, the user uses another key (like the cursor keys) to move the item to a new location. The item being moved and the item to be displaced swap positions.
- Terminating Keyboard Move - When the action key is released, the user is no longer in move mode. If the user was in the process of moving an item, this completes the action.
Rationale
- When a user is changing the order of a list, the visual context of the item's new position is often important (e.g. to put and item in alphabetical order, you need to see the items before and after it in the list while re-ordering). You can allow the user to 'visualize' the new order and position as they are performing the action by letting them perform drag action on the item directly in the list.
- Avoiding sending the user to a new page for re-ordering creates a more seamless user experience.
Use this pattern with caution, as it can be visually disorienting to users to shift many items around as one item is moved might, or cause them to 'lose their place' within the list.
Accessibility Considerations
Please refer to Drag and Drop pattern for accessibility guidelines.
Hubpages
By Rob (not verified)I think hubpages utilizes this drag & drop style layout coordinator very well.
Rob
staying on point with the eye
By Sori (not verified)The very last sentence where you mention the users losing his or her place is the crux of the issue in this layout. In your example of the Google desktop feed reader above, it can be very difficult to find things once you re-order them because they all look exactly the same. I agree that designers should be careful in using this layout. The biggest advantage is holds, however, is that drag and drop feature which really does make the user experience more personalized.
Post new comment