Perception & Gestalt
Law of Uniform Connectedness
Elements visually connected by a line, arrow, or shared connector are perceived as more related than elements that are simply close together or similarly styled.
Mechanism
Why it happens
A visible connection states a relationship directly instead of implying it, so it's a stronger grouping signal than proximity or similarity and overrides them when the cues conflict.
Impact
Why it matters
- A connector can group items that can't be placed close together, like steps spread across a wide layout
- Without an explicit connection, people fall back on weaker cues like position or colour, which are easy to misread
- Overusing connectors clutters a layout as fast as overusing borders does
Example
Without vs. with
Five checkout steps are shown as five separate circles with no visual link between them, so the sequence isn't obvious.
The same five circles are joined by a single connecting line, with the completed portion filled in, so the sequence and progress are clear at a glance.
Checklist
How to apply it
Use a line or connector to show sequence or relationship when items can't sit close together, like a multi-step tracker
Reserve connectors for genuine relationships. A decorative line implies structure that isn't there
Keep one consistent connector style, a single line weight and colour, across a flow
Pair a connector with a label when the relationship isn't obvious on its own
Where it shows up