lei
Law of proximity
Objects that are close to one another tend to be perceived as belonging to the same group.
What belongs to the same subject sits together; distance is already information.
Before you read anything on a screen, your brain has already decided what is a group. That organisation happens in the earliest stages of vision, without passing through consciousness, and distance is one of the cues it uses: what is close becomes a set. The Gestalt laws are not rules of aesthetics invented by designers, they are the description of how that automatic grouping works. Working against it forces the person to undo the group before reading.
What the brain does with it
The biological mechanism behind the effect, and how much of it was actually measured.
Nearby objects are grouped in the earliest stages of visual processing, before the person realises they have looked. Those earliest stages are V1The first area of the brain, right at the back of the head, to receive what the eye sent. It is where the image becomes contrast, edge and orientation, before you recognise what you are looking at.See it in Senses and attention →See in the glossary → and V2The area right after V1. It joins the edges V1 detected, separates figure from ground and decides which elements form a group, all of it before you notice you looked.See it in Senses and attention →See in the glossary →, where the visual cortex already joins and separates elements without the person deciding to group them, as RoelfsemaOne reference in this work:2006Cortical algorithms for perceptual groupingSee in the bibliography → reviewed in 2006. What was measured there was grouping in the laboratory, and carrying that over to the spacing rule that design uses is my bridge. What the evidence does not support is the ranking: proximity does not beat similarity by nature. The cues combine and cancel each other out according to the relative strength of each one in that arrangement. Generous spacing loses to a strong colour difference, and beats it when the difference is subtle. Whoever has to decide on the screen measures, instead of consulting a table of precedence.
The body this law presumes
Who it was measured on, and what changes when the body on the other side is another.
For a screen reader, grouping is markup, not distance. Whoever uses magnification sees one slice of the screen at a time and loses proximity along with the field of view.
How design translates it
What to do with it on a screen, without turning a finding into a rule.
How to measure this in your product
A search icon two centimetres away from the text field forces the person to connect the two in their head before using it. Placing search and filters together, inside the same container, delivers the grouping ready-made, and the same goes for label and field: a label stuck to the wrong field misleads even with the right text, because the distance was read before the word.
Where it breaks
Where the law does not hold, holds less, or holds in reverse.
Tight spacing to save screen space groups what does not belong to the same group. Accidental proximity is read as intention, and nobody reads the label to check.
Um caso
A real product where this showed up, with what happened and where to check it.
The hole closest to the name was not the candidate’s
Condado de Palm Beach, cédula oficial · via Wikimedia Commons · Domínio público
In the 2000 presidential election, the Palm Beach ballot, in Florida, listed the candidates in two columns with a single row of holes in the middle. The first hole was Bush’s, first name on the left. The second was Buchanan’s, first name on the right. Gore, second name on the left, corresponded to the third hole. Whoever read the left-hand column from top to bottom concluded that the first two holes were Bush and Gore, in that order. Buchanan received 3,407 votes in the county, and the study estimates that at least two thousand people who meant to vote for Gore voted for him by mistake, in an election decided in the state by 537 votes. The ballot had arrows linking each name to its hole, and the arrows lost to distance. In a form laid out in columns, proximity is read before the arrows and the labels.
Experimente
A piece to check in your own body what the text has just claimed.
Space decides what seems to belong together
Drag the controls to change only the spacing between the dots. Colour, size and number stay the same. Notice when you start seeing rows and when you start seeing columns.
No dominant grouping — the grid looks uniform.
Now vote
A ballot with the Palm Beach layout. Vote for Gore: click his punch hole.
Clique num furo.
The dots never change colour or shape. Increase only the space between columns and you start seeing columns, because the vertical distance becomes smaller and that is what the eye groups by. Increase only the space between rows and the effect reverses. Grouping happens in the earliest stages of vision, before any conscious reading of the content.
Neighbouring concepts
Structures linked by a bridge of my own
Sibling concepts
Fontes
Enunciado formulated by Wertheimer, 1923, and consolidated by Koffka, 1935. The sentence is the current wording in the field, not a literal quotation from either.
- KOFFKA, K. Principles of Gestalt psychology. New York: Harcourt Brace, 1935. DOI
- WERTHEIMER, M. Untersuchungen zur Lehre von der Gestalt II. Psychologische Forschung, v. 4, p. 301-350, 1923. DOI
Leitura complementar: Law of Proximity Laws of UX em inglês