The law of similarity is a Gestalt psychology principle that refers to how our brains organize and perceive visual information. It states that people perceive elements that share similar visual characteristics (e.g., color, size, shape) to be related. This law is vital in web design—it helps designers create interfaces that users can easily navigate and understand.
The Gestalt similarity principle is a fundamental concept in both psychology and design. It comes from ideas about how the human brain naturally organizes information—and states that the mind perceives similar elements as part of a unified whole. Meanwhile, viewers typically view different-looking items as being separate from one another.
The Gestalt Laws encompass many aspects of how humans perceive images.
© Author/Copyright holder: Impronta. Copyright terms and licence: CC BY-SA 3.0
The Gestalt school of psychology emerged in the 1920s. It consisted of psychologists Max Wertheimer, Kurt Koffka and Wolfgang Köhler in Germany. The Gestalt approach developed theories that would become well-known to graphic designers. Visual perception theories such as the law of prägnanz (a German word for “good figure”), figure-ground and closed region soon became important graphic design principles. These guide designers on how to use lines or curves, shapes, focal points and backgrounds to powerful effect.
According to the Gestalt school of thought, humans typically perceive patterns using five main categories—summed up in the principle of proximity, principle of continuity, principle of closure, principle of connectedness (or uniform connectedness) and principle of similarity. Similarity is a simple principle that involves an innately human tendency. When people perceive a collection of objects, the brain automatically groups together those that have similar visual characteristics. These include the properties of shape, size, color, texture and orientation. This grouping helps people make sense of the visual information they encounter in the real world. It’s what allows people to perceive patterns, relationships and structures.
The law of similarity helps the mind associate groups of items with alike properties, including color and shape.
© Interaction Design Foundation, CC BY-SA 4.0
Similarity is crucial in design because it helps designers create visually cohesive and organized designs. It’s a vital ingredient in design works that are easy for users both to understand and to navigate. Here are the main reasons behind the success of similarity as a well-leveraged Gestalt principle:
When they group similar elements together, designers can create a good sense of visual coherence in their designs. Elements that share visual similarities—such as color or shape—let users easily identify relationships between them. So, users can perceive them as belonging to the same category or group.
The principle of similarity lets designers organize information in such a way that it’s visually intuitive and easy for users to understand. As they use similar visual characteristics for related elements, designers can guide users' attention. They can help users quickly understand the structure and hierarchy of the information presented.
Flipkart’s website – divided neatly into categories and leveraging similarity so users can find top deals easily.
© Flipkart, Fair Use
Similarity in design can also enhance the user's navigation experience. Designers provide consistent visual cues and group related elements together. That way—they can give their users clear visual cues. These guide the users through the user interface (UI) and also help them find the information or functionality they’re after.
When elements in a design have shared visual similarities, users will be more likely to engage with the content or interact with the interface. The principle of similarity can make a design more visually appealing and aesthetically pleasing—something that can raise the levels of user engagement and satisfaction, and also even leverage a phenomenon called the aesthetic usability effect.
CEO and Creative Director of Hype4, Michal Malewicz explains the aesthetic usability effect.
Numerous studies and experiments have provided evidence that users respond to the Gestalt principle of similarity. Here are some key findings:
1. Visual attention: Studies have repeatedly demonstrated that users are more likely to direct their visual attention to elements that share visual similarities. For example, if a group of buttons that perform similar functions on a website has similar colors or shapes, users are more likely to notice and interact with them—as opposed to all the buttons being the same color.
2. Visual hierarchy: When they use the principle of similarity—and do it well—designers can establish a visual hierarchy that guides users' attention. This helps them navigate through the interface. Research has shown that users are more likely to focus on elements that stand out thanks to their similarity to other elements that are in the design.
3. Recognition and recall: The principle of similarity can help with users' recognition and their recall of information. When elements share visual similarities, users are more likely to recognize patterns. They can also remember information and make connections between related elements.
These iconic orange and gold buttons draw attention to some chief calls-to-action on Amazon.com’s home page.
© Amazon, Fair Use
Designers apply the law or principle of similarity to make better designs in various ways. Here are some common techniques and strategies:
UI and UX designers ensure that elements that serve similar functions or belong to the same category share visual characteristics. These characteristics can include color, shape or typography. This consistency is something that helps users understand how different elements are related to one other. It also makes for easier navigation and comprehension.
Icons: Good iconography is a vital part of UI design. When they use similar shapes, styles or color schemes for related icons, designers facilitate users' understanding and improve the usability of the interface with icons that are consistent and recognizable.
Typography: is another area where designers apply the principle of similarity. By using consistent typefaces, font sizes or font styles for related elements, designers make a design that’s both cohesive and visually appealing. This consistency helps users recognize and associate different pieces of information, too.
When they use consistent visual cues, designers can indicate the grouping or categorization of different elements. This helps users quickly identify and understand relationships between elements and find the information they are looking for. Designers use:
Color: With similar colors for related elements, designers can create a visual hierarchy that guides users through the interface. For example, a website that uses blue buttons for primary actions could use green buttons for secondary actions. This helps users quickly understand the function of each button. Moreover, it quickly helps to show them how to interact with the interface.
eBay offers similar buttons in the form of shoe size, etc., while the Search function stays clearly highlighted above.
© eBay, Fair Use
Shape: With similar shapes for related elements, designers can create a visual pattern that users can easily recognize. For example, a website that uses circular icons for social media links could use square icons for the contact information. This similarity is something that helps users quickly understand the function of each element and how to interact with the interface.
Size: With similar sizes for related elements, designers can create a visual pattern that guides users through the interface. For example, a website that uses large images for primary content could use smaller images for secondary content—and that helps users quickly understand the importance of each element, plus how to interact with the interface.
The circular icon indicates these two Site Design posts are related.
© John Moore Williams, Fair Use
Designers can use the principle of similarity to highlight elements that are important or calls to action. When they make elements that share visual similarities stand out, they create a clear hierarchy. And by making key elements visually distinct from others through color, size or shape, designers draw users' attention. They can also guide their focus to the most critical parts of the interface.
Google Drive leverages the principle of similarity through the use of consistent typography, icons and colors.
© Ladybug’s teacher files, Fair Use
It takes careful consideration and attention to design UIs that make the most of the law of similarity. Here are some ways to leverage it to help create user interfaces that are visually cohesive and intuitive to use, and provide an enhanced user experience:
Ensure that elements that belong to the same category or serve similar functions share consistent visual characteristics. Use similar colors, shapes, sizes or typography to establish visual relationships and help users understand more easily. Plus, use a style and color palette that are consistent across the entire interface.
Use contrast strategically to highlight important elements or create visual hierarchy. By making key elements visually distinct through color, size or shape—designers draw users' attention and guide them through the interface, too.
Also known as white space, it’s a vital part of visual design. It gives a web page or app screen needed breathing space. What’s more, it helps “frame” sections for users to spot individual elements more easily.
While similarity is essential for grouping related elements, avoid overusing it to prevent visual clutter or confusion. Strike a balance between similarity and diversity to make a design that’s both visually appealing and engaging.
This selection shows a creative variety of icons leveraging similarity with a balance of diversity.
© Harpal Singh, Fair Use
Be mindful of cultural and contextual factors with the principle of similarity. Colors, shapes or symbols may carry different meanings or associations in different cultures or contexts. So, it’s vital to make sure that design choices are in line with the intended audience and context.
Test designs with users to see how effective the applied similarity principles are. Do usability tests and collect user feedback to find areas for improvement and refine the design iteratively.
Designers should stay updated with the latest design trends and practices so they can make sure their grasp of similarity principles remains both relevant and effective. Embrace new techniques and approaches that are in line with users’ evolving needs and expectations. Another thing is to keep up with the success of new design languages that offer specific layouts, and more.
Google's design language—Material Design—relies heavily on the principle of similarity. Elements such as buttons, cards and icons share visual characteristics that are consistent. This is something that enables users to—quickly—recognize and interact with familiar patterns.
© Google, Fair Use
To create interfaces that are visually coherent, intuitive to use and have an enhanced overall user experience, it’s important to be wary of several issues, including:
Visual hierarchy based on similarity alone: Be cautious not to rely just on similarity. Think about other Gestalt principles—such proximity and closure—to create a comprehensive hierarchy that supports users’ understanding of things.
CEO and Creative Director of Hype4, Michal Malewicz explains the importance of using another Gestalt law, proximity, for visual hierarchy.
Lack of differentiation: Over-reliance on similarity may lead to a lack of differentiation between elements. It’s something that can make it challenging for users to distinguish between different categories or types of content.
Potential for confusion: If designers don’t apply similarity thoughtfully, it can lead to confusion or misinterpretation. Make sure that the similarities used are relevant and meaningful to the users and don’t create ambiguity. What’s more, too many different colors, shapes and sizes could be confusing for users. So, strike a balance between similarity and differentiation to keep things clear—and keep users on the right track, too.
Limited flexibility: If designers keep strictly to the principle of similarity, it may limit design flexibility. Designers need to find a balance between consistency and uniqueness to create visually appealing and engaging interfaces that stand out.
Spotify's user interface employs the principle of similarity to group content and create visual hierarchy. For example, playlists are visually distinguishable from individual songs thanks to consistent visual cues, such as color and typography.
© Spotify, Fair Use
Overall, the law of similarity is a crucial principle of Gestalt theory in web (and app) design. Good use of it helps create interfaces that are visually appealing and easy to understand. By using similar colors, shapes, or sizes to group related elements, designers can create a visual hierarchy that guides users through the interface.
However, it’s essential to strike a balance between similarity and differentiation—to prevent confusion or lack of distinction. Designers need to consider the context, cultural factors and user needs. When designers do it well, they can use similarity to help build interfaces that are both beautiful and functional. That goes a long way to creating designs that resonate with users and provide a seamless user experience.
Take our course on Gestalt psychology and Web design.
Read our piece The Law of Similarity – Gestalt Principles (Part 1) for in-depth insights.
Consult our piece in Gestalt principles of form perception in the Glossary of Human-Computer Interaction.
Find further fascinating insights in UI Design in Practice: Gestalt Principles | by Thalion.
Find more insights and examples in Exploring the Gestalt Principles of Design | by Cameron Chapman.
Cultural differences indeed affect how users perceive designs. Different cultures have varying visual and cognitive processing styles—and these can influence how individuals perceive similarity in design elements.
For example, Western cultures typically use an analytical style of processing. These cultures tend to focus on individual design elements. In this context, similarity helps to clearly distinguish and categorize elements. Many East Asian cultures—though—use a more holistic processing style. This means the overall context and relationship between elements receive more importance. So, the principle of similarity can still apply. However, the way users from different cultures interpret a design can differ. So can the degree of emphasis they place on it.
Also, cultural symbolism can impact the perception of similarity in various parts of the world. Colors, shapes and patterns may carry different meanings and associations in different cultures. For example, the color red signifies good fortune in China—but can represent danger or warning in Western countries. So, designers must consider these cultural connotations to use similarity in a global context.
To effectively do this, designers should:
Create a clear hierarchy: Use similarity to group related items—and so make the design cohesive. Then, use contrast to draw attention to the most important elements—like highlighting key headings or calls to action. Contrasting colors and other elements is something that helps users navigate the content easily.
Ensure the best readability: High contrast between text and backgrounds is an essential thing for readability, but overdoing it can be counterproductive. So, aim for a balanced contrast—one that enhances the readability factor and doesn’t overwhelm users. Use subtle color variations—it’s something that can differentiate sections without causing visual strain.
Generate visual interest: While similarity is great for cohesiveness, too much of it leads to a dull design. So, introduce contrast with varying colors, sizes or shapes. These can make essential elements stand out. This strategy keeps the design dynamic and engaging—without sacrificing unity.
Meet user expectations: Users come with preconceived notions based on their own past experiences. Help meet these expectations through familiar design patterns (similarity) and innovate judiciously (contrast) to enhance the user experience. It’s therefore essential to hone those visual skills:
Also, two vital points to bear in mind with contrast (and color) are accessibility and designing for other cultures.
For example, in a user interface, designers can use consistent colors, shapes, or styles for buttons that perform similar actions. This approach really helps visually impaired users. It streamlines the overall user experience as it provides a clear navigation path. Similarly, by grouping related information or controls based on appearance, designers help users with cognitive disabilities to process and understand content more effectively.
When they apply the law of similarity, designers can also help to comply with accessibility guidelines like the Web Content Accessibility Guidelines (WCAG). These guidelines focus on making designs perceivable, operable, understandable—and robust. When designers create visually connected elements, they ensure that users with diverse abilities can interact effectively with the interface. Simplified layouts are a part of that.
Yes, they can strategically apply the principle of similarity in animation and motion design to make engaging and cohesive design work, as it can:
Create visual cohesion: Use similar visual elements such as color, shape or size in animations to indicate they’re part of the same group or concept—and make it easier for viewers to follow and understand the narrative.
Guide user attention: Similar elements can guide the viewer's attention through a sequence. From animating similar elements in a way that’s consistent, designers can subtly direct the viewer's focus to the most important parts of the animation.
Enhance user experience: When similar elements move in a unified way, it creates a pleasing aesthetic—one that enhances the overall user experience. This consistency in motion can also reinforce branding and style guidelines.
Establish rhythm and flow: Elements with similar characteristics moving in a harmonious pattern can create a sense of flow—and so make the animation more engaging and easier to digest.
Facilitate learning and comprehension: In educational animations, grouping similar concepts or ideas using visual similarity helps learners to make connections between related concepts easily.
Support storytelling: In storytelling through motion design, using similar visual elements for related ideas or themes is something that helps to reinforce the narrative. It makes it easier for the audience to connect the dots and understand the story being told.
Consider the other Gestalt principles as well for animation and motion design.
Malone, E. (2023). A Guide to Gestalt Principles for UX Designers: A mini visual design guide to help user experience designers leverage gestalt principles for better designs. 8 paw press.
This book offers a concise exploration of Gestalt principles in UX design. Erin Malone provides a practical guide, applying these principles to digital interfaces with a focus on mobile and web examples. The book delves into visual hierarchy, animation, and microinteractions, aiming to help readers improve design skills. It also includes downloadable templates for design documentation, making it a hands-on resource for UX designers.
Similarity is immensely useful in mobile UI design. For instance, in a mobile app, designers can use similar colors and shapes for all navigation buttons. This consistency lets users quickly identify these buttons as related functions. Similarly, a consistent font style for all headings helps users recognize them as related pieces of information. The law of similarity is particularly effective in creating a clean, organized interface that is easy to navigate. It reduces cognitive load and helps with information processing.
An excellent example of this principle in action is in social media apps. There, similar visual elements appear as posts, comments and notifications. These enable users to intuitively understand and navigate the app.
For more on the fineries of designing for mobile, watch CEO of Experience Dynamics Frank Spillers explain:
The law of similarity asserts that people perceive objects that resemble each other as part of a group or pattern. With similarity, designers give elements similar visual characteristics—like color, shape or size—to indicate their relatedness or similar functionality. For instance, in user interfaces, designers often apply the same color to all interactive buttons, to signal their clickability.
In contrast, the law of proximity states that users perceive objects that are near each other as a cohesive group. With proximity, designers cluster related items—and so boost the interface’s organization and navigability. A common application is to place all navigation buttons in a website's header close together. This distinguishes them from the main content. Proximity is indeed important in establishing hierarchy.
These two laws are vital parts of the Gestalt principles, which are important to know – the whole is more than the sum of the parts.
Here are some key practices:
Combine with the law of proximity: to visually group similar elements and apply the law of proximity to place related groups close together. This approach helps users quickly discern relationships and functions within the design.
Establish good visual hierarchy: With size and contrast, make larger, more contrasting elements more prominent. And apply similar visual styles to elements that are equally important so you maintain balance and intuition in the interface.
Apply color theory: Select consistent color schemes for similar elements—to set the mood and guide user interactions.
Incorporate in layout design: Organize similar elements in patterns or grids for a structured, navigable interface.
Koch, J., & Oulasvirta, A. (2016). Computational Layout Perception using Gestalt Laws. In CHI EA '16: Proceedings of the 2016 CHI Conference Extended Abstracts on Human Factors in Computing Systems (pp. 1423–1429).
The article "Computational Layout Perception using Gestalt Laws" by Koch and Oulasvirta (2016) presents preliminary findings on the computational perception of interactive layouts. The authors aim to algorithmically estimate how users perceive a layout, with potential applications in automated usability evaluation and computer-generated interfaces. The study explores the use of Gestalt laws as parsing heuristics to resolve conflicts among competing interpretations of a layout—resulting in a hierarchical grouping of main elements. The authors report promising results, with an implementation of four Gestalt laws enabling hierarchical grouping that presents favorable outcomes in 90% of realistic test cases.
Ofosu-Asare, Y., Essel, H. B., & Gyebi, F. A. (2018). Using the Gestalt Principles of Visual Aesthetics in Designing E-Learning Graphical User Interface. The International Journal of Humanities & Social Studies, 6(1), 45-49.
The article "Using the Gestalt Principles of Visual Aesthetics in Designing E-Learning Graphical User Interface" by Ofosu-Asare, Essel, and Gyebi (2018) explores the application of visual aesthetics and instructional design strategies in creating e-learning content. The study emphasizes the significance of aesthetics in influencing student feelings, attitudes and learning outcomes in online education. It discusses the impact of aesthetics on user experience and motivation in e-learning platforms, highlighting the need for quality content and user-friendly technology. The research methodology involves qualitative methods and purposive sampling to examine the effects of aesthetic visual environments on student satisfaction and motivation. The study provides practical guidelines for higher education and instructional designers to enhance the online learning environment through the application of expert standards and aesthetic considerations.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on the Law of Similarity by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
