012 min
The ballot that shows why Gestalt principles matter
On 7 November 2000, voters in Palm Beach County, Florida, used a paper ballot with the presidential candidates' names in two lists, one on each facing page. A single column of punch holes ran down the middle, between the two lists. The holes alternated between the sides: the first hole went with the first name on the left, the second hole with the first name on the right, and so on.
George W. Bush was first on the left page, so the first hole was his. Al Gore was second on the left page. But the second hole, marked 4, belonged to Pat Buchanan, the first name on the right page. Gore's hole was the third one.
A voter who wanted Gore read down the left column, saw Gore in second place, and punched the second hole. That hole was Buchanan's.
In 2001, six political scientists led by Jonathan Wand compared Buchanan's Election Day votes in the county with absentee ballots, which did not use this layout, and with his results across Florida. They concluded that, because of the ballot, at least 2,000 Democratic supporters chose Buchanan by mistake. Bush's certified winning margin in the whole state was smaller than that number.
Nobody misread a word on that ballot. The names were spelled correctly and the instructions were printed. The failure happened earlier, when the eye decided which hole went with which name. Both the name and the hole were second in their columns, so they looked like a pair. The rules that describe how the eye makes that decision are called the Gestalt principles.
023 min
What the Gestalt principles actually say
The Gore voters were doing what every eye does: grouping first and reading second. Gestalt is the German word for form or shape. The Gestalt principles describe the cues vision uses to turn many separate marks into a few whole objects. The grouping is fast and needs no effort, and it happens before a person chooses to look at anything in detail.
Max Wertheimer opened his 1923 paper on the subject with a scene at a window. He saw a house, trees and sky. In theory, he wrote, he could have counted 327 separate brightnesses and shades of colour. He did not see 327 patches. He saw a house, trees and sky.
Each principle names one cue the eye uses to decide what belongs together:
| Principle | What the eye groups | Where it shows up on a screen |
|---|---|---|
| Proximity | Items that sit close together | A label placed nearer its own field than the next one |
| Similarity | Items that share colour, shape, size or style | All links in one colour, all main buttons in one style |
| Continuity | Items placed along one line or smooth curve | Steps in a progress bar |
| Closure | Gaps that complete a familiar shape | Icons drawn with broken outlines |
| Figure-ground | One shape seen in front of a background | A dialog box over a dimmed page |
| Common region | Items inside one border or shaded area | Cards, and grouped rows in a settings list |
| Uniform connectedness | Items joined by a line or a shared surface | Steps joined by a line in a checkout flow |
| Common fate | Items that move or change together | Icons that shake together in edit mode |
| Symmetry and parallelism | Shapes that mirror each other or run side by side | A centred block of content read as one unit |
Each of the first six has its own entry in this library: proximity, similarity, continuity, closure, figure-ground and common region. The law of Prägnanz is the general rule behind them all. Prägnanz is German for conciseness. The law says the eye settles on the simplest, most stable reading of a scene. The other principles describe the specific cues it uses to find that reading.
Why the lists of Gestalt principles differ
Design guides list anywhere from five to twelve Gestalt principles. Longer lists add four properties that describe what grouping produces, rather than a single cue:
- Emergence: the whole shape is recognised before its parts.
- Reification: the eye fills in shape and edges that are not drawn.
- Multistability: an ambiguous picture flips between two readings, never showing both at once.
- Invariance: a shape is still recognised when it is rotated, scaled or distorted.
Some lists also add past experience, area (smaller shapes tend to be seen as the figure), or a focal point. Wertheimer himself named past experience as one factor. A focal point is a useful idea in layout, but it describes attention, not grouping.
The phrase most often repeated about all this is that the whole is greater than the sum of its parts. The Berlin school's claim was different. A whole has properties of its own, and those properties change how each part looks. The whole is not the parts plus something extra. It is a different thing.
032 min
Where the Gestalt principles come from
Wertheimer was not the first to notice that wholes behave differently from their parts. In 1890 the Austrian philosopher Christian von Ehrenfels pointed to melodies. A tune is recognised as the same tune when it is played in a new key, even though every note has changed. He called this a Gestalt quality.
Wertheimer took the idea further. Many historians date Gestalt psychology from Wertheimer's 1912 paper on phi motion. In that work, two lights flashed one after the other at the right timing were seen as one light moving. Nothing moved. The motion existed only in how the pair was perceived.
Wertheimer worked with Wolfgang Köhler and Kurt Koffka, and the group became known as the Berlin school. They argued against structuralism, the leading view of the time, which held that perception is built up from small units of sensation. For the Berlin school, the structured whole came first and the parts were understood through it.
His 1923 paper, Laws of Organization in Perceptual Forms, set out the grouping principles that designers still use. The method was plain. He printed rows of dots and short lines and changed one thing at a time: the spacing, the colour, the direction. When only the spacing changed, people saw the closer dots as pairs. When the spacing stayed even and the colour changed, he described a tendency of similar parts to group together. He also printed patterns where similarity won against spacing. That was the first sign that the principles can compete.
042 min
When Gestalt principles compete
Back in Palm Beach, two cues pointed to different holes. Gore's name was second in its column, so reading order paired it with the second hole. The correct pairing depended on following each name sideways to its own hole. Real layouts almost always carry several cues at once. The design question is which cue wins, and by how much.
Rush's attempt to trade similarity for spacing
In 1937 a psychologist named Rush tried to measure one principle against another. She showed people grids of dots and moved the dots closer together in one direction from trial to trial, until spacing and similarity were in balance. She concluded that similarity was worth about 1.5 cm of proximity. Later researchers judged the method flawed. A single balance point cannot show how the two cues combine at other strengths.
Spacing is judged in relative terms
Later work used dot grids where the dots could be read as rows in several directions. Michael Kubovy and his colleagues found that which rows people saw depended only on the relative distances between dots. The angle between the possible rows made no difference. For a layout, this means no fixed number of pixels creates a group. What matters is that the gap inside a group is clearly smaller than the gap between groups.
When cues agree, their effects add up
In 2008 Kubovy and van den Berg changed spacing and contrast together in the same dot grids. When spacing and contrast were varied together, their effects added up. The pull of one cue did not depend on the level of the other. Their paper named the result after the slogan it reverses: in this measure, the whole was equal to the sum of its parts.
052 min
How Gestalt principles show up in real interfaces
The ballot was printed on paper, and screens fail in the same ways. Interfaces use these cues because they need no words and leave less text to read. Several patterns can be checked on any phone:
- Grouped settings. The Settings app on iPhone shows rows in rounded blocks with a gap between blocks. Spacing and the shared background tell the user which settings belong together before any heading is read.
- Search results. On a Google results page, each result's title, address and summary sit close together, with more space before the next result. Spacing alone separates one result from the next.
- Navigation. A row of links in one style, spaced evenly, reads as one menu.
- Edit mode. When a user holds an icon on the iPhone home screen, the icons start to shake together. Common fate tells the user that every icon is now in the same editable state.
- Logos. The WWF panda is drawn as separate black shapes, with no outline around the white parts. Closure lets the eye complete the body.
The same cues mislead when they disagree with the meaning. A common case is a form where each label sits exactly halfway between two fields. The label is as close to the field above as to the field below, so spacing gives no answer, and users type into the wrong box. Another is a page where every section has a border, a shadow and its own background. When everything is enclosed, enclosure stops marking anything as related.
The GOV.UK date input
The UK government's design system shows the principles applied with care. Its date input asks for day, month and year in three short boxes placed side by side, close together, under one question. The visual grouping is matched in the code: the three fields sit inside a fieldset element with a legend that names the question. A screen reader therefore announces the three boxes as one group, just as a sighted user sees them.
062 min
A second case: Gestalt grouping across cultures
Every example so far assumes that all viewers group a scene in the same way. In 1977 the psychologist David Navon showed people large letters made of small letters. They identified the large letter faster than the small ones, and he called this global precedence. Navon treated the bias toward the whole as true for everyone.
In 2008 Jules Davidoff, Elisabeth Fonteneau and Joël Fagot took a version of this test to the Himba, who live a traditional life in remote rural settlements in northern Namibia. Each person saw a target figure and two others below it. One matched the target's large shape. The other matched its small parts. People chose which of the two looked most like the target.
The British participants chose the match on the large shape about 80% of the time, while the Himba chose the match on the small parts about 85% of the time. The authors described the Himba preference for detail as stronger than any found before in a population without a clinical condition. Later work by the same research group linked part of the difference to how much contact people had with towns.
For designers, the lesson is narrow but real. Seeing the overall shape first is a strong habit, but it is partly learned. A layout that depends on the eye taking in a large pattern before its parts is safest when it is tested with the people who will use it.
073 min
Where the Gestalt principles are contested
The Himba results reopened an old argument about where Gestalt principles come from, and that argument is older than most design guides.
A theory of brain fields that failed
The Berlin school believed the principles reflected how the brain itself is organised. Köhler proposed that electrical fields across the cortex took the same shape as what a person saw. In 1951 Karl Lashley's team placed metal strips and pins across the visual cortex of monkeys to short-circuit any such currents. The monkeys could still tell learned shapes apart. In 1955 Roger Sperry's team got the same result in cats. Those two studies ruled out the field theory as an explanation of how the brain groups what it sees.
Demonstrations, not measurements
Design guides often call these principles laws, as if they were exact like the laws of physics. Critics after the Second World War made the opposite case. They said the Gestalt school offered demonstrations instead of experiments, stated its laws loosely, and added a new law for each new effect it found. Much of the dot-grid work described above was an answer to that criticism. A fair reading today: the principles reliably predict the direction of grouping, but only some have been measured, and a printed demonstration does not say how strong a cue is in a real layout.
Synchrony: a cue still in dispute
Some researchers add synchrony to the list: items that change at the same moment, without moving, are grouped. Whether this cue exists on its own, apart from motion, is still argued. The current review of the field calls both its existence and its mechanism unclear. A designer should not rely on a shared flash or colour change alone to show that items belong together.
Learned from the world, not built in?
A common explanation in design guides is evolutionary: grouping helps an animal pick out an outline against leaves and grass. A more testable version comes from photographs of nature. In 2001 Wilson Geisler and his colleagues measured how short edges line up in natural images. Edges on the same object boundary tend to continue smoothly in the same direction. The statistics they found closely matched how strongly people group by good continuation. If the eye groups smooth lines because objects in the world have smooth edges, the principle could be learned from experience rather than fixed at birth.
A network that completes gaps
In 2019 a team at Google led by Been Kim tested the same idea with a neural network. The network had been trained only to sort ordinary photographs into categories. When the team showed it edge fragments arranged around gaps, its internal response was similar to its response to a complete outline. Closure appeared in a system that was never taught it. The authors argued that adapting to the structure of natural scenes might be enough to produce the Gestalt laws.
None of this changes what works on a screen. Whether the principles are inborn or learned, the cues work on most people most of the time. What it changes is how far to trust them with an audience very different from the design team.
081 min
Gestalt principles vs. nearby concepts
Because the term is broad, it is often mixed up with ideas that sit next to it. The most useful line to draw is with visual hierarchy.
| Concept | What it covers | How it differs from Gestalt principles |
|---|---|---|
| Visual hierarchy | The order in which items are noticed: first, second, third | Gestalt principles decide what belongs together. Hierarchy decides what matters most. A layout can group well and still have no clear first item. |
| Cognitive load | The mental effort a task demands | Good grouping can lower it, but cognitive load is about memory and effort, not about what is seen as one unit. |
| A single principle, such as proximity | One grouping cue | Gestalt principles is the name for the whole family of cues. |
| Gestalt therapy | A form of psychotherapy developed by Fritz and Laura Perls | It shares the German word, not the theory. It has nothing to do with how layouts are seen. |
When a design review mixes these up, the fixes go wrong. A team that wants the Buy button noticed first needs hierarchy: size, contrast, position. A team whose users cannot tell which price goes with which plan needs grouping.
091 min
Gestalt principles and accessibility
That difference has one more consequence: both grouping and hierarchy exist only for people who can see the layout. A screen reader user hears a page in order. They get none of the spacing, borders or colour that tell a sighted user what belongs together.
WCAG 2.2 Success Criterion 1.3.1, Info and Relationships, covers this case. It requires that structure and relationships shown on screen can also be read by software, or are given in text. In practice, every visual group needs a matching group in the code: a fieldset and legend for related form fields, a list for a set of links, a heading for each section.
Grouping by colour alone causes a second problem. People with colour vision deficiency may not see the shared colour that makes items look similar. Success Criterion 1.4.1, Use of Color, says colour must not be the only visual way to convey information or to distinguish one element from another. Pair colour with a shape, a label, an icon or a position.
102 min
Applying Gestalt principles
Put together, the research and the standards give a short list of moves for any layout.
Make the gap inside a group clearly smaller than the gap between groups.
Spacing works on relative distance, so choose a spacing scale and use the small steps inside groups and the large steps between them.
Use one strong cue per relationship.
If spacing already groups a card's content, it may not need a border as well. Add enclosure when spacing alone is unclear.
Keep similar things similar, and different things different.
If links and plain text share a colour, users cannot tell them apart. If two buttons do different jobs, do not give them the same style.
Check the layout by blurring it.
Squint, or look at a screenshot in grayscale and out of focus. The groups you still see are the groups users will see first.
Match the code to the picture.
For every visual group, check that a matching element exists in the markup.
Test with people from your real audience
, especially when they differ from the design team.
When applying Gestalt principles makes things worse
Grouping cues can hide information as well as show it. Too much enclosure makes every block look equal. Strict symmetry can force unrelated items into matching positions, so they look related. When many items move at once, users watch the motion and stop telling the items apart. A strong group can also make one item look like part of the wrong set.
Signs that a grouping is failing
- Users type into the field next to the one they meant.
- Clicks land on the item beside the intended one, in the same place, across many sessions.
- Support questions ask which price, date or option goes with which item.
- In session recordings, the pointer moves back and forth between two items before a click.
The fix for the Palm Beach ballot shows the method in one move. Put each name and its hole in one row, on one side, with nothing between them. Then reading order, spacing and alignment all point to the same hole.
?4 questions
Questions people ask
Are Gestalt principles the same as UX laws?
Do Gestalt principles apply to sound?
Which Gestalt principle is the strongest?
How are Gestalt principles used in charts?
§10 sources
Sources
Max Wertheimer, Laws of Organization in Perceptual Forms, 1923, English translation in W. D. Ellis, A Source Book of Gestalt Psychology, 1938. Classics in the History of Psychology, York University.
Johan Wagemans, James H. Elder, Michael Kubovy, Stephen E. Palmer, Mary A. Peterson, Manish Singh and Rüdiger von der Heydt, "A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization", Psychological Bulletin, 2012 (publisher PDF hosted at Rutgers University).
Jonathan N. Wand, Kenneth W. Shotts, Jasjeet S. Sekhon, Walter R. Mebane Jr., Michael C. Herron and Henry E. Brady, "The Butterfly Did It: The Aberrant Vote for Buchanan in Palm Beach County, Florida", American Political Science Review, 2001.
Jules Davidoff, Elisabeth Fonteneau and Joël Fagot, "Local and global processing: Observations from a remote culture", Cognition, 2008 (repository record, Goldsmiths, University of London).
Show all 10 sourcesShow fewer sources
Serge Caparos, Karina J. Linnell and Isabelle Blanchette, "The local perceptual bias of a non-remote and educated population", Psychological Research, 2019 (author copy).
Been Kim, Emily Reif, Martin Wattenberg, Samy Bengio and Michael C. Mozer, "Neural Networks Trained on Natural Scenes Exhibit Gestalt Closure", arXiv, 2019.
W3C, "Understanding Success Criterion 1.3.1: Info and Relationships", WCAG 2.2.
W3C, "Understanding Success Criterion 1.4.1: Use of Color", WCAG 2.2.
GOV.UK Design System, "Date input".
Interaction Design Foundation, "The Gestalt Principles" (further reading).