Law of Similarity
Elements sharing visible properties such as shape, color, size, or orientation tend to be perceived as belonging together.
Direct explanation
What it means
Repeated appearance creates membership. A style token therefore carries semantic weight: if unrelated actions look identical, users reasonably infer a relationship that may not exist.
Similarity is fundamental to component systems, legends, and navigation states. Misusing it makes categories and affordances hard to distinguish.
Research anchor: Max Wertheimer, 1923
Research and interpretation
What the research found
Gestalt work demonstrated organization by shared visual properties even when spatial arrangement could support another grouping.
Similarity is a well-established cue whose strength varies by feature, task, attention, and competing grouping factors.
Popular advice versus careful use
Common shorthand: Matching colors always make elements one group.
Use consistent, redundant appearance to encode a real shared role and test it against competing cues.
How designers apply it
- 01
Give all tertiary text actions a consistent treatment.
- 02
Match chart marks to their legend with redundant shape and label cues.
- 03
Use a shared state style across selected navigation items.
Original UI examples
desktop SaaS
Issue tracker
Status chips use consistent shape plus text, while priority uses a separate icon scale.
Two taxonomies do not compete through the same visual channel.
mobile data view
Budget chart
Income categories share one mark family and spending another, with direct labels.
Similarity supports grouping without making hue the only key.
A settings screen
Less effective
Style destructive, primary, and plain navigation actions as identical filled buttons.
Better fit
Reserve filled emphasis for the main commitment and give destructive actions a distinct labeled treatment.
Similarity should reflect behavior, not merely alignment.
Limits and failure modes
No single visual feature dominates all displays, and learned conventions can change which similarity matters.
Common mistakes
- Using one color system for several unrelated meanings.
- Changing component appearance decoratively and breaking learned membership.
When it should not dominate
- When similar styling could conceal materially different consequences.
- When a visible distinction has no underlying semantic value.
Responsible use
Accessibility
Combine color with text, shape, icon, position, or pattern; ensure forced-colors mode and low vision do not erase the only similarity cue.
On mobile: Limit the number of simultaneously active visual taxonomies in a compact view.
Ethics and context
Use the principle to reduce unnecessary effort and improve comprehension. Validate the result with representative users rather than treating a general tendency as a universal instruction.
On desktop: Large displays can support richer legends, but keep each encoded property consistent across panels.
Designer checklist
- List what each repeated style means.
- Check that unrelated items do not share the same signal.
- Test without color and in high-contrast mode.
Check your understanding
Which statement applies Law of Similarity most carefully?
Practice and continue learning
Sources and further reading
- 01Open source
Laws of Organization in Perceptual Forms
Max Wertheimer · 1923 · Psychologische Forschung / York University Classics
Primary research · primary or original source
- 02Open source
A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure–Ground Organization
Johan Wagemans, James H. Elder, Michael Kubovy, Stephen E. Palmer, Mary A. Peterson, Manish Singh, Rüdiger von der Heydt · 2012 · Psychological Bulletin
Peer reviewed review
Continue the graph
Related principles
principle
Law of Proximity
Elements placed nearer one another tend to be perceived as related, especially when the spacing pattern is consistent and other cues do not override it.
principle
Law of Uniform Connectedness
Elements joined by a visible continuous connection tend to be perceived as one unit or as more strongly related than unconnected elements.
phenomenon
Preattentive Processing
Some basic visual features can be detected rapidly across a display before focused inspection of each individual item.