ruk·si

🌈 UI
Drag and Drop

Updated at 2015-08-17 23:49

Use separate group edit mode if dragging is not the main functionality. E.g. iPhone home screen icons are primary used to start apps but you can unlock them to rearrange them.

Drag and drop should only be a shortcut in web interfaces. Drag and Drop functionality not discoverable or expected. Provide alternate ways to accomplish the action.

Reveal drag affordances on mouse hover to indicate draggability. Changing mouse cursor is frequent but keep in mind that touch devices don't have cursors.

Provide instant feedback on drag start. Give visual feedback as soon as the user drags an item at least three pixels.

Use the mouse position for drag target positioning.

Ghost the dragged element. Use a slightly transparent version of the object being dragged instead of a fully visible version.

Keep drag distances short. Drag and drop takes surprising amount of mouse dexterity.

Highlight valid drop targets. When a drag gets initiated, highlight the valid drop area to hint where drop is available. Change background or area with dashed outline. For parent-child relationships, highlight the parent as well.

Sources

  • Designing Web Interfaces, Bill Scott, Theresa Neil