hashgraph-online Mapping — natural (spatial and physical)
Natural mapping is the form of mapping that requires no learning. The control is positioned where the affected element is, or moves the way the affected element moves, or is shaped like the affected element. The user does not have to think; they reach.
Natural mapping comes in two forms.
Spatial correspondence. The control's position in space matches the affected element's position in space. Stove knobs in a 2×2 grid that mirror the burners. The seat-position controls on a Mercedes-Benz, shaped like a tiny seat — push the headrest forward to recline, push the seat back forward to slide forward. A chart legend whose entries appear in the same vertical order as the data lines they describe, so the topmost legend entry corresponds to the topmost line. A row of speaker volume controls arranged left-to-right in the same order as the speakers in the room.
Physical analogy. The control's motion or shape corresponds to a physical action whose meaning is universally understood — usually because it mimics gravity, force, or direction. Up = more, down = less. Right = forward in time, left = backward. Clockwise = increase, counterclockwise = decrease (in cultures that read left-to-right; the convention is local but extremely strong). Pinch out = zoom in. Pull a slider toward you = grab and bring closer. These mappings are not innate, but they're embodied — users feel them rather than think them — and breaking them generates immediate confusion that no amount of labeling will fix.
Recognizing when natural mapping is available
The form factor either supports natural mapping or it doesn't. A four-burner stove with the burners in a 2×2 grid and physical room for knobs in a 2×2 grid: spatial mapping available. A cooktop with knobs along the front edge and burners behind: spatial mapping not directly available; you'll have to weaken to a labeled or angled approximation. A horizontal slider for an inherently vertical quantity (height, depth, intensity from low-to-high): natural mapping mismatched; consider rotating the slider or changing the metaphor.
The question to ask early in a design is: what is the spatial or physical structure of the thing being controlled, and can the controls share that structure?
Worked examples
A four-burner stove control panel
Bad design: four knobs in a row labeled "FL FR RL RR" (front-left, front-right, rear-left, rear-right). The user has to read the label, decode the abbreviation, locate the burner, and turn the right knob. Three cognitive steps for an action that should require zero. Approximately 5–10% of users will turn the wrong knob in distracted use.
Good design: four knobs in a 2×2 grid, each knob positioned directly in front of (or below) the burner it controls. No label needed. The user reaches for the knob in the position of the burner. The error rate drops near zero.
When the cooktop is too shallow for a 2×2 grid, the next-best approach is to angle the row of knobs so each knob is at least visually closer to its corresponding burner — paired with a small dot or graphic showing the relationship. This is weaker than true spatial correspondence but stronger than abstract labels.
Volume controls on a multi-speaker setup
Bad design: a settings panel labeled "Speaker 1, Speaker 2, Speaker 3, Speaker 4" with sliders. The user does not remember which physical speaker is which.
Good design: a small floor plan showing the speakers in their actual positions, with each volume slider positioned next to its speaker. Or, if a floor plan is too elaborate, a row of sliders arranged in the same left-to-right order as the speakers in the room, with a brief location label ("Living Room — South Wall").
The principle: the user is reasoning about the room, so the controls should be arranged like the room.
Chart legend ordering
Bad design: a multi-line chart with five data series; the legend is alphabetical. The user has to scan the chart, identify a line of interest, then scan the legend to find which series name corresponds to which color. Two scans, with a memory step between.
Good design: the legend is ordered by the vertical position of each line at the right edge of the chart (or the left edge — pick a consistent anchor). The topmost line in the chart has the topmost legend entry. The user's eye traces from the line directly to its label. One scan.
This is a small change with a large effect. It is one of the highest-ROI improvements you can make to a multi-series chart.
Video editor timeline
Bad design: a "skip forward" button positioned at the top of the screen, far from the timeline. A "split clip" command in a menu somewhere.
Good design: skip controls directly under the timeline, where the user is already looking. Split-clip is a button that appears at the playhead — the visual marker on the timeline — when the playhead is positioned over a clip. The control is at the location it affects.
Brightness slider direction
Bad design: a brightness slider where dragging down makes the screen brighter. This violates the up-is-more convention.
Good design: dragging up (or right, depending on orientation) increases brightness. The user does not have to think.
This convention is so strong that violating it triggers visible double-takes from users; many will drag the slider the "right" way the first time, see the wrong result, and pause for a moment of disorientation.
Pinch to zoom
The pinch-to-zoom gesture is a strong physical analogy: you are stretching the image between two fingers, the way you might stretch fabric. Reverse pinch (zoom out) corresponds to crumpling, also intuitive. The mapping is so strong that it crossed cultures and platforms within a few years of being introduced and is now nearly universal.
By contrast, "double-tap to zoom in to a fixed level" is a weaker mapping — there's no physical analogy — and survives only because pinch is also available as the natural-mapping fallback.
When natural mapping is not available
If the form factor or screen real estate makes natural mapping impossible, do not fake it. A diagram next to each control showing what it affects is harder to interpret than a clear label. The hierarchy of fallbacks is:
- Use natural mapping if available.
- Use a strong cultural convention (volume slider direction, gear icon for settings) if natural mapping is unavailable.
- Use a labeled control with an unambiguous label (this is fine — labels are not failure, they're insurance).
- Use a contextual cue that highlights the affected region when the control is touched or hovered (the speaker icon flashes when you adjust speaker 2's volume).
Avoid the temptation to invent a fake spatial mapping (a tiny abstract diagram, a color-code that requires a key) when no real one exists.
Common anti-patterns
Aesthetic uniformity destroying mapping. Designers arrange controls in a clean grid because it looks tidy, ignoring that the controlled elements are not in a corresponding grid. The four-burner stove with knobs in a row is the canonical example. The fix is to choose a layout that mirrors the controlled space, even at some cost to visual neatness.
Inverted directional mappings. A volume slider where down is louder, a "back" button on the right of the screen, a brightness control that goes left-to-right with darker on the right. These are usually accidents of code (a coordinate system was inverted somewhere, and the visual was not corrected) but they read as design failures and generate constant low-grade confusion.
Mapping by color when color is the only cue. Color-coded controls without spatial correspondence ("the red knob controls the red burner") force the user to look at both control and target, then mentally connect them. They also fail entirely for color-blind users. Color is a useful supplement to spatial mapping but a poor replacement.
Animating between unmapped positions. A control whose effect snaps to a new position with no transition forces the user to re-locate the affected element each time. Animated transitions that move from old to new state preserve the mapping by showing the relationship as motion.
Heuristic checklist
Before shipping a new control, ask: Where is the thing being affected, and where is the control? If they are not in the same location or arranged in the same pattern, ask whether they can be. Does the motion of the control correspond to the change in the affected element? If not, can it be made to? If you removed all labels from the controls, could a first-time user still operate them? If yes, the mapping is doing its job.
Related sub-skills
mapping-cultural— for the cases where natural mapping isn't available and you have to fall back to convention.affordance— what the control suggests it can do (mapping picks up where affordance leaves off).proximity— controls that affect the same thing should be close to each other (the layout-level form of mapping).recognition-over-recall— natural mapping is recognition-driven; the user sees and reaches.
See also
references/spatial-correspondence.md— case studies and patterns for spatial mappings, including chart legends, dashboards, and physical control panels.
Source: hashgraph-online/awesome-codex-plugins → plugins/HDeibler/universal-design-principles/plugins/interaction-and-control-principles/skills/mapping-natural/SKILL.md