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.
In this article, we will explain how the Law of Similarity works in web design, and provide three real examples of websites that use this principle to create engaging and user-friendly UI and UX.
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. For example, if we see a row of buttons that have the same shape, color, and size, we will think that they are part of the same navigation system or perform similar actions.
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. For example, circles, squares, triangles, etc.
- Color: Elements that have the same or similar color are grouped together. For example, red, blue, green, etc.
- Size: Elements that have the same or similar size are grouped together. For example, large, medium, small, etc.
- Orientation: Elements that have the same or similar orientation are grouped together. For example, horizontal, vertical, diagonal, etc.
- Movement: Elements that have the same or similar movement are grouped together. For example, static, dynamic, animated, etc.
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: By creating similarity between elements that belong to the same level of importance or information, web designers can create a clear and logical structure for their websites. For example, by using the same color for all headings, subheadings, and body text, web designers can create a consistent and readable typography system.
- Enhance clarity: By creating similarity between elements that convey the same message or purpose, web designers can reduce confusion and ambiguity for their users. For example, by using the same shape for all icons that represent different features or functions, web designers can create a coherent and recognizable iconography system.
- Increase consistency: By creating similarity between elements that appear on different pages or sections of a website, web designers can create a unified and harmonious look and feel for their websites. For example, by using the same color scheme for all buttons that trigger similar actions or outcomes, web designers can create a consistent and predictable interaction system.
How to apply the Law of Similarity in UX
The Law of Similarity can also be used to improve the user experience (UX) of a website. By applying this principle, web designers can influence the users’ perception and behavior towards their websites. They can also help the users to achieve their goals and tasks more easily and efficiently.
Some ways to apply the Law of Similarity in UX are:
- Attract attention: By creating similarity between elements that are important or relevant for the users’ goals or tasks, web designers can draw the users’ attention and focus towards them. For example, by using a contrasting color for a call-to-action button that leads to a conversion or a purchase, web designers can make it stand out from the rest of the elements on a page.
- 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. For example, by using different colors for different sections or categories on a website, web designers can help the users to identify and access them more easily.
- Establish relationships: By creating similarity between elements that are related or connected in some way, web designers can help the users to understand and interact with them more effectively. For example, by using lines or arrows to link elements that show cause-and-effect or sequence relationships, web designers can help the users to follow and comprehend them more clearly.
How to apply the Law of Similarity in UI
The Law of Similarity can also be used to enhance the user interface (UI) of a website. By applying this principle, web designers can create a more aesthetically pleasing and visually appealing website. They can also create a more memorable and distinctive brand identity for their website.
Some ways to apply the Law of Similarity in UI are:
- Create balance: By creating similarity between elements that are symmetrical or proportional, web designers can create a more balanced and harmonious layout for their website. For example, by using a grid system to align and distribute elements evenly on a page, web designers can create a more orderly and organized appearance for their website.
- Create contrast: By creating similarity between elements that are opposite or complementary, web designers can create a more dynamic and interesting design for their website. For example, by using contrasting colors, shapes, or sizes to highlight or emphasize certain elements on a page, web designers can create a more striking and captivating impression for their website.
- Create rhythm: By creating similarity between elements that are repetitive or patterned, web designers can create a more fluid and smooth design for their website. For example, by using the same shape, color, or size for elements that appear in a sequence or a series on a page, web designers can create a more consistent and coherent flow for their website.
3 real examples of websites that use the Law of Similarity
To illustrate how the Law of Similarity can be applied in web design, here are three real examples of websites that use this principle to create effective and engaging UI and UX.
Example 1: Airbnb
Airbnb is a website that allows users to book or offer accommodation around the world. The website uses the Law of Similarity to create a clear and consistent UI and UX for its users.
Some ways that Airbnb uses the Law of Similarity are:
- The website uses the same shape (rectangles) for all elements that display information about the accommodation options, such as images, titles, ratings, prices, etc. This creates similarity between these elements and helps the users to group them together and compare them easily.
- The website uses different colors (red, green, blue, etc.) for different categories of accommodation options, such as entire homes, private rooms, hotels, etc. This creates similarity between these elements and helps the users to distinguish them from each other and filter them according to their preferences.
- The website uses the same color (pink) for all elements that indicate the availability or booking status of the accommodation options, such as dates, calendars, buttons, etc. This creates similarity between these elements and helps the users to identify and access them quickly.
Example 2: Spotify
Spotify is a website that allows users to listen to music online or offline. The website uses the Law of Similarity to create a visually appealing and memorable UI and UX for its users.
Some ways that Spotify uses the Law of Similarity are:
- The website uses the same shape (circles) for all elements that display information about the music options, such as album covers, artist photos, playlists icons, etc. This creates similarity between these elements and helps the users to recognize them easily.
- The website uses different colors (green, purple, yellow, etc.) for different genres or moods of music options, such as pop, rock, chill, etc. This creates similarity between these elements and helps the users to associate them with their preferences and emotions.
- The website uses the same color (green) for all elements that indicate the playing or pausing status of the music options, such as buttons, bars, icons, etc. This creates similarity between these elements and helps the users to control and monitor them easily.
Example 3: Netflix
Netflix is a website that allows users to watch movies and TV shows online or offline. The website uses the Law of Similarity to create an engaging and user-friendly UI and UX for its users.
Some ways that Netflix uses the Law of Similarity are:
- The website uses the same shape (rectangles) for all elements that display information about the movies and TV shows options, such as posters, titles, ratings, genres, etc. This creates similarity between these elements and helps the users to group them together and browse them easily.
- The website uses different colors (red, blue, orange, etc.) for different types or categories of movies and TV shows options, such as originals, trending, popular, etc. This creates similarity between these elements and helps the users to differentiate them from each other and discover new content.
- The website uses the same color (red) for all elements that indicate the watching or adding status of the movies and TV shows options, such as buttons, icons, badges, etc. This creates similarity between these elements and helps the users to access and manage them easily.
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. They can also enhance the visual hierarchy, clarity, consistency, attention, categorization, relationships, balance, contrast, and rhythm of their websites. They can also create a more aesthetically pleasing and visually appealing website that reflects their brand identity and personality.
The Law of Similarity is not the only principle of Gestalt psychology that can be used in web design. There are other principles, such as the Law of Proximity, the Law of Closure, the Law of Continuity, and the Law of Figure-Ground, that can also help to create effective and engaging UI and UX for websites. Web designers should be aware of these principles and use them wisely and creatively to enhance their web design skills and outcomes.
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.
A. Kostelnick and M. Hassett, Shaping Information: The Rhetoric of Visual Conventions. Carbondale: Southern Illinois University Press, 2003.
S. Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability, 3rd ed. Berkeley, CA: New Riders, 2014.
N. Norman, The Design of Everyday Things, revised and expanded ed. New York: Basic Books, 2013.