The Law of Similarity: Creating Visual Consistency

Designs that hit you with Deja vu

Incharaprasad
Kubo
6 min readMay 8, 2023

--

law of similarity
law of similarity

Introduction

Have you ever wondered why Netflix’s design look so similar to a typical theater, with red cushions and dark walls? If so, you’re not alone. A lot of brands design around concepts the users are already familiar with to invoke similar emotions. In this case, Netflix derived its color scheme from a typical stock photo of a theater, most users are already familiar with. This helps users to make a seamless connection to watching movies at home to watching movies in a multiplex.

Photo by Felix Mooneeram on Unsplash
Photo by DCL "650" on Unsplash

The principle in play here is the Law of Similarity, a Gestalt psychology principle that plays a crucial role in crafting user experiences (UX) in web design, application interfaces, and beyond.

We are looking at Day 4 of the series, “30 days of UX laws and principles” and if you have missed Day 3, catch that before you move forward.

In today article we will dive deep into :

  1. The origins of Gestalt Psychology
  2. Unraveling the law of similarity
  3. Law similarity and UX
  4. Here are some examples
  5. Difficulties and Limitations

Taking a Step Back: The Origins of Gestalt Psychology

To understand the Law of Proximity and the Law of Similarity, it’s essential to first grasp the broader context of Gestalt psychology. Developed in the early 20th century by a group of German psychologists, including Max Wertheimer, Wolfgang Köhler, and Kurt Koffka, Gestalt psychology focuses on the idea that humans perceive patterns and make sense of their environment through holistic principles. The term “Gestalt” is a German word that loosely translates to “shape” or “form.” Gestalt psychology emphasizes that the whole is more significant than the sum of its parts when it comes to human perception.

Law of similarity illustrated
The law of similarity illustrated

Unraveling the Law of Similarity

Closely related to the Law of Proximity, is the Law of Similarity. This principle posits that humans tend to group similar elements together, perceiving them as a unified whole. These elements can share similarities in various visual characteristics, such as shape, color, texture, or size. The Law of Similarity helps us further simplify and organize the visual information we encounter daily.

Law of similarity
Source: UX Misfit

In support of the Law of Similarity, numerous experiments have been conducted over the years. In one classic study, participants were shown a series of shapes and asked to group them based on their similarities. The results demonstrated that participants consistently grouped similar objects together, illustrating the power of the Law of Similarity in guiding our perception and organization of visual information.

Law of Similarity and UX

Imagine you’re visiting an e-commerce website to purchase a new pair of headphones. As you land on the homepage, you’re greeted with a visually appealing interface that utilizes the Law of Similarity to create an exceptional user experience (UX). Let’s explore how the law is applied in this context, using the three main points mentioned above:

  1. Organizing information: The website’s product categories are displayed as visually similar buttons or icons, making it easy for you to recognize and navigate to the desired section. The Law of Similarity aids in creating a visual hierarchy, allowing you to effortlessly process information and find the headphones category among other related items.
Flipkart divides the website into various categories
Flipkart divides the website into various categories

2. Establishing relationships: Upon clicking the headphones category, you’re taken to a product listing page. Here, the products are displayed in a consistent manner, with each product featuring a similar layout: an image, a title, a brief description, and a “Buy Now” button. This consistency helps you quickly identify the relationships between items and understand that the “Buy Now” button corresponds to the specific product it’s placed next to.

Buy now button placed keeping consistency in mind
Buy now button placed keeping consistency in mind

3. Reducing cognitive load: By utilizing the Law of Similarity, the website’s interface is simplified, allowing you to focus on what truly matters — finding the perfect pair of headphones. The consistent use of typography, colors, and design elements across the site creates a cohesive experience, reducing the cognitive load and preventing you from feeling overwhelmed.

Some real-life record of the Law of Similarity

  1. Google Drive: When you access your Google Drive, you’ll notice that all the files and folders are visually similar. They use consistent icons, typography, and colors, making it easy for you to recognize and distinguish between different file types and folders. This consistent design helps organize information and creates a simplified user experience.
Google drive organisation
Source: Ladybug’s teacher files

2. Instagram: On Instagram’s mobile app, the icons for home, search, post creation, notifications, and profile are all displayed in a similar style at the bottom of the screen. The consistency in the design of these icons helps users quickly identify and navigate through the different sections of the app.

Instagram interface based on similarity principle
Instagram interface based on similarity principle

3. Amazon: On Amazon’s website, product listings follow a consistent design pattern, with a product image, title, price, and customer rating presented in a similar style. This design consistency helps users quickly process information, identify relationships between elements, and find what they’re looking for.

Amazon’s web page
Amazon’s web page

Difficulties and Limitations

While the Law of Similarity has numerous benefits, it also has its limitations:

  1. Over-similarity: If elements are too similar, users may struggle to differentiate between them or understand their functions.
  2. Cultural differences: The perception of similarity can vary based on cultural backgrounds, potentially leading to misunderstandings or confusion.
  3. Balancing similarity and variety: Striking the right balance between similarity and variety is crucial to prevent monotony and maintain user engagement.
Photo by Harpal Singh on Unsplash

Conclusion

Understanding and implementing the Law of Similarity in design projects can significantly enhance the user experience, making it a valuable tool for designers across various disciplines. By embracing this principle and using it effectively, designers can create visually appealing and functional interfaces that resonate with users and promote ease of use.

The law of Similarity is an indispensable aspect of design that plays a critical role in shaping user experiences. By studying and incorporating this principle, designers can create more intuitive and visually consistent interfaces, ultimately leading to better user satisfaction and engagement.

ANNOUNCEMENT 🔥

A glimpse into our AI tool!

We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!

Check it out here and don’t forget to join the wait list :)

--

--

Incharaprasad
Kubo

As a writer, I strive to uncover the latest trends and provide fresh perspectives on design, critical thinking, and their impact on the business world.