Skip to content
UX Atlas
Plate PRIN·008 · PrincipleGrid B2 · Rev. 2026-08-14

Natural Mapping

Controls should be arranged to match the thing they control, so the relationship needs no explanation.

PrincipleExpert heuristicIntermediate

Definition

Norman's principle that the relationship between controls and their effects should be as direct as possible, exploiting spatial analogies and cultural conventions so that the mapping is understood without a label or instruction.

Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.

On this plate
  1. 1Definition
  2. 2The stove-top example, in software
  3. 3Mappings that work
  4. 4Mappings worth getting right on screen
  5. 5In practice
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Sources
  9. 9Continue from here

Reach for this when

  • Laying out control panels and settings.
  • Designing charts, legends and data displays.
  • Building direct manipulation interfaces.
  • A control set stands for something with its own spatial or sequential arrangement.

Common mistakes

  • Alphabetical ordering where spatial ordering exists.
  • Mappings that break under right-to-left layouts.
  • Controls physically distant from their effect.

The stove-top example, in software

Norman's canonical example is a cooker where four controls in a row map to four burners in a square, so every user has to read the labels every time. The software equivalents are everywhere: a settings panel whose order does not match the layout it configures, a legend whose order does not match the stacking order of the chart, arrow keys that move something in an unrelated direction.

Where a spatial mapping is available, it removes an entire layer of interpretation.

Mappings that work

  • Sliders that increase to the right, in left-to-right locales, and are mirrored in right-to-left ones.
  • Chart legends ordered to match the visual order of the series, not alphabetically.
  • Panel controls positioned adjacent to the region they affect.
  • Drag handles located where the movement will start.
  • Progress that fills in the direction of reading.
  • Toggle position matching the state: on to the right, off to the left, plus a text label.

Mappings worth getting right on screen

Each of these is a case where the arrangement can match the thing it changes, and often does not.

  • Chart legend ordered to match the order the series appear in.
  • Seat, room or shelf pickers laid out like the space itself.
  • Volume, brightness and size controls that increase upwards or to the right.
  • Form field order matching the document being copied from.
  • Settings grouped in the order the task is performed.
  • Undo and redo positioned in the order they are used.

In practice

  1. i.

    Legend order matching series order

    Data visualisation

    Ordering a stacked area chart legend to match the stacking order removes the constant back-and-forth of matching a colour to a name.

  2. ii.

    Controls next to what they change

    Editors

    Formatting controls placed adjacent to the selected content, rather than in a distant panel, halve the eye travel and make the connection self-evident.

  3. iii.

    The legend in alphabetical order

    A mapping nobody notices being wrong

    Five stacked series in the chart, five labels in the legend, sorted by name. Every reading of the chart required a lookup that ordering the legend to match the stack would have removed.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Affordances and Signifiers

Principle

What an element allows, and the perceptible cue that announces it.

Key difference

An affordance is what the interface makes possible and a signifier is what tells the reader it is possible. Mapping is a separate question: whether the arrangement of controls matches the arrangement of what they change.

Use Natural Mapping when

  • People find the control but operate the wrong thing with it.
  • There are several similar controls and several similar targets.
  • The fix is arrangement or labelling, not visibility.

Use Affordances and Signifiers when

  • The complaint is that people did not realise they could act.
  • The control works but reads as decoration, or the reverse.
  • You are deciding how visible a possibility needs to be.

Learn about Affordances and Signifiers

Local chart

PRIN·008 · Region I · Grid B2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ChartCMP·028 · APPLIED THROUGHSliderCMP·008 · APPLIED THROUGHToggle SwitchCMP·007 · APPLIED THROUGHSortingPAT·005 · APPLIED THROUGHAlignmentFND·003 · APPLIED THROUGHContinuityFND·008 · APPLIED THROUGHData Visualization ColorFND·029 · APPLIED THROUGHInternationalizationWRT·006 · APPLIED THROUGHAffordances and SignifiersPRIN·007 · COMMONLY CONFUSED WITHConstraintsPRIN·009 · RELATED CONCEPTFeedbackPRIN·004 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    The Design of Everyday Things

    D. A. Norman, Basic Books, 1988, revised 2013

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Related concept

Connected closely enough to change how you apply this.