Natural mapping
Arranging controls so their position, direction, or order clearly matches what they change, like a stove control beside its burner.
See it
What it is
Natural mapping is a clear relationship between a control and its effect, often created by matching position, direction, order, or scale. A left arrow moves the object left; a row of four controls laid out like four stove burners tells you which control belongs to which burner. Don Norman made the stove example a fixture of interaction design, and his other favorite is the Mercedes-Benz seat adjuster: a small plastic seat on the door panel that you push where you want the real seat to go.
Reach for it whenever several controls affect several objects or one control changes something spatial. Place controls beside what they change, preserve the same ordering, and make movement follow the gesture instead of requiring a label to repair an arbitrary relationship.
The gotcha is that 'natural' depends on context. Reading direction, learned platform conventions, and the physical setup can change which mapping feels obvious. Test with the actual audience, and keep labels when the relationship is learned or ambiguous rather than pretending position alone explains it.
Ask AI for it
Rearrange these controls using natural mapping. Place each control directly beside the object it changes, mirror the objects' visual order with CSS Grid grid-template-areas, and keep directional actions literal: ArrowLeft moves left, ArrowRight moves right, dragging up increases the vertical value, and dragging down decreases it. Connect every control to its visible target with aria-controls, keep text labels where the relationship is ambiguous, and test the layout in both dir='ltr' and dir='rtl' instead of assuming one reading direction.