The Law of Similarity - Gestalt Principles (Part 1)
- 1.1k shares
- 1 year ago
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 as 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. It 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 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.
Similarity is crucial in design because it helps designers create visually cohesive and organized designs. It’s an essential ingredient in design works that are easy for users to understand and 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 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 a way that’s visually intuitive and easy 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.
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 users clear visual cues. These guide users through the user interface (UI) and help them find the information or functionality they seek.
When elements in a design share visual similarities, users are 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. This can increase 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 apply the principle of similarity, 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 due to their similarity to other elements in the design.
3. Recognition and Recall: The principle of similarity can enhance users' recognition and 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.
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 helps users understand how different elements relate to each other. It also facilitates navigation and comprehension.
Icons: Designers leverage the principle of similarity to create consistent and recognizable icon sets. 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.
Typography: is another area where designers apply the principle of similarity. By using consistent typefaces, font sizes or font styles for related elements, designers create a cohesive and visually appealing design. This consistency helps users recognize and associate different pieces of information and enhances the overall user experience.
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.
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 contact information. This similarity 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. This helps users quickly understand the importance of each element and how to interact with the interface.
Designers can use the principle of similarity to highlight important elements or calls to action. When they make elements that share visual similarities stand out, they create a clear hierarchy. 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.
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 facilitate user understanding. Use a consistent style and color palette 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.
Also known as white space, it’s a vital part of visual design. It gives a web page or app screen needed breathing space. Also 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 create a visually appealing and engaging design.
Designers need to be mindful of cultural and contextual factors when applying the principle of similarity. Colors, shapes or symbols may carry different meanings or associations in different cultures or contexts. It’s vital to ensure that design choices align with the intended audience and context.
Test designs with users to evaluate the effectiveness of the applied similarity principles. Conduct usability tests and gather user feedback to identify areas for improvement and refine the design iteratively.
Designers should stay updated with the latest design trends and practices to ensure their grasp of similarity principles remains relevant and effective. Embrace new techniques and approaches that align with the evolving needs and expectations of users. Keep up with the success of new design languages that offer specific layouts, and more.
To create interfaces that are visually coherent, intuitive to use and have an enhanced overall user experience, it’s important to be wary several issues, including:
Visual Hierarchy Based on Similarity Alone: The principle of similarity helps establish a visual hierarchy that guides users' attention and understanding. However, be cautious not to rely solely on similarity. Consider other Gestalt principles, such as proximity and closure, to create a comprehensive hierarchy that supports users’ comprehension.
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. This 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. They need to ensure that the similarities used are relevant and meaningful to the users and do not create ambiguity. Also, too many different colors, shapes, and sizes could be confusing for users. Strike a balance between similarity and differentiation to maintain clarity and keep users on the right track.
Limited Flexibility: If designers keep strictly to the principle of similarity, it may limit design flexibility. They need to find a balance between consistency and uniqueness to create visually appealing and engaging interfaces that stand out.
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 is 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 they do so, they can effectively apply the principle of similarity. They can use it 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. 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. However, many East Asian cultures 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. However, it can represent danger or warning in Western countries. Therefore, designers must consider these cultural connotations to use similarity in a global context.
To effectively balance similarity and contrast in visual design, designers should:
Create a Clear Hierarchy: Use similarity to group related items, making 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 helps users navigate the content easily.
Ensure The Best Readability: High contrast between text and backgrounds is essential for readability, but overdoing it can be counterproductive. Aim for a balanced contrast that enhances readability without overwhelming users. Use subtle color variations. That can differentiate sections without causing visual strain.
Generate Visual Interest: While similarity ensures cohesiveness, too much of it leads to a dull design. 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 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:
For example, in a user interface, designers can use consistent colors, shapes, or styles for buttons that perform similar actions. This approach aids 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. Designers 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, making it easier for viewers to follow and understand the narrative.
Guide User Attention: Similar elements can guide the viewer's attention through a sequence. By animating similar elements in a consistent manner, 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 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, making 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 helps in reinforcing 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.
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. Designers leverage this law by giving 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. Designers utilize this law to cluster related items, enhancing organization and navigability in the interface. 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.
It's best to combine the Gestalt law of similarity with other design principles, and 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. Apply similar visual styles to elements of equal importance to 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). https://doi.org/10.1145/2851581.2892537
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. https://ischolar.sscldl.in/index.php/tijhss/article/view/197404
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.
Here’s the entire UX literature on the Law of Similarity by the Interaction Design Foundation, collated in one place:
Take a deep dive into Law of Similarity with our course Gestalt Psychology and Web Design: The Ultimate Guide .
One of the key ingredients to a successful product is the creation of effective, efficient and visually pleasing displays. In order to produce such high-quality displays, whether they are graphical (e.g., websites) or tangible (e.g., remote controls), an understanding of human vision is required, along with the knowledge of visual perception. By observing, researching, and identifying examples of our perceptual abilities, we can design products according to these unifying qualities. In order to spread such skills within the world of interaction design, we have developed “Gestalt Psychology and Web Design: The Ultimate Guide.”
Gestalt psychology is a theory of mind which has been applied to a number of different aspects of human thought, action, and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way in which underlying processes are organized and how they help us make sense of the world. The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes and how it becomes a cohesive, meaningful and usable representation of the world. Over the last twenty years, the work of Gestalt psychologists has been adopted by interaction designers and other professionals involved in the development of products for human users.
Within this course, we have compiled and consolidated some of the best resources currently available on the subject of Gestalt psychology and visual perception. To help you appreciate how you can apply Gestalt psychology to web design, we have provided many different examples from existing designs. These draw attention to the exact qualities, quirks, and features of visual perception. Moreover, they discuss how these have been accommodated and, on a number of occasions, exploited so as to support either the user's intentions or those of the designer or client.
The application of Gestalt thinking to design provides us with insights and new ways of approaching problems and challenges. By cementing in our own minds the many ways we organize visual information, we can improve our designs for all users.
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.