Mapping and specific labels

Put controls where they act; name things for what they hold.

From apple-design, §16 Design foundations.

Lay out knobs like burners

Turn on the named burner, then hide the labels.

Turn on: back-left

Knobs in a rowBad
Left rear
Left front
Right front
Right rear
display: flex0 misses
Laid out like burnersGood
grid-template-areas: "bl br" "fl fr"0 misses

Name tabs for their contents

Find the item below in each app.

Find: Personal best

Home · Stuff · MoreBad

Pick a tab.

0 taps
Named for contentsGood

Pick a tab.

0 taps

Never trap the user

Open each flow, then try to leave.

Only exit: ContinueBad

Accounts

No accounts linked.

exits: Continue0 blocked
Steps, back and closeGood

Accounts

No accounts linked.

exits: Esc · scrim · × · Back

Why it matters, pros and cons

Why it matters

People read layout before words. A label patches a weak mapping.

Pros

  • Fewer wrong taps, no extra text.
  • Works at a glance, in any language.
  • A visible exit makes flows safe to start.

Cons

  • Mirroring layout costs space on narrow toolbars.
  • Specific names age; rename when contents outgrow them.
  • Mid-payment flows may need to block leaving.