pattern
Direct manipulation
also called in-place manipulation (community), WYSIWYG (ui-patterns), handles and grips (community), on-canvas editing (community)
Acting on an object by handling the object itself, dragging, resizing, or typing into it, rather than describing the change in a separate control.
Ben Shneiderman named this in the early 1980s, and his three conditions have not aged: the objects of interest are continuously represented on screen, they are acted on by physical gestures rather than by typed syntax, and the operations are rapid, incremental, and reversible, with the result visible immediately. Dragging a rectangle is direct. Selecting a rectangle, opening a position dialog, typing 240, and pressing Apply is the same edit described from a distance.
What direct manipulation buys is the shortest possible loop between intent and feedback. There is no naming step, so nothing has to be identified by a coordinate or a row number; the reader points at the thing. There is no commit step, so a wrong move is visible while it is still a move rather than after it has been applied. That is why the gestures are worth so much when they are paired with undo: if any act can be taken back, the reader can find the right answer by trying, and trying is much faster than calculating.
It is a principle rather than a component, and the site’s components are its vocabulary. Dragging an object to a new place is drag and drop; the small ridged patch that says an object is draggable at all is a drag handle; editing a value where it is displayed instead of in a form is inline editing. A slider is a borderline case worth thinking about: the value is not the object, but the thumb is a continuous representation of it, which is exactly why a slider feels so much more direct than the number field beside it.
Indirection is not the enemy, and treating it as one is how canvases get hard to use. Handles cannot hit a target one pixel wide, cannot align forty objects at once, cannot be reached without a pointer, and cannot be discovered by browsing, because a gesture leaves no trace of itself the way a menu item does. The good answer is almost always both: the handle for the gross move and the number field for the exact one, kept in sync, so nobody has to choose between fast and precise. Where only one can exist, remember that the numeric route is usually the one that a keyboard, a screen reader, and a script can all take.
Which word?
| If you want | say |
|---|---|
| you change the thing by grabbing the thing | direct manipulation |
| editing a value where it is displayed | inline edit |
Related
See also: Affordance · Drag and drop