← UX laws

Law of Common Region

Palmer, 1992PerceptionInteractive

A boundary drawn around things puts them in one set, and it does not need them near each other to do it.

Draw a line around some things and they become a set. It is the least subtle of the grouping laws and the one interface design leans on hardest, because a card is cheap and a rewrite of the layout is not.

The interesting claim is the ranking. A boundary is supposed to beat distance, and if that is true then two tiles at opposite ends of the same box belong together more than two tiles touching each other across its edge. That is a strong claim and it is easy to arrange a fair argument about.

Below are nine identical tiles. One carries a tick. A boundary runs across the arrangement and holds the marked tile along with two tiles at the far end of it, four or five columns away. Two more tiles sit directly against the marked one, one row up or down, close enough to touch, and outside the boundary. The rest are neither.

You click everything that belongs with the marked tile and press the button. As many as you like, or none. There is no correct answer and nothing is marked right.

Two of the ten arrangements have no boundary at all. In those the only thing left is distance, and the near tiles should be the ones you pick. They exist so a run that ignores the question can be told apart from a run that answers it, and if they come out wrong the other eight are thrown away.

PRESS START BELOW
ten arrangements, pick as many as you like
Every tile in an arrangement is identical — same size, same fill, same outline — so nothing here is grouping by appearance. A picked tile gets a coral dot in the middle of it, which is the only mark that appears anywhere as you work.

How the eight are counted

Each arrangement offers two tiles inside the boundary and two beside the marked one, so the two numbers are on the same scale. What the page compares is not the totals but the direction of each arrangement — which side you leaned in that one — and then counts how many of the eight leaned the same way. Arrangements where you picked evenly are dropped rather than rounded.

Eight arrangements is a small instrument and the page uses two conditions before it says anything. The direction has to be consistent enough to be unlikely by chance, which needs seven of eight or better, and the difference has to be big enough to matter — at least a fifth of the scale, because a sign test tells you which way, never how far. Consistent and tiny gets its own verdict, and it says the run found a direction and nothing worth calling an effect.

There is one more number under the chart. Four tiles in every arrangement are neither inside the boundary nor beside the marked one, and picking those is the signal that you are being generous rather than grouping. Past a quarter of them the comparison is suppressed.

What it costs you

A container is a claim about membership, and it outranks the layout. Anything you put inside a card joins the things already in it, however far apart they sit and however unrelated they are.

A background tint is a boundary with no edges. Changing the fill behind a run of elements groups them exactly as a border would, which is why a section that only differs by background still reads as a section.

The border you drew for looks is doing work. Every rule, panel and hairline in a layout is making a grouping claim, including the ones added to fill an awkward gap.

Cards paper over structure. A layout with nothing to say can be made to look organised by drawing eight boxes around it, and the boxes will be believed. That is the part worth being careful about, because the reader has no way to tell a real grouping from a decorative one.

The awkward version is the one where the boundary is right and the spacing is wrong. Both cues are firing, the reader sorts it out in favour of the box, and the layout goes on being slightly wrong without anybody being able to point at it.

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