Users perceive a relationship between elements that look similar.

<aside> ℹ️ The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups.

</aside>

The law of similarity can describe two concepts.

The first is one of Aristotle's laws of association and the law of similarity proposes that when two things are alike the thought of one will trigger the thought of the other. For example, when we think of a beach ball we might visualize a volleyball as well because they are both balls that are thrown around when at the beach.

A second conceptualization of the law of similarity is in Gestalt psychology.

It states that the law of similarity is the tendency to perceptually group similar items and objects together. Gestalt psychology focuses on how we perceive individual items as a whole. To illustrate the law of similarity, look at the grouping of items below:

AAAAA BBBBB CCCCC

similarity-shapes.png

If asked to describe this most people would say there are three rows of letters instead of five columns of letters. This is because of the law of similarity - individuals are more likely to group the similar items together. It is a grouping based on the likeness between objects.

Another example could be seen in how a person organizes their clothing. It is more common that a person would put their pants and shorts in the same drawer rather than pants/shirts and shorts/socks. Pants and shorts are more likely to be grouped together because they are more similar to each other.

Takeaways

  1. Elements that are visually similar will be perceived as related.

  2. Color, shape, and size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality.

  3. Ensure that links and navigation systems are visually differentiated from normal text elements.

Resources

Similarity Principle in Visual Design

The Law of Similarity - Gestalt Principles (Part 1)

How to use Gestalt Principles and the Law of Similarity in design

Gestalt Principles of Design — Similarity

Design Principles: Visual Perception And The Principles Of Gestalt