Gestalt's Principle of Similarity

Regarding UI design, objects with similar visual characteristics (color, shape, size) are probably related. These visual cues are essential to help a user easily understand your design.

As users, we see four columns thanks to the similarity principle - Each type of shape forms up a group. This principle is one of the original "principles of visual grouping" discovered by Gestalt's psychologists.

These psychologists wanted to understand how people perceive the visual world and determine how do certain elements belong to the same group. Later, more principles were added to Gestalt's list. These Gestalt's principles can and should be used by designers to create usable user interfaces.

Categories of shared Characteristics

The principle of similarity states that when the items share any kind visual characteristic, they are presumably related. They don't need to be identical - but simply share at least one visual characteristic. Being color, shape or size.

Color

Applying a color to perceive the idea that certain items are related and can work in same way is a powerful move. Usually the use of color tends to stand out more than other characteristics like shape - therefore it can be used to group different kind of elements and communicate that they are, in fact, related.

Despite the shape disposition, the color usage here is more powerful, so it groups the center line of shapes although they are different between each other.

Here, color keeps acting as a shared line, even when used in a random pattern. In User Interface design, color is frequently used to indicate common funcionalities. For example, color allows something clickable to stand out from the rest of the website structure, contrasting with non-interactive text that displays in the standard color. Link color should be restricted to interactive text, so people will associate - If something has that color, it means that is clickable.

Shape

As seen in the previous illustrations, shape can also be used to indicate a group. In user interface design, we generally apply the same rectangular shape to certain elements to tell the user they are clickable buttons, or pill-shaped shapes in some cases.

When elements share the same shape, sometimes, we may ignore details like the labels or even the text inside the shape - that can be problematic if those same details are supposed to differ the function of the shape. When used well, displaying the same icon repeatedly in an interface communicates that these associated elements will function in a similar way.

Size

Size can also be used to signal relationship. Objects that are sized similarly are likely to be perceived as related, often sharing the same level of importance.

In a user interface, we often use size to emphasize which areas of content or calls to action are the most important. Same size means the same visual prominence, and, all other things being equal, connects all the elements that share that attribute. Using size consistently creates a visual hierarchy and makes pages easy to scan, as people can immediately see and understand these type groupings.

Color, shape, and size are not the only way to show similarity; there are many more visual traits that can be leveraged to communicate that certain elements are related. The same font treatment (bold, italic, and so on) can indicate that pieces of text are related and represent the same type of information. Similarly, orientation or even movement can signal that elements belong to the same group and likely share a common meaning or functionality.

Adapted from Similarity Principle in Visual Design by Jakob Nielsen