Law of Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

The scenario: an online shop's checkout page — a four-step wizard header, a product search, and a price-range filter. Every element and every word is identical in both versions; only the visual connections (lines, shared borders, joined edges) change. Notice how the first version reads as nine unrelated fragments, the second as three coherent controls.

What's wrong here? The four checkout steps are four floating boxes with uneven gaps — nothing says they form a sequence, or where you are in it. The search field and its “Search” action are separated by a gulf and styled like strangers. And the two price fields sit far apart with no label or connector: are they min and max, quantity, a coupon code? Users must guess at relationships the design refuses to draw.

homegear.shop/checkout

Cart Step 1

Shipping Step 2

Payment Step 3

Confirm Step 4

Add another item before you pay

🔍 What changed

No content changed — the same four steps, one search, and two price fields appear in both versions.
A connecting progress line turns four floating boxes into one sequence, with completed and current steps marked.
Search input and button now share a border and touch — visually one control, so the action is unmistakable.
The price fields gained a “–” connector and a shared label, so “from–to” is understood at a glance.

💼 Explaining it to stakeholders

“Users don't read interfaces, they parse them — and a visible connection is the strongest ‘these belong together’ signal we can send. A line through the checkout steps, a button fused to its search box, a dash between two price fields: a few pixels of connection replace a paragraph of explanation. That means fewer mis-clicks in checkout, and checkout is exactly where confusion costs us revenue.”