A2.03.3Breaking continuity to force segmentationdesign

Breaking continuity can force segmentation

Aliases: discontinuity segmentation · pattern interrupt

What it is

If consistent alignment and arrangement create an implied continuous path, then deliberately making the alignment, direction, or rhythm of arrangement shift noticeably at one point cuts that path there, making the eye pause and read what comes before and after as two separate parts. This turns continuity around to produce segmentation, without needing an extra divider line or gap.

Why it happens

Continuity judgments depend on whether a path's direction changes smoothly; once the direction, alignment baseline, or arrangement rhythm at some point shifts enough to exceed what a natural continuation would tolerate, that point gets treated as a break in the path rather than a normal bend in the same path. Content before and after the break no longer shares one implied path, so it's perceived as two independent sequences — even with no extra border or gap between them.

Where it stops holding

The break has to clearly exceed the small deviations that occur naturally in normal layout (font-size rounding, line-height jitter), otherwise it won't be read as a deliberate segmentation signal and will just look like a layout flaw; the break also can't be so subtle that it blends into the surrounding content, or users may not notice anything changed at all.

This segmentation device depends on users already having built a mental expectation of "reading continuously along this path" — if the sequence is too short to establish a stable sense of a path in the first place, a deviation partway through won't read as "a break," just as misalignment.

Applying it

  • To insert a segmentation point within a set of continuously arranged content, prefer making the alignment baseline, direction, or spacing rhythm shift noticeably at that point rather than only adding a thin divider line — the shift itself is enough to signal "this is where it splits."
  • Make the shift's magnitude clearly larger than the normal error range seen elsewhere in the layout, so it isn't mistaken for a layout flaw.
  • To verify, have users skim the layout without knowing where the segmentation point is and report where they felt the content switch, then check whether their reported location matches the intended break.

Related

  • Same group: A2.03.1 the eye tends to continue along a smooth path · A2.03.2 alignment guides reading order
  • Nearby: A2.01.1 nearby elements are perceived as one group · A2.06 figure-ground
  • Search terms: discontinuity · visual segmentation · pattern interrupt

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/A2.03.3