Law Of Similarity - Gestalt Laws of Perceptual Organization
How to use the Law of Similarity in web design to create clear, consistent, and captivating UI and UX.
The Law of Similarity is one of the principles of Gestalt psychology, which studies how the human mind perceives and organizes visual information. According to this principle, elements that are similar in shape, color, size, or other attributes tend to be grouped together and seen as a coherent whole. This principle helps us to simplify complex scenes and make sense of the world around us.
In web design, the Law of Similarity can be used to create effective and intuitive user interfaces (UI) and user experiences (UX). By applying this principle, web designers can enhance the visual hierarchy, clarity, and consistency of their websites. They can also guide the users’ attention and actions towards the desired goals and outcomes.
How the Law of Similarity works in web design
The Law of Similarity states that elements that are similar in appearance or function are perceived as being related. This means that when we see a group of similar elements on a website, we tend to assume that they have something in common or belong to the same category.
The Law of Similarity can be applied to web design using various visual attributes, such as:
- Shape: Elements that have the same or similar shape are grouped together.
- Color: Elements that have the same or similar color are grouped together.
- Size: Elements that have the same or similar size are grouped together.
- Orientation: Elements that have the same or similar orientation are grouped together.
- Movement: Elements that have the same or similar movement are grouped together.
By using these attributes, web designers can create similarity between elements that have a common meaning or function. This can help to establish visual hierarchy, enhance clarity, and increase consistency.
How to apply the Law of Similarity in UX
- Attract attention: By creating similarity between elements that are important or relevant for the users’ goals, web designers can draw the users’ attention towards them.
- Create categories: By creating similarity between elements that share a common theme or topic, web designers can help the users to organize and navigate through large amounts of information.
- Establish relationships: By creating similarity between elements that are related or connected, web designers can help the users to understand and interact with them more effectively.
How to apply the Law of Similarity in UI
- Create balance: By creating similarity between elements that are symmetrical or proportional, web designers can create a more balanced and harmonious layout.
- Create contrast: By creating similarity between elements that are opposite or complementary, web designers can create a more dynamic and interesting design.
- Create rhythm: By creating similarity between elements that are repetitive or patterned, web designers can create a more fluid and smooth design.
Real examples of websites that use the Law of Similarity
- Airbnb: uses the same shape (rectangles) for all elements that display information about accommodation options, and different colors for different categories.
- Spotify: uses the same shape (circles) for music options, and different colors for different genres or moods.
- Netflix: uses the same shape (rectangles) for movies and TV shows options, and different colors for different types or categories.
Conclusions
The Law of Similarity is one of the principles of Gestalt psychology that can be used to improve web design. By applying this principle, web designers can create effective and intuitive UI and UX for their websites, enhancing the visual hierarchy, clarity, consistency, attention, categorization, relationships, balance, contrast, and rhythm of their websites.
Other Gestalt Laws
Check out the other five Gestalt laws in our following articles:
Bibliography
J. Lidwell, K. Holden, and J. Butler, Universal Principles of Design, 2nd ed. Beverly, MA: Rockport Publishers, 2010.
