← UX laws

Law of Uniform Connectedness

Palmer and Rock, 1994PerceptionInteractive

Things joined by a visible connector are read as one thing, whatever the spacing, the colour or the boxes have to say about it.

Palmer and Rock added this one in 1994, seventy-one years after Wertheimer set out the rest of the Gestalt principles, and it does not sit politely beside them. It outranks them. Two things joined by a visible connector are read as one thing, and spacing, colour and boxes do not get a vote.

That is easy to say and easy to nod at, so the demonstration below is built as an argument instead. Every screen has five squares and one of them carries a dot. A line joins the dotted square to one of the other four. Something else argues for a different square — it sits closer, or it shares a colour, or a box has been drawn around the two of them. You click the one that belongs with the dot.

Nothing here is right or wrong and there is no key. What the page counts is which cue your click agreed with, twelve times, four each against three rivals.

Four more screens carry no argument at all: five squares at equal distance, one colour, one line. Those check the run rather than the law. If they do not come out, the other twelve are not read — somebody clicking to reach the end scores about half on a two-way choice without looking at anything, and there is no way to tell that apart from an opinion unless the uncontested screens hold.

PRESS START BELOW
sixteen screens, one click each
Five squares a screen, in the same five places until a cue moves one. The connector is 1.6 pixels of grey and it is the least conspicuous thing on the screen, which is the point of drawing it that way.

Why a line is different

Proximity, similarity and common region are all statements about a set. They say these few belong together, roughly, and where the set stops is left to you. A connector is not about a set. It names two specific things and joins them, and there is nothing left to work out, which is why it wins while being thin, grey and the ugliest mark on the screen.

It also survives contradiction. When spacing disagrees with a line, the spacing reads as a layout that needs fixing rather than as an argument about grouping. The line is taken as the author's intention and the gap is taken as an accident, even when the gap was the deliberate one.

What it costs you

A rule between two rows joins them. The one-pixel divider you added to separate a list is read by half the people who see it as a bracket holding the rows above and below it together, and no amount of padding will take that back.

You cannot separate with space what you have joined with a stroke. If a line touches two elements, they are one element. Doubling the gap between them makes a longer line, not two groups.

Connectors get drawn by accident. A border that meets another border, a focus ring overlapping the field beneath it, a card edge that happens to run into a divider. None of those were meant as grouping and all of them are read as grouping.

It is the cheapest grouping available and the most expensive to withdraw. One stroke costs nothing to add. Once it is there, every other cue you own is arguing uphill.

I redrew the connector in this rig four times, mostly because two and a half pixels of coral looked better in the figure than a grey hairline did. At 1.6 pixels of grey it still takes the vote. The line does not have to be good.

← UX laws

Where the list comes from. The collection I'm working through is Laws of UX by Jon Yablonski — the canonical version, and worth reading in full. His content is licensed CC BY-NC-ND 4.0, which permits sharing but not rewriting, so none of the wording here is his. The laws themselves belong to the psychologists who found them.

Who wrote it. Claude did. The prose, the demonstrations and the statistics, all of it, working from my direction and my edits. I picked the laws, decided what each page had to prove, and threw out the versions that did not. I would rather say that than let you assume otherwise.