Law of Similarity: A Guide to Smarter UI Design

You’ve seen this play out in real products.

A shopper lands on an e-commerce page. One button is blue and rounded. Another is gray and square. A third looks like plain text but behaves like a button. Product filters jump between icon styles. Labels shift between sentence case and title case. Nothing is technically broken, yet the page feels harder than it should.

Then you open a cleaner interface. Actions that belong together look like they belong together. Cards share the same structure. Navigation links use the same hover treatment. Your eyes know where to go before you consciously decide.

That difference often comes down to the law of similarity.

Designers usually learn it as a basic Gestalt principle. Similar things look related. Useful, yes, but too shallow for the work you do every day. In product design, a key question isn’t just what the law of similarity means. It’s how far to push it, where to break it, and how to prove its value to a skeptical stakeholder.

That’s where most explainers stop. They show a few matching buttons and call it a day. But teams need more than theory. They need a way to use similarity deliberately and measure whether it improves findability, comprehension, and business outcomes.

That nuance matters. A 2025 Nielsen Norman Group study summarized by Nulab reported that similarity ratios above 85% increased task completion by 22% but also raised error rates by 18% in diverse user groups because of over-grouping. More similarity helped, until it started hiding meaningful differences.

That’s the practical tension. Consistency creates clarity, but too much sameness can flatten hierarchy.

Your Brain on Design How We Perceive Digital Interfaces

When a user scans a screen, they’re not inspecting every element one by one. They’re pattern-matching. Fast. Mostly below conscious awareness.

That’s why an inconsistent interface feels tiring even when users can still complete the task. The brain has to keep re-evaluating each object. Is this a button? Is that a label? Are these two cards the same kind of content or different? Every avoidable question adds friction.

The law of similarity helps remove those questions. When elements share visible traits such as color, shape, size, or styling, people read them as part of the same group. In digital products, that means users can infer structure quickly instead of decoding it from scratch.

What users experience in the moment

Consider a product listing page with twelve cards.

If all cards use the same image ratio, typography pattern, spacing, and CTA style, users understand the structure almost instantly. They know where to look for product name, price, and action. If one card suddenly uses a different button treatment or a different title layout without a reason, users pause. They may not say, “the grouping logic is broken,” but that’s what they’re reacting to.

This is why junior designers sometimes confuse visual variety with visual clarity. Variety can make a mockup look lively in Figma. Similarity makes the interface legible in use.

Practical rule: If users must learn a pattern more than once on the same screen, your similarity system probably isn’t doing enough work.

Similarity isn’t decoration

A lot of teams still treat consistency as polish. It’s more foundational than that.

Similarity tells users which things are siblings, which actions behave alike, and which pieces of information belong in the same mental bucket. It reduces the amount of interpretation users need to do just to move through the interface.

That’s why this principle matters beyond aesthetics. It affects comprehension, speed, and confidence. And if you’re presenting design work to product or engineering, it gives you something stronger than “this looks cleaner.” It gives you a testable hypothesis: when related elements look related, users complete tasks with less hesitation and fewer wrong turns.

The Psychology Behind Grouping Similar Elements

The law of similarity comes from Gestalt psychology, a body of research that began identifying these perceptual principles in the 1930s. The fundamental idea is simple: people don’t perceive isolated parts first. They perceive patterns and wholes.

That sounds academic until you notice how often you already use it in daily life. You sort laundry by color. You group spices by jar type. You recognize a row of matching app icons as one category before reading any labels. Your brain prefers order because order costs less effort.

Why the brain groups first

Visual scenes are messy. Interfaces are dense. If the brain had to inspect every button, label, icon, and card as a separate object, digital products would feel painfully slow to use.

Instead, perception relies on shortcuts. Similarity is one of them. When multiple elements share a visible attribute, the brain compresses them into a group. That grouping makes the interface easier to scan and remember.

Research summarized in Study.com’s overview of the law of similarity notes that similarity-based grouping produced a 9% benefit to visual working memory compared with conditions that had no grouping. That’s a useful reminder for product designers. Similarity doesn’t just make things look neat. It helps users hold structure in mind while they’re making decisions.

The main attributes users group by

Designers usually apply similarity through a few visible levers:

• Color helps users identify shared function, such as primary actions or selected states.
• Shape signals common behavior, like a family of cards, pills, or icon buttons.
• Size suggests peer relationships, especially in navigation or dashboard controls.
• Brightness and contrast can reinforce which items belong to the same tier.
• Motion or orientation can imply that elements act as a set.

Color gets the most attention, but it’s not the only tool. In many interfaces, shape and spacing carry more durable meaning than color alone.

Similarity rarely works alone

Similarity often gets confused with proximity because the two usually appear together. They are different. Similar items can feel grouped even when they aren’t adjacent, while nearby items can feel unrelated if their styling conflicts.

If you want a good companion principle to study next, this explanation of proximity in design helps clarify where closeness ends and similarity begins.

Grouping is the brain’s way of buying speed. Good interfaces respect that bargain.

A junior designer often asks, “Should I make these look the same?” The better question is, “Do I want users to assume these belong together?” If the answer is yes, similarity is one of your strongest tools.

The Law of Similarity in Modern UI and UX Design

You can spot the law of similarity in almost every mature product, even when the design feels invisible. That’s usually the point. Users shouldn’t have to notice the principle for it to work.

Color as a behavioral cue

Think about primary actions in a checkout flow. When every “continue” or “add to cart” action uses the same color treatment, users build a fast rule: this color means forward progress.

That’s not just aesthetic consistency. It changes interaction speed. According to Study.com’s lesson on similarity in interfaces, interfaces that apply consistent styling to interactive elements show 25-40% faster task completion, and uniformly colored buttons can see 35% higher click-through rates.

That pattern shows up all over commerce and SaaS. Teams often reserve one button color for the most common affirmative action, then repeat it with discipline. Once users learn the pattern, they stop reading every button as carefully.

Shape creates families

Shape is quieter than color, but often more stable.

Airbnb-style listing cards are a good example of the pattern, even without getting hung up on one exact implementation. When every listing card shares the same corners, image proportions, title placement, metadata structure, and spacing rhythm, users treat them as equivalent units. They can compare options quickly because the presentation is predictable.

The same applies to dashboards. If all filters use the same chip shape and all data widgets use the same panel frame, users understand the page structure before parsing content.

Size and orientation establish peer levels

Uniform icon sizing in mobile navigation is another strong cue. If five bottom-nav icons share the same footprint, stroke weight, and alignment, users read them as peers. No one item appears accidentally more important than the others.

When that consistency breaks unintentionally, the UI starts sending mixed signals. One oversized icon can look selected even when it isn’t. One rotated or unusually styled icon can look like a special mode rather than a standard destination.

Similarity reduces interpretation work

The benefit isn’t that users think, “these controls are visually matched.” The benefit is that they don’t have to think much at all.

Here’s where teams usually get it right:

• Buttons: same fill, radius, label case, and hover behavior for the same action tier
• Cards: shared image ratio, metadata placement, and CTA location
• Form fields: consistent border treatment, label position, helper text style
• Navigation: repeated active states, icon style, underline, or selected marker

And here’s where they often fail:

• Mixed button hierarchies where secondary actions randomly borrow primary styling
• Inconsistent cards where one module uses a different alignment or spacing logic
• Hybrid icons pulled from different libraries with conflicting stroke weights
• Ad hoc states where hover, focus, and selected don’t feel related

Mentor note: Similarity should answer “what kind of thing is this?” before the user reads the label.

That’s the standard I use in reviews. If a user can’t infer role from appearance, the interface is making them decode instead of recognize.

How to Implement Similarity with HTML and CSS

The law of similarity gets real when it shows up in code. If your design relies on manual styling choices in every component, similarity will drift. If it’s baked into reusable classes and tokens, consistency gets much easier to maintain.

Start with one repeatable pattern

The simplest example is a shared button class. Instead of styling each button individually, define one visual pattern for one behavioral role.

HTML

<div class="actions">
  <button class="btn btn-primary">Save changes</button>
  <button class="btn btn-primary">Continue</button>
  <button class="btn btn-secondary">Cancel</button>
</div>

CSS

.btn {
  font: inherit;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: #0b5fff;
  color: #ffffff;
}

.btn-secondary {
  background: #ffffff;
  color: #0b5fff;
  border-color: #0b5fff;
}

Two primary buttons now look related because they are related. You’ve reduced choice in the codebase, which usually improves clarity in the interface.

Use CSS variables to enforce consistency at scale

As products grow, repeated hard-coded values become a maintenance problem. CSS custom properties solve that by centralizing the visual system.

CSS variables

:root {
  --color-primary: #0b5fff;
  --color-surface: #ffffff;
  --color-text-on-primary: #ffffff;
  --radius-md: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --border-strong: 2px solid;
}

.btn {
  font: inherit;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.nav-link {
  border-bottom: var(--border-strong);
}

That navigation detail matters. IxDF’s law of similarity reference notes that applying similarity to navigation elements, including a pattern such as .nav-link { border-bottom: 2px solid; }, increases findability by 42%, reaches 95% recognition accuracy across demographics, and directs 70-85% of initial gaze fixations to grouped elements.

This is what stakeholders often miss. A small CSS rule can carry a large perceptual effect because it helps users classify elements instantly.

Build similarity into components, not pages

If you work in React, Vue, or another component-based stack, the same principle applies. Encapsulate similarity in the component API.

For example, define a Button component with explicit variants like primary, secondary, and destructive. Don’t let every screen invent its own local style. The more styling decisions teams make at the page level, the more likely the interface drifts.

A design system formalizes this discipline. If you’re building one from scratch, this guide to creating a design system is a useful companion.

A practical implementation checklist

Before shipping, check for these:

• Shared roles: Do elements with the same function use the same style token set?
• State consistency: Do hover, focus, active, and disabled states feel like members of the same family?
• Icon coherence: Are all icons using one visual grammar, not three mixed libraries?
• Typography patterns: Do labels, captions, and headings follow reusable style tiers?

Keep the number of visual languages low. Every extra language adds translation work for the user.

Similarity doesn’t require flashy UI. It requires repeatable decisions.

Testing and Measuring the Impact of Similarity

Design teams often know an interface feels more coherent after a cleanup pass. Stakeholders still ask the fair question: did it change anything measurable?

That’s where the law of similarity becomes more than a principle. It becomes a testable design variable.

What to test

A clean A/B test starts with one visible hypothesis.

For example:

• Variant A: Primary actions use one shared button style across the page
• Variant B: Primary actions vary in color or shape across modules

Or:

• Variant A: Navigation links share one underline and hover treatment
• Variant B: Links use mixed active-state signals

The point isn’t to test “good design” versus “bad design.” The point is to isolate similarity as the variable.

Which metrics matter

Choose metrics based on the task the interface supports.

A commerce team might track:

• Click-through on the intended CTA
• Task completion for checkout or filtering
• Error behavior, such as incorrect clicks or abandoned steps

A SaaS team might track:

• Feature findability
• Time on task
• Support requests related to navigation confusion

If you’re running moderated usability tests, watch for hesitation. Users often reveal broken similarity through pauses, re-reading, and wrong assumptions about what belongs together.

Why small refinements can matter a lot

The math behind similarity becomes useful, even if you never discuss equations in a design review.

Scholarpedia’s article on similarity measures explains Shepard’s universal law of generalization as s = e^-d, where perceived similarity and psychological distance have an exponential relationship. In plain English, similarity doesn’t scale in a neat straight line. Small reductions in perceived difference can create disproportionately strong grouping effects.

That gives you a better way to frame design changes. Changing one border radius, one color token, or one interaction treatment may look minor in a diff. To users, it may sharply reduce the mental distance between related elements.

A stakeholder may see a tiny visual change. A user may experience a much clearer pattern.

A lightweight testing framework

Use a simple sequence:

1. Define the grouping problem
   Example: users don’t recognize which actions are equivalent across cards.

2. Choose one similarity cue
   Color, shape, spacing, icon treatment, or active-state behavior.

3. Create a control and a variant
   Keep content and layout stable where possible.

4. Measure one primary outcome
   Completion, click-through, error behavior, or findability.

5. Review qualitative evidence
   Session recordings, usability observations, heatmaps, and support feedback.

The walkthrough below is useful if you want a broader refresher on Gestalt thinking in product design before planning your test.

Don’t chase sameness for its own sake

Measurement also protects you from overdoing it.

If stronger similarity improves completion but increases errors because users can’t distinguish action tiers, the design needs more nuance, not more consistency. That’s why testing should include both success and failure signals. You want users to group the right things, not all things.

Advanced Considerations and Strategic Exceptions

Good designers apply the law of similarity. Strong designers know when to interrupt it.

Accessibility needs more than color

If similar items are grouped only by color, some users won’t reliably perceive the grouping. That’s not just a visual preference issue. It can block understanding.

Pair color with another cue:

• Shape: primary buttons share a distinct form
• Iconography: warning items include a consistent icon
• Text labels: selected states include explicit wording
• Borders or fill differences: related controls share more than hue alone

A useful rule is simple. If color disappeared, would the grouping still make sense?

Cultural meaning still matters

The perceptual tendency to group similar things is broad, but the meaning of specific colors and symbols isn’t universal. A color that signals success in one context might carry a different emotional or cultural reading in another. The same goes for icons.

That means your grouping method may be universal, while your implementation choices are not. If a product serves varied audiences, validate whether your chosen visual cues are interpreted the way you expect.

Strategic dissimilarity creates hierarchy

Sometimes the best use of similarity is to break it on purpose.

A destructive action shouldn’t be absorbed into a set of neutral controls. A primary CTA may need to stand apart from secondary actions. A system alert should interrupt the surrounding pattern enough to get attention.

The key is intent. Random inconsistency creates confusion. Controlled contrast creates meaning.

When to break similarity

Design judgment: Similarity is for grouping peers. Dissimilarity is for signaling importance, danger, or change.

The trap to avoid

Junior designers sometimes react to sameness by making every component more unique. That usually makes the product harder to use.

The better move is selective contrast. Keep peers visibly related. Break the pattern only where users need a clear distinction in role, risk, or priority.

That balance is what makes a system feel both coherent and usable.

Comparing Similarity with Other Gestalt Principles

The law of similarity doesn’t work in isolation. Most interfaces rely on several Gestalt principles at once, and confusion usually starts when a designer leans on one while ignoring the others.

Gestalt principles at a glance

How they collaborate in real interfaces

Take a grid of product cards. Similarity tells users the cards belong to the same content family because the layout and styling repeat. Proximity reinforces that they’re one browsable cluster. Figure-ground helps the grid stand out from the surrounding page.

Or think about a dashboard sidebar. Similarity gives all peer navigation items one visual language. Continuation helps the user scan down an aligned vertical path. Proximity groups nested items under the same section heading.

If you want another useful comparison point, this look at the Gestalt principle of common fate is helpful because movement often changes how grouping feels in interactive systems.

A simple way to diagnose confusion

When a screen feels unclear, ask three questions:

• Do related items look related? That’s similarity.
• Are grouped items physically arranged as a group? That’s proximity.
• Does hierarchy stand out from the background and from peers? That’s figure-ground and contrast.

Design issues rarely come from breaking one principle alone. They usually come from sending mixed signals across several at once.

Frequently Asked Questions about the Law of Similarity

Can the law of similarity be overused

Yes. If too many elements look too alike, users can miss important differences between actions, states, or content types. The fix isn’t less consistency everywhere. It’s more intentional contrast where hierarchy or risk needs to stand out.

Does similarity apply to text, not just UI components

Absolutely. Repeated heading styles, predictable caption formatting, and consistent treatment of links, pull quotes, or error messages all help users scan content faster. Text styling is part of the interface language.

How does this connect to design systems

A design system is one of the clearest operational forms of the law of similarity. It turns visual grouping from a designer’s preference into a reusable product rule. Shared tokens, components, and interaction patterns help teams maintain similarity across screens, features, and platforms.

What’s the fastest way to improve a messy screen

Start by identifying elements that should behave as peers. Then make sure they share the same visual signals. Buttons, form fields, cards, and navigation links usually give you the quickest wins.

If you want practical UX breakdowns like this, with clear examples for web and mobile teams in the U.S., explore UIUXDesigning.com. It’s a strong resource for designers, product managers, developers, and students who want to sharpen design judgment and build more usable interfaces.