Objects with similar visual traits are most likely related — or at least they should be, when it comes to user-interface design. Clear, consistently applied visual rules for each type of UI element are critical to helping people understand and use the design easily. This is because each interaction develops users’ expectations for how other similar elements will function.

Definition: The principle of similarity states that items which share a visual characteristic are perceived as more related than items that are dissimilar.

Graphic showing a 4-by-3 grid of shapes, where the first column is 3 circles, followed by a column of triangles, then another column of circles and a last column of triangles.
This grid of shapes is typically perceived as four columns (rather than three rows, or as a single large group) due to the principle of similarity. Each shape type forms one group.

The similarity principle is one of the original set of visual grouping principles (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.

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.

Graphic showing a 4-by-3 grid of alternating columns of circles and triangles, where the middle row is all blue.
Color is a strong similarity characteristic that can unite elements of varying types. Here, a shared blue color creates the perception of rows, despite the columnar arrangement of shapes.
Graphic showing a 4-by-3 grid of alternating columns of circles and triangles, where the top row contains 2 blue circles, the first circle and last triangle in the middle column are blue, and the middle triangle and circle in the bottom row are blue.
Color continues to act as a clear shared trait creating the perception of a grouping, even when used in a random pattern across different shapes.

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.

Screenshot showing a red upload icon centered above a red "Record or Upload" button.
Tribute.co: The upload icon and the Record or Upload video button under it shared the same red color and seemed to be a single group. In designs like this, users are likely to assume that clicking either the icon or the button would trigger the same functionality — however, this icon was purely decorative and not clickable.

Same-color buttons will be perceived as sharing the same level of importance. Thus, a separate color should be reserved for primary calls-to-action to help them stand out among secondary buttons. In the example below, all the buttons in the Message Center were green, so the user had to spend time figuring out which was the primary button that submitted the form. (In addition, the Submit button is far from the message area, and, according to Fitts’s law, this lack of proximity will also slow down users.)

Screenshot showing a green Cancel and green Submit Inquiry button under a Message Center heading, above a form with a green Add Attachment button below the form.
The Submit button in the Message Center of Synchrony Bank shared the same color as the Cancel and Add Attachment buttons and blended in with these secondary actions.

Shape

As seen in the earlier illustrations, shape can also be used to indicate grouping. In interface design, we often apply the same rectangular shape to certain elements to indicate they are all buttons or style certain category links as circles or rounded “pill” shapes to strengthen their relationship.

Product-listing page on Asos.com, showing rounded buttons used for subcategory navigation links, compared to rectangular filter buttons.
The subcategory links on Asos.com were all shaped as rounded rectangles to strengthen their perception as a group and communicate their similar functionality as navigation. In contrast, the rectangular shape of the filters below signaled that group as having a different functionality.

When elements share a shape, we may assume they are the same and thus overlook details such as accompanying labels, small text within the shape, and slight variances in the form. This can be problematic if the elements are, in fact, meant to differ. For example, several of the icons in the Products navigation within the Makr tablet app were very similar shapes, with two of them being identical. The visual similarity can wrongly communicate that the categories are related — unless it’s purposeful that these categories belong together? There’s a fine line between ensuring that a set of icons appear visually consistent and signaling too strong a relationship between unintended pairs.

Screenshot showing very visually similar icons used for various product types in a navigation menu.
Avoid using the same or very similarly shaped icons to represent different categories, as they can wrongfully signal a relationship. In the navigation of the Makr app, the same icon was used for both Save the Dates and RSVPs, and another very similar icon was also used for Thank You Cards.

Similarly, our past research on visual indicators as differentiators for items within a list found that users were able to more quickly and accurately find certain items when the indicators had a unique shape — if the indicators appear too similar, it takes longer to scan and find how they differ. For instance, on the Etsy homepage, some products are marked as having free shipping or being a bestseller with similarly shaped indicators. Thankfully the two indicators are at least different colors, and the Bestseller indicator includes a small icon to help visually distinguish them as being a different group than the Free shipping items.

Row of 5 product listings on Etsy.com, where several items are indicated as Bestsellers (marked in yellow) or having Free Shipping (marked in green).
Etsy.com: The indicators Free Shipping and Bestseller were enclosed in rounded rectangles of different colors, and Bestseller also included a special icon. These features make the two indicators easy to distinguish. Were they the same color, this shared shape would cause them to appear too similar, and would slow users down.

When used well, displaying the same icon repeatedly throughout an interface communicates that these associated elements will function in a similar way. For instance, different icons can signal which menu items are links to landing pages versus expand an accordion or what links may send users to external sites. In the below example from the Etsy homepage, arrow icons were placed beside a variety of elements to indicate that they were clickable, rather than using a color as the similar trait.

Screenshot of Etsy homepage showing a right-pointing arrow icon displayed beside several text links in varying font treatments.
The arrow icon was similarly placed beside each clickable element. This communicated that they were functionally similar, even though the font treatment differed.

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.

3 large black circles randomly arranged among 4 smaller black circles.
The large circles in this graphic are likely to be perceived as related and as belonging to a different group than the smaller-sized circles.

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.

Within a product-listing page, for example, each individual product listing is displayed at the same size (and in the same shape). This consistent visual styling is what tells us that all the items in that area are products; the shared size separates it from other, different UI elements. When an item appears at a different size or shape within this listing, it stands out as not belonging to the product grouping. For example, on Anthropologie.com, promotions for product collections were displayed at double the size of an individual product listing.

Product-listing page on Anthropologie.com, showing 2 larger rectangles of promotional items within a grid of individual product links.
Promotions for product collections were displayed at a larger size than the surrounding product listings, to effectively communicate that they were a different type of content element.

In contrast, when various types of content are displayed at the same or a very similar size, they are often perceived as being related — even though they are different. This issue commonly occurs in the right rail of websites, where both actual content and external advertisements are often displayed at similar sizes. Because users expect to see ads in the right rail, all the content there is subjected to banner blindness, especially when styled similarly. That’s why several participants in our study on instructional videos completely missed the video tutorial showing how to complete this napkin fold on the Martha Stewart website — it was sized exactly like all the display ads surrounding it.

Instructional page on the Martha Stewart website showing a napkin-folding how-to video presented within the right column of the page, styled similarly to the nearby ads.
Users mistook the video in the right rail of this Martha Stewart how-to article as being an ad, because it was sized and shaped similarly to the other ads in that area.

Many Other Similar Traits

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. The principle of similarity is pervasive in visual design, and its effect can be seen in almost every interface design in existence.

Learn more about visual perception, how it applies to UI design, and other psychology principles in our training course on The Human Mind and Usability.