H8.03.1drag pickup and drop feedbackdesignresearch

Pickup and drop need unmistakable feedback

Aliases: lift and drop · drop target · grab feedback

What it is

Reordering content by drag is two acts: pick up an item, then drop it in a new slot. Each act needs feedback in the moment—the item leaves its place, an insertion line or gap appears where it will land, and on release it occupies the new slot instead of snapping back. This is visibility of grab and place inside a reorder gesture. Whether a long list scrolls under the finger, and whether buttons can replace the drag, are separate.

Why it happens

Drag turns an object from “clicked” into “held.” Without lift, shadow, or a hole in the old slot, people are unsure the gesture started; they keep pressing, or treat it as a failed tap. Drop depends on an insertion preview: a line or a gap tells the motor system where release will commit. Without it, people guess the midpoint between neighbors, land in the wrong slot, and drag again. The old slot must stay hollow or collapse during the drag, or density never changes and the eyes cannot find a new slot. If the item teleports on release with no brief settle, there is no moment to check “is this the place I meant,” and the next grab becomes more timid.

Studying it

On a reorderable list, move a named item between named neighbors. Compare no pickup state, pickup without an insertion line, and both.

Independent variables: whether the dragged item visually detaches, preview form (line / gap / items making way), whether release has a settle animation. Dependent variables: whether the first drop hits the target slot, mid-gesture re-grabs, accuracy of “it will insert here” reports.

Short lab lists with a pre-pointed target inflate success. Add decoys (section headers that look like drop targets) to test whether the preview marks legal slots. Touch has no hover; the pickup threshold (long-press versus immediate follow) collides with scroll. Record “never picked up” separately from “picked up, inserted wrong.”

Where it stops holding

A two- or three-item list may cost more to pick up than to tap move-up / move-down; clear feedback will not beat a cheaper verb. Grids and free canvases place in two dimensions; the preview is a placeholder rectangle, not a row line. Cross-container drags (list into folder) also have to show whether the container will accept—that is beyond in-list reorder. Viewers without reorder permission should not look grabbable.

Applying it

  • On pickup, lift the item and make it translucent; leave a hole or a collapsed seam. Draw a line or part neighbors at legal insertion points.
  • Illegal drops (headers, read-only regions) get a forbidden cursor or a snap-back, not a silent land on the nearest legal slot.
  • After release, let the item occupy the new slot and pause briefly so the new order can be checked before the next grab.
  • Verify: drag the third item before the first. On recording, the pickup should detach, an insertion preview should appear while crossing the second item, and the landing should match the spoken target. If any step is a guess, feedback is insufficient.

Related

  • Within the group: H8.03.2 Long lists must auto-scroll while dragging · H8.03.3 Reordering needs a non-drag path
  • Adjacent: C3.18 Long-Press Drag to Reorder · C1.08 Drag and Drop · J3.07 Drag-and-drop Alternatives
  • Search terms: drag feedback · drop preview · reorder

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/H8.03.1