Design drag and drop with a practical alternative
Plan reordering for a creative board with move controls, position feedback, cancellation, and narrow-screen behavior so that dragging is one useful route through the task.
Model reordering independently from dragging
Dragging can make spatial arrangement feel direct, but it cannot be the only way to reorder a board. Someone may use a keyboard, a small touch screen, or a pointer that makes precise movement difficult. Start with the reordering task itself: choose an item, choose a destination, and confirm the new position.
Provide direct movement controls
Provide an alternative such as Move up and Move down, or a Move to position action for longer lists. Keep the item's identity visible while it moves. Explain whether changes save immediately. For a visual board, decide whether reading order follows the spatial arrangement or a separate meaningful sequence. Write the rule as a short contract between the person and the interface: an action has a visible consequence, that consequence has a recognizable state, and the next action remains possible. Sketch the ordinary path and one interruption beside it. This exposes missing information earlier than polishing a single screen. Keep the labels in the sketch close to the eventual product language so that unclear words cannot hide behind annotation.
Reorder an exhibition shortlist two ways
Create a six-item exhibition shortlist. Move the fifth reference to the second position using both dragging and controls. Sketch the picked-up, moving, completed, and canceled states. Include the result when the selected item is already first or last. Identify how the person learns the new position without inspecting every item. Make a paper walkthrough with one card for each important state. Add a second set of cards for an interruption, a changed answer, and a return visit. Someone else should be able to operate the cards using only the visible instructions. Where they need hidden knowledge, note the missing information instead of teaching the intended path. Revise the cards before spending time on detailed visual treatment.
Keep both routes practical
If a dragged item vanishes under a sticky header, the target area needs adjustment. If move buttons shift unpredictably with the item, repeated movement becomes harder. An alternative that opens a complex dialog for every small move may technically exist while making the task unnecessarily demanding. Compare the full effort of both routes. Read every instruction while pretending the preceding explanation was missed. People arrive from links, resume after breaks, and move through content in different ways. Put the necessary context where the action happens. If the same problem recurs in several places, revise the underlying pattern instead of adding a separate warning to each instance. Shared causes usually deserve a coherent design response.
Verify stored order and cancellation
Test reordering with long item names, narrow layouts, and an interrupted save. Confirm that controls remain reachable and that the stored order matches the displayed one after a reload. Keep cancellation distinct from completion. The design succeeds when someone can deliberately place an item and recognize its destination through more than one input method.
Worked decision
Move reference five to position two, then reload. The visible order, announced position, and stored sequence should describe the same result.
References & further reading
Examples and exercises in this guide are original teaching scenarios.
