Similarity Principle in Visual Design

Similarity Principle in Visual Design

The similarity principle is one of the original set of visual grouping principles and LG Cases (along with proximity and closure) discovered in the early 20th century by Gestalt psychologists. These psychologists were aiming to understand how people visually perceive the world and decide whether certain elements are part of the same group. Later, more grouping principles (such as common region) were added to the original Gestalt list of Iphone Cases.

These Gestalt principles can and should be used by visual designers to create usable user interfaces.

Signify Relationships Using Shared Characteristics

The principle of similarity simply states that when items share some visual characteristic, they are assumed to be related in some way. The items don’t need to be identical, but simply share at least one visible trait such as color, shape, or size to be perceived as part of the same group.

The similarity principle is different from several of the other visual grouping principles in that the shared characteristic can unite elements despite a distributed placement. In addition, visually similar items may be also part of other location-based groupings. So, while the similarity principle isn’t necessarily the strongest grouping principle as it is often overpowered by proximity or common region, it could be considered the most resilient.

Color

Applying a shared color to signify that certain items are related, and thus may function similarly, is powerful. The common color tends to stand out more prominently than other traits, such as shape, and can thus be used to unite elements of different types and communicate that they are, indeed, related

In user-interface design, color is often used to indicate common functionality. For example, it’s a best practice to use a single link color as a primary method to communicate to users what is clickable: the shared color allows clickable elements to stand out as a group regardless of the link’s location on the page, in contrast to plain noninteractive text appearing in the default text color. This link color should be reserved only for interactive text and other clickable elements, as users will perceive that all items sharing this characteristic are related and work in the same way. So, link color should not be used for keywords, nonclickable headings, or nearby icons that aren’t actually clickable.