← UX laws

Law of Similarity

Wertheimer, 1923PerceptionInteractive

Elements that share an appearance are read as one set, and the sharing does not need them anywhere near each other to do it.

Things that look alike are read as one set. That is the whole law, and stated on its own it is as unarguable as proximity and about as useful. The question worth asking is what happens when appearance and position are pointing at different sets, because in a real layout they usually are.

Below are nine tokens in three clusters of three. The gaps do the obvious thing: 54 units between tokens inside a cluster and 170 between the clusters, which drops to 140 when the clusters stack on a narrow screen. Position says the clusters are the groups. Appearance says something else, because each cluster holds one of each shape, one of each colour or one of each size, so the token that matches the marked one is always in a different cluster.

One token has a short black tick under it. You click the one that goes with it. There is no right answer and nothing is scored as correct.

What makes it a measurement rather than a preference is the counting. The marked token has exactly two neighbours in its own cluster and exactly two matches outside it, never more and never fewer. Someone clicking without looking lands on a mate about half the time, and when they do it is a coin toss between the two. So a run that leans hard one way is leaning against a known chance level, and the page tests it against that rather than against a feeling.

Four of the fourteen arrangements are not a conflict at all. In those the matching token is also the nearest one, and there is a single obvious answer. They are there to check you are reading the question. Get fewer than three of the four and the other ten are thrown away instead of interpreted.

PRESS START BELOW
fourteen arrangements, one click each
Nine tokens, three clusters of three, and every cluster holds one of each appearance. That is what forces the argument: the token that matches the marked one is never in its cluster, and the tokens in its cluster never match it. On a narrow screen the three clusters stack into three rows, and the gap between rows takes over the job the gap between clusters was doing.

What ten arrangements can say

Not much on their own, and the page is built to admit it. Ten conflicts with a fifty-fifty chance level means eight of ten is the first result that clears one in twenty, and seven of ten is not. A run that comes out six to four is a run that found nothing, and it gets told that in those words.

There is a third number underneath both bars: how often you clicked a token that was neither a neighbour nor a match. Those clicks are the honest signal that the arrangement did not group for you at all, and if there are enough of them the comparison is suppressed rather than reported.

What large samples find is that similarity usually wins this particular fight, and that the margin depends on which appearance is carrying it. Colour is the strongest of the three below. Size is the weakest, and it degrades fastest when the sizes are close.

What it costs you

A shared style is a claim of relatedness, made at a distance. Two controls in opposite corners of a screen, in the same colour and the same weight, are a set. That is true whether you meant it, and it does not need them anywhere near each other to be true.

Which is why an accent colour is a scarce resource. The moment it is used for two unrelated jobs, both of them join one set in the reader's eye, and no amount of spacing pulls them apart again.

Anything that looks alike will be assumed to behave alike. A link styled like a button is a button until it disappoints someone. The appearance made the promise before the label had a chance to.

Decorative variation is not free. Making one card in a list a different shade because it looked flat says that card is a different kind of thing. Somebody will spend a moment working out what kind.

The uncomfortable case is the one where you are relying on spacing to separate two sets and the component library has already given both of them the same fill. The gap is doing its work and losing anyway, and nothing in the spacing tokens will tell you why.

← 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.