F2.06.3dividers cannot fix proximitydesign

A divider cannot rescue a wrong spacing relation

Aliases: divider · hairline · rule as patch

What it is

Two packs of settings rows share the same gap as rows inside a pack, so someone drops a 1 px rule in the middle and hopes the rule will announce a cut. When leftover on both sides of the rule is equal, it reads as decoration inside a group, not as a boundary — the nonsense horizontal in the middle of a paragraph. If every field has a line and sections only get a slightly thicker one, the lines become wallpaper and sections still do not pop.

A line will not fix a reversed inequality. Get the inequality right, then decide whether you still want the line.

Why it happens

Grouping cues have strength. Proximity arrives early and strong; a hairline is a weak partition. Equal leftover on both sides: proximity says “same group,” the line says “maybe a border,” and the early cue wins. People still hesitate on the boundary for a beat. That beat is the failed rescue.

Lines also habituate. A screenful of them stops meaning “cut” and starts meaning “this is a list.” To section, the line has to sit on a gap that is already larger, as reinforcement, not as the only signal. A thicker rule or a tinted bar can overpower wrong spacing for a while; the moment that same thick rule appears inside a group, the cue devalues again.

Where it stops holding

Tables, timelines, code gutters: the line is the structure (cells, a track), not a patch. High-contrast modes may force separators; that is the platform talking. On extremely dense, narrow lists, spacing has hit the floor and a line is sometimes the last weak cue — even then, stealing 4 px of between-group difference is sturdier than a line alone.

Cards that already group with fill and radius usually make between-card rules a duplicate signal. Delete the line, not the gap.

Applying it

  • In review, hide every divider (kill borders in the inspector). If groups remain, the line is optional. If groups vanish, go back to spacing.
  • Where a line is still wanted, draw it only on the already-wider between-group seam. Default in-group to no line.
  • How to check: two captures, rules on and rules off. Ask people to circle groups. Correct with rules off: you can skip the line. Wrong off, right on: you were propping with ink — fix spacing until circling works without the line, then decide. Wrong on both: the line did no work at all.

Related

  • Same group: F2.06.1 In-group gaps must be clearly smaller than between-group gaps · F2.06.2 Label-to-control gap is where the rule shows most clearly
  • Nearby: E4.20 Dividers versus whitespace · F2.04 Whitespace · F2.08 Card layout
  • Search terms: divider · hairline · grouping cue · common region

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F2.06.3