011 min
The Law of Similarity at a bank's Submit button
In a 2020 article, Aurora Harley of the Nielsen Norman Group (NN/g) described the Message Center on the Synchrony Bank website. A customer who had typed a message saw three buttons, Cancel, Add Attachment and Submit, all in the same green. Nothing marked Submit as the button that sends the message. Users had to stop and work out which one to press.
The same review found the opposite mistake on Tribute.co. An upload icon and the "Record or Upload" button under it had the same red. Users were likely to read the two as one control and expect a click on either to do the same thing. The icon was only decoration and did nothing.
Neither page had a bug. In each case a shared colour made users believe something that was not true. At Synchrony, three actions of very different weight looked equal. At Tribute.co, a picture looked like a control. Both mistakes come from one rule of perception, the Law of Similarity, and a designer can predict its effect before any user meets it.
022 min
What the Law of Similarity actually says
Synchrony's buttons show the first half of the rule: people put things that look alike into one group. The second half is what they do next. Once items form a group, people assume the members share a job and a level of importance.
The shared trait can be any visible property. The main ones are:
- Colour and brightness. Blue words in a paragraph read as one set, separate from the black words.
- Shape. Round pills read as one kind of control, square tiles as another.
- Size. Two large cards in a grid of small ones read as a different type of content.
- Orientation. One tilted item stands apart from a row of upright ones.
- Texture. A striped bar in a chart joins the other striped bars.
- Motion. Items that move at the same speed in the same direction read as one unit.
The items do not need to be identical. One shared trait is enough to start a group, and each extra shared trait makes it stronger. Grouping also saves effort. A reader scans a page as a few sets rather than as dozens of separate items, which is why a well-grouped page feels quick to read.
Similarity also works across distance. Proximity, the nearest related rule, groups items because they sit close together. Similarity groups items wherever they are. That is how a reader finds every link on a long page: the links are spread over many paragraphs, but they share one colour. NN/g calls similarity the most resilient of the grouping principles for this reason. In a direct contest, closeness or a shared container often beats it.
Colour usually wins over the other traits. A shared colour is noticed faster than a shared shape, so colour can join items of different shapes into one set.
From this you can predict cases the examples above do not cover. Give a bold heading the same colour as your links, and some users will try to click it. Give a destructive action the same style as a safe one, and users will treat them as equal choices.
Why common fate is a kind of similarity
Some researchers treat similarity as the general rule behind the other grouping rules. A 2012 review of a century of Gestalt research, led by Johan Wagemans, makes this point. The review points out that grouping by shared motion is similarity in speed, and grouping by closeness is similarity in position. Read this way, the Law of Similarity is the general rule, and common fate and proximity are two special cases of it.
032 min
Where the Law of Similarity comes from
The Law of Similarity is a century old, and it started on paper, not on a screen. It comes from Max Wertheimer, one of the founders of Gestalt psychology. Gestalt is the German word for form or shape. In 1923 Wertheimer published a long paper on how people organise what they see, Untersuchungen zur Lehre von der Gestalt II, in the journal Psychologische Forschung. An English translation, "Laws of Organization in Perceptual Forms", appeared in 1938.
The paper opens with a view from a window. Wertheimer notes that he could, in theory, count 327 separate brightnesses and shades of colour. What he actually sees is a house, some trees and the sky. His question was which rules turn the many parts into a few wholes.
He answered it with simple rows of dots. First he changed the gaps between dots, and the dots grouped by closeness. Then he kept every gap the same and changed only the colour of the dots. Observers now saw pairs or runs of like dots. Wertheimer named this tendency the Factor of Similarity. He added that it works for sound too: with even beats, the soft beats group together and the loud beats group together.
The same paper named the other factors still taught today, among them proximity, common fate and closure. Design writers now usually call them laws or principles, but these dot rows are the original evidence.
Similarity against proximity: the tipping point
Wertheimer also set the two factors against each other. He drew patterns where closeness pointed to one grouping and colour pointed to another. When closeness won, he widened the gaps a little at a time. At some point the grouping flipped and similarity took over. So neither rule always wins. The result depends on how strong each cue is in that layout. Extra space between two same-coloured cards can split them, and the same colour on two distant cards can join them.
042 min
How the Law of Similarity was measured after 1923
Wertheimer showed that similarity and proximity compete. The next question was how much each one weighs, and it took more than eighty years to answer well.
Rush in 1937: similarity worth 1.5 cm
The first systematic attempt came from the psychologist Rush in 1937. She showed observers grids of dots. The gap in one direction stayed fixed, and the gap in the other direction got smaller from trial to trial. She looked for the point where the two groupings balanced and concluded that similarity was worth about 1.5 cm of proximity. The 2012 Wagemans review calls her main assumption incorrect. One balance point cannot measure how strong each cue is on its own. Hochberg and Silverstein ran a similar study in 1956, again pitting similarity against proximity.
Similarity and proximity add together
The cleaner answer came in 2008. Michael Kubovy and Martin van den Berg showed people grids of dots in which dots of the same contrast lined up either along the short gaps or along the long gaps. Each grid appeared for 300 milliseconds, and people reported which direction of lines they saw. Kubovy and van den Berg found that the effects of similarity and proximity add together in a simple way. Neither cue changes how the other one works. For a designer this means the two cues can be traded: a stronger difference in colour can make up for a smaller difference in spacing, and the reverse.
052 min
How the Law of Similarity shows up in real interfaces
Lab results show how strong the Law of Similarity is, but products show what it costs when it goes wrong. Back at Synchrony Bank, one colour on three buttons of different weight slowed users down. Other sites in the same NN/g review show both sides of the rule.
| Trait | Applied well | Violated |
|---|---|---|
| Colour | Links on most text-heavy sites share one colour, so readers find every link on a long page | Synchrony Bank's Message Center gave Submit the same green as Cancel and Add Attachment |
| Clickable cues | Etsy's homepage placed arrow icons beside a variety of clickable elements, so a shared shape, not a colour, signalled "clickable" | Tribute.co gave a decorative upload icon the same red as the button below it |
| Shape | Asos.com shaped its subcategory links as rounded pills and its filters as plain rectangles, so the two sets read as different tools | The Makr tablet app used near-identical icons, two of them exactly the same, for different product categories |
| Size | Anthropologie.com showed collection promotions at double the size of one product listing, marking them as a different kind of content | Content of different types shown at the same size reads as one type |
Each pair shows the same rule from two sides. In the applied cases, the designers wanted a group and the shared trait created it. In the violated cases, the shared trait created a group that nobody wanted, and users acted on it.
The same rule on the road
The Law of Similarity is not limited to screens. The 1968 Vienna Convention on Road Signs and Signals sorts road signs into classes and fixes a shape for each class. In countries that follow it, danger warnings are triangles and prohibitions are circles. A driver approaching a triangle knows it is a warning before reading the symbol inside it. The shape marks the class across thousands of different signs, and the symbol gives the detail. A good design system has the same structure: a shared trait for the kind of thing, and a label for the specific thing.
062 min
Applying the Law of Similarity
For Synchrony, NN/g's advice was simple: keep a separate colour for the primary action, so it stands apart from the secondary buttons. That fix leads to a short set of moves.
Give each function one style, and use it everywhere.
All links one colour, all primary buttons one fill, all secondary buttons one outline, all input fields one shape. A user who learns one member has learned the group. Across a brand, a product family that reuses one button style and one icon shape reads as one family.
Keep the primary style for the primary action.
Use one filled button per form. Cancel and Add Attachment get a quieter style.
Never give a non-interactive element the style of an interactive one.
No link colour on keywords, headings or decorative icons. That was the Tribute.co problem.
Make different things look different.
If two icons stand for two categories, give them clearly different shapes, unlike the Makr icons.
Use size to mark a different type of content,
as Anthropologie did with its collection promotions.
Break the pattern on purpose for the one item that matters.
In a row of matching items, the single item that differs is the one people find first.
When applying the Law of Similarity backfires
Too much sameness.
When every card, button and heading shares one style, the page loses its visual hierarchy, and nothing tells the user where to start.
A shared shape hides labels.
NN/g warns that when items share a shape, people may assume they are the same and skip their labels and small differences. Two identical cards for "Delete project" and "Archive project" make the wrong click likely.
A colour's meaning is learned, not fixed.
The same red can mean an error in one product and a sale in another. Similarity tells users that items belong together. It does not tell them what the group means, so a label or a legend still has to do that.
071 min
The Law of Similarity and colour vision
A group built only from colour does not exist for every user. WCAG 2.2 Success Criterion 1.4.1, Use of Color (Level A), requires that colour is not the only visual means of showing information, an action, a prompt or a difference between elements. People with colour vision deficiency, people with partial sight and many older users may not see the shared colour. If they cannot see it, they cannot see the group.
So give every colour group a second shared trait. Links get an underline as well as a colour. Chart series get different marker shapes or line patterns as well as different colours. Error fields get an icon and a message, not only a red border. Then the group still exists for a user who cannot tell the colours apart. WCAG allows one exception: visited and unvisited links may differ by colour alone.
081 min
How to spot the Law of Similarity going wrong
Because the Law of Similarity works without anyone noticing it, its failures show up in behaviour rather than in feedback. These are signs you can check in session recordings, tests and ticket queues:
- Clicks on coloured words, headings or icons that do nothing, the Tribute.co pattern.
- Users who pause, hover between buttons, or press the wrong one on a form where every button looks the same, the Synchrony pattern.
- Users who open the wrong one of two look-alike icons, or treat two different categories as one, the Makr pattern.
- A greyscale screenshot or a colour-blindness filter in which a group you designed disappears.
- A design audit that finds one colour token used for both interactive and decorative elements.
092 min
Where the evidence on the Law of Similarity is contested
The Law of Similarity is easy to apply, but the research behind it is less settled than most design lists suggest. Three findings complicate it.
Similarity is a weak cue in natural scenes
In 2002, James Elder and Richard Goldberg measured how much each grouping cue helps the eye decide which edges in a photograph belong together. In their data, closeness removed about 75% of the uncertainty about which edges belonged together, and similarity removed about 10%. In the cluttered world outside a screen, closeness does most of the grouping. On a screen a designer controls every cue, so similarity can be made strong, but it should not be expected to beat a large gap or a box.
Does grouping by similarity need attention?
In 1992, Arien Mack and colleagues asked people to do a demanding task while a pattern sat in the background. Afterwards the people could not report how the background elements had grouped, so the team argued that grouping needs attention. In 1997, Cathleen Moore and Howard Egeth measured the effect of the pattern instead of asking about it. Background dots that, once grouped, formed the shape of a classic line-length illusion still changed which line people judged longer. In 2006, Dominique Lamy, Hannah Segal and Lital Ruderman removed a flaw in that test and got the same result. Their conclusion was that grouping can happen without attention, even when people cannot report the groups they formed. For design, this has two consequences: users may never consciously notice your colour groups, but the groups still shape what they do.
Misreading: similarity alone makes the groups
Design lists often present similarity as the whole story. In 2022, Baingio Pinna, Daniele Porcheddu and Jurgis Skilters argued that it is not. In their account, differences draw the borders between groups, and likeness holds the members of each group together. A single red dot among black dots stands out because of a difference, not a likeness. For a layout, this means a group needs a clear difference from its neighbours as much as it needs sameness inside.
None of these findings reverses the rule. They limit it. While the details stay open, use similarity together with spacing and containers rather than alone, and test the result with real users instead of trusting the rule on paper.
102 min
Law of Similarity vs. nearby concepts
Most confusion about the Law of Similarity comes from related rules, which also decide which items people see as a group. One axis separates each of them from it.
| Concept | What it says | The axis that separates it from similarity |
|---|---|---|
| DesignProximity | ||
| DesignLaw of Common Region | ||
| PsychologyVon Restorff effect | ||
| DesignLaw of Prägnanz | ||
| Not in the library yetConsistency |
The pair that matters most in daily work is similarity and common region. A card layout uses both, and when they disagree, the border usually wins. If two cards share a style but sit in different boxes, users will read them as two separate groups.
?4 questions
Questions people ask
Is the Law of Similarity a real law?
Does the Law of Similarity apply to typography?
How does the Law of Similarity apply to charts?
What are the other Gestalt grouping principles?
§8 sources
Sources for the Law of Similarity
Wertheimer, M. (1923). Untersuchungen zur Lehre von der Gestalt II. Psychologische Forschung, 4, 301–350.
Wertheimer, M. (1923/1938). Laws of Organization in Perceptual Forms, English translation in W. Ellis, A Source Book of Gestalt Psychology. Classics in the History of Psychology, York University.
Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. This review is the source here for Rush (1937), Hochberg and Silverstein (1956), Elder and Goldberg (2002) and Kubovy and van den Berg (2008).
Harley, A. (2020). Similarity Principle in Visual Design. Nielsen Norman Group.
Show all 8 sourcesShow fewer sources
Lamy, D., Segal, H., & Ruderman, L. (2006). Grouping does not require attention. Perception & Psychophysics, 68(1), 17–31. This paper is the source here for Mack et al. (1992) and Moore and Egeth (1997).
Pinna, B., Porcheddu, D., & Skilters, J. (2022). Similarity and Dissimilarity in Perceptual Organization: On the Complexity of the Gestalt Principle of Similarity. Vision, 6(3), 39.
W3C (2023). Understanding Success Criterion 1.4.1: Use of Color. Web Content Accessibility Guidelines 2.2.
Wikipedia. Vienna Convention on Road Signs and Signals, a summary of the 1968 treaty and its sign classes.