A2.08.1Uniform connectednessdesignresearch

Elements joined by a visible line are perceived as related

Aliases: connectedness · line-based grouping

What it is

Draw a line, a tether, or a shared edge between two elements, and people see them as a related pair — even when they differ in color, differ in shape, or sit far apart. This cue is called uniform connectedness.

It is not the same thing as "an arrow means direction." Connectedness only establishes that two things are related; whether the relation is sequential, hierarchical, or parallel has to come from the line's own styling (arrowheads, dashing, weight) — the line itself carries relation, not direction.

Why it happens

Proximity and similarity both require the visual system to first identify two separate elements and then compare their distance or appearance. Connectedness skips that two-step comparison, because a line segment that physically joins two endpoints is, at the earliest stage of image processing, already one continuous visual region — the line and whatever sits at its ends get treated as parts of the same whole before either end has even been identified individually.

Because this "is it one whole" judgment happens earlier than identifying the individual elements, the grouping connectedness produces overrides whatever a later comparison of spacing or appearance would suggest — unless the line itself is weak (too thin, too faint, or obscured by other lines).

Studying it

The classic paradigm places a line in direct conflict with proximity and similarity: among three elements, a thin line joins two that are farther apart and differently colored, while the third sits closer to one of them or shares its color. Participants report which two they see as a pair, and the report tracks the line rather than the spacing or color — a finding that holds as long as the line itself is clearly legible, with spacing and color differences contributing almost nothing once it is.

The manipulation changes only whether a line is drawn and which two elements it joins, holding spacing and color fixed, which is what lets the resulting shift in grouping be attributed to the line itself rather than to some other change in the display's overall complexity.

Where it stops holding

Connectedness depends on the line being clearly readable as joining its two ends — a line that is too thin, occluded by other elements, or too low-contrast against the background weakens noticeably, and a truncated stroke that reads as an independent mark rather than a connector will not trigger the effect at all.

When multiple lines cross or run in parallel, which two endpoints a given line actually joins can itself become ambiguous. Whether connectedness still reliably signals "these two belong together" in that situation needs to be checked directly rather than assumed.

Applying it

  • To make an explicit relationship visible — a filter control and the results area it affects, for instance — draw a visible connecting line, even a thin one, rather than relying only on tightened spacing or matched color, especially when other layout constraints prevent adjusting either.
  • Keep the line's weight and contrast legible under the actual production color theme, dark mode included, not just barely visible against the design file's default background.
  • To verify: remove the connecting line, leaving only the elements' spacing and appearance, and see whether users can still guess which two are related. If they cannot, the line was carrying that information on its own, and removing it drops that information entirely.

Related

  • Same group: A2.08.2 Connectedness is the strongest grouping cue · A2.08.3 Crossing lines break the readability of a relationship
  • Nearby: A2.01 Proximity · A2.02 Similarity · A2.07 Common region
  • Search terms: uniform connectedness · connectedness · line-based grouping

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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