Similarity
Elements that look alike are perceived as related, helping to quickly identify patterns and groupings
Overview
Definition
What is the Similarity principle?
The Gestalt principle of Similarity states that when visual elements share characteristics such as color, shape, size, orientation, or texture, our brains automatically perceive them as part of the same group. First documented by German psychologists in the 1920s, this principle explains why a row of identical icons reads as a single set, while one element styled differently instantly stands apart.
In user interface and UX design, similarity is one of the most powerful tools for creating order without adding borders or labels. Designers use consistent styling to signal that buttons behave the same way, that navigation links belong together, or that a group of cards represents related content. Because the grouping happens pre-attentively — before conscious thought — users understand the structure of an interface in milliseconds.
The flip side is just as important: when elements look alike but are not related, users assume a connection that does not exist, leading to confusion and mis-clicks. Effective designers apply similarity deliberately, pairing it with contrast to break patterns and draw attention to primary actions, errors, or selected states.
Takeaways
Pattern Recognition
Our brains automatically group elements that share visual properties
Visual Properties
Color, shape, size, orientation, and texture can all establish similarity
Relational Strength
Multiple shared properties create stronger grouping
Avoid Accidental Similarity
Ensure unrelated elements are visually distinct to prevent confusion
When to Use
- •
Use consistent styles for navigation menus
- •
Group related elements with shared colors or shapes
- •
Apply uniform styles to product cards or lists
- •
Highlight active states with consistent design
- •
Create visual alignment for form fields and labels
When Not to Use
- •
Using similar styles for aesthetics, conflating distinct interactions
- •
Avoid uniformity when emphasizing hierarchy
- •
When unrelated items might appear connected
- •
If distinct designs improve usability
Common Pitfalls
- •
Making unrelated elements look similar
- •
Overusing uniform styles, reducing clarity
- •
Neglecting visual priority for key actions
- •
Failing to update active states consistently
Examples in Action
See how Similarity works in real design
Interactive UXcel lessons to help you apply Similarity and other design fundamentals.
Affiliate link — free to start, and you'll get 25% off if you upgrade to Pro. We earn a commission at no extra cost to you.
Dive Deeper
Similarity Principle in Visual Design
Nielson Norman Group / Aurora Harley
Similarity Principle in Visual Design
Nielson Norman Group / Aurora Harley
The Law of Similarity
Interaction Design Foundation
The Law of Similarity
Interaction Design Foundation
The Gestalt Principle of Similarity Benefits Visual Working Memory
PubMed Central / Dwight J Peterson, Marian E Berryhill
The Gestalt Principle of Similarity Benefits Visual Working Memory
PubMed Central / Dwight J Peterson, Marian E Berryhill
Gestalt Principles of Design – Similarity
Christopher Butler
Gestalt Principles of Design – Similarity
Christopher Butler
Frequently Asked Questions
01What is the Gestalt principle of similarity?
What is the Gestalt principle of similarity?
The principle of similarity is a Gestalt law of perception which states that elements sharing visual properties — such as color, shape, size, or texture — are perceived as belonging to the same group, even when they are separated in space.
02How is similarity used in UI and UX design?
How is similarity used in UI and UX design?
Designers use similarity to group related controls, signal that elements behave consistently, and reduce visual clutter. Common examples include uniformly styled navigation links, product cards with the same layout, and color-coded status pills.
03What is the difference between similarity and proximity?
What is the difference between similarity and proximity?
Proximity groups elements by physical closeness, while similarity groups them by shared appearance. The two often work together, but similarity can connect elements even when they are far apart on the screen.
04What are common mistakes when applying similarity?
What are common mistakes when applying similarity?
The most common pitfalls are making unrelated elements look identical (implying a false relationship), overusing uniform styles so nothing stands out, and failing to give primary actions enough visual contrast to break the pattern.