Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Improve Your Designs With The Principles Of Similarity And Proximity (Part 1)

The perceptual process enables us to perceive the world through our senses of sight, smell, sound, taste and touch. In particular, our visual system processes vast amounts of information in its environment. Rather than perceiving elements separately, our brain organizes patterns, objects and shapes into whole forms that we can understand.

Further Reading on SmashingMag: Link

The gestalt grouping principles of visual perception describe this organization as a set of principles that explain how we perceive and organize this huge amount of visual stimuli. The gestalt principles – similarity, proximity, closure, figure-ground, continuance and common fate – are a popular tool used by designers for visually organizing information. As a visual designer, and now an interaction designer, I apply these principles on a regular basis to create relationships and differences between elements in my designs. Understanding how these principles work, and how to use them in your designs, produces stronger and more engaging work.

In this first article, we’ll take a look at how the principles of similarity and proximity work, and look at real-world examples to illustrate them in use so that you can begin to use them in your own designs. Are you ready to improve your designs? Let’s begin by digging into similarity.

Similarity Link

The gestalt principle of similarity says that elements that are similar are perceived to be more related than elements that are dissimilar. Similarity helps us organize objects by their relatedness to other objects within a group and can be affected by the attributes of color, size, shape and orientation.

Using Color To Assign Relationships Link

Similarity is particularly affected by color. In the example below, notice how the colored shapes have a strong effect in assigning a grouping or relation, even when different shapes are included.

Using color to assign similarity
No other attribute can beat color when it comes to assigning relationships.

Using Size To Assign Relationships Link

Size is another useful tool we can use in creating similarity. In the example below, similarity in size causes the larger shapes to stand out and form a group, even though all the shapes are the same.

Using size to assign similarity
Size makes the larger squares appear more important than the surrounding shapes.

Using Shape To Assign Relationships Link

Shape is useful in grouping by similarity, but it has the weakest grouping effect when compared to color and size. In the example seen here, shape causes us to interpret elements as columns of circles and squares, as opposed to rows of alternating circles and squares.

Using shape to assign similarity
It’s much easier to see columns of similar shapes than rows of dissimilar shapes.

Using Orientation To Assign Relationships Link

Orientation can be used to group by similarity as well. By turning some of the squares in this group by 45 degrees, a separate grouping is made that is perceived as being related. They almost appear to be moving together in a similar direction in comparison with the shapes around them. This actually touches on the gestalt principle of common fate, a principle we’ll get into in a future article. But feel free to jump ahead and Google it (after you read this article, of course!). It’s a fascinating principle that happens frequently all around you.

Using orientation to assign similarity
Difference in orientation creates strong relationships.

More On Color Link

As mentioned earlier, similarity is particularly affected by color and can override other attributes. For example, we can override the example of similarity in shape by adding color. Now we perceive alternating rows of red and white shapes as opposed to columns of circles and squares. Give it a try. Try to see the columns of circles and squares. Possible but pretty tough now, isn’t it?

Alternating rows of red and white shapes
It’s difficult not to see alternating rows of red and white now.

Additionally, color can override size. When we add color to the example of similarity in size, we create two groupings separate from each other. Now we perceive the large red squares as one group and the single large white square as a separate, unrelated (and lonely) group.

Two separate groups created using color
Color trumps size in assigning relationships.

These two examples illustrate just how powerful color can be in assigning relationships between elements. Try using color in your work to differentiate elements and you’ll be amazed at how much stronger your groupings are.

Similarity In Practice Link

When we’re designing we can use similarity to convey organization and associations by showing which elements are related, or not related, to one another. For example, the two sections shown on Salon’s site below are grouped by their relative sizes. We clearly perceive two separate groups, with top stories on the left and most read on the right. Even though both sections provide the same function – displaying articles to read – grouping by size assigns more salience to the left grouping, which allows Salon to guide attention to their top stories.

Salon.com articles grouped by their relationships in size differences.6
Attention is guided to Salon’s top stories through the use of similarity in size. (View large version7)

In contrast, the lack of size differences in this example from Amazon doesn’t assign any particular importance to any one section. Despite this, similarity is still achieved through the use of repetition of similar size and shape, causing us to perceive rows of items.

Lack of size differences in product images.8
When images are the same size, no emphasis is given to any one section. (View large version9)

Similar Color Use Link

We know that color is a strong indicator of similarity, helping to organize and make content understandable. In this example from Cars.com, similar color use helps us differentiate between what is a heading, body copy, and link text. (Full disclosure: I work at Cars.com as an interaction designer.) By using distinct colors for each of these elements, we expect them to function similarly and, in the case of the blue link text, to behave similarly.

Similar color use helps us to understand the function and behavior of elements.10
Similar color use helps us to understand the function and behavior of elements. (View large version11)

Proximity Link

The gestalt principle of proximity says that elements that are closer together are perceived to be more related than elements that are farther apart. As with similarity, proximity helps us organize objects by their relatedness to other objects. Proximity is the strongest principle for indicating relatedness of objects, helping us understand and organize information faster and more efficiently.

The examples of circles below show how proximity can be used to help us perceive objects as being related. As we see here, the circles are spread out, exhibiting no relation, with each being perceived as a separate object.

Circles with no spacial proximity
These shapes exhibit no relation.

However, when the circles are pulled into close spacial proximity to one another, they are assigned a relation and are no longer perceived as separate objects.

Circles with strong spacial proximity
Shapes exhibit relation when in close proximity.

White Space Link

White space is an invaluable tool for creating proximity. Taking the same group of circles and adding whitespace helps us perceive things differently. Now, on the left, the proximity of the shapes causes us to perceive the two groups as columns, each its own group. On the right, the proximity of the shapes causes us to perceive the two groups as rows, again each its own group. Use white space in your designs to strengthen groupings as well as to differentiate them from other elements.

Columns and rows of circles
By adding white space between elements, we change the perception of the groupings.

The Power Of Proximity Link

Proximity is strong enough to overpower other elements of variation. Notice how proximity still wins out even when other attributes, such as color and shape, are added. Try as they might, color and shape do not overpower proximity here and each grouping is still perceived as a separate element.


Color is finally defeated by proximity!

Proximity In Practice Link

When we’re organizing information in our designs, we can use proximity to create relationships between elements to aid in understanding the information presented. For example, by grouping these images from the Apple Store together in close proximity, we assign a relationship to the whole group. We perceive them as being related and expect the content to be similar.

Images grouped together displaying relation.12
Images grouped together are perceived as being related. (View large version13)

However, when we remove the center column, we suddenly perceive two separate groups and have an expectation of different content between them.

Two separate groups of images14
Two separate groups are created by removing the center column. (View large version15)

Combining Proximity And Similarity Link

Grouping by proximity can also be combined with similarity to create stronger relationships. Seen in this example from Amazon, grouping by proximity and similarity in size causes us to perceive two separate groupings and assigns more prominence to the left group.

Books grouped by proximity and similarity.16
Grouping by both proximity and similarity creates stronger relationships between elements. (View large version17)

Proximity And Hierarchy Link

Proximity is excellent for organizing hierarchical elements. In this example from Crate & Barrel, options are grouped together under common headings, creating relationships, which makes scanning and finding information much easier.

Kitchen items grouped under headings.18
Finding information is easier when options are grouped under headings. (View large version19)

When the headings are removed and the options are grouped without proximity, we lose the relationships that were created and it becomes much more difficult to quickly scan and find the information wanted. Try it yourself. Go ahead and see how quickly you can find coffee mugs in the grouping with headings versus the grouping without headings. A bit more difficult to quickly jump to it, isn’t it?

Kitchen items with the headings removed.20
Without headings, finding information quickly is difficult. (View large version21)

Conclusion Link

Understanding how to use similarity and proximity to affect the relationships between elements in your work will help you create designs that enable easier organization and improve the usability of your work. Use similarity and proximity to create both relationships and differences between elements in your designs. Experiment with the use of white space, color, size, shape and orientation of elements and mix both principles together to produce very strong and engaging relationships.

In the next part of this series, we will look at closure and figure-ground, and explore how these two gestalt principles use positive and negative space to create simple yet powerful relationships.

Resources And Good Reads Link

(ml, da, og, jb, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/
  2. 2 https://www.smashingmagazine.com/2014/09/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
  3. 3 https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/
  4. 4 https://www.smashingmagazine.com/2014/08/improve-your-email-workflow-with-modular-design/
  5. 5 https://www.smashingmagazine.com/2016/04/improve-user-experience-real-time-features/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/10/similarity-salon-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/10/similarity-salon-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/10/similarity-rows-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/10/similarity-rows-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/10/similarity-cars-color-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/10/similarity-cars-color-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-Apple-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-Apple-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-Apple-removed-large-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-Apple-removed-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-Amazon-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-Amazon-large-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-with-headings-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-with-headings-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-no-headings-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/10/proximity-no-headings-large-opt.png
  22. 22 http://www.scholarpedia.org/article/Gestalt_principles
  23. 23 http://psychclassics.yorku.ca/Wertheimer/Forms/forms.htm
  24. 24 https://books.google.com/books?id=l0QPECGQySYC
  25. 25 https://books.google.com/books/about/Information_Visualization.html?id=UpYCSS6snnAC

↑ Back to top Tweet itShare on Facebook

Jon was a visual designer for many years before making the leap to interaction design. He has a master's degree in Human-Computer Interaction from DePaul University and lives and works in Chicago. You can follow him on Twitter at @jonhensley.

  1. 1

    Thomas McCourt

    May 5, 2016 12:39 pm

    Thank you, Jon – excellent article!

    3
  2. 2

    Looking at the examples on mobile, I wouldn’t say that proximity wins over color. The gap is too small. But zooming in makes the separation more clear.

    0
    • 3

      @chris – good observation. The rules are not set in stone. Context plays a massive role.

      Great article by the way. Very clear and understandable.

      0
  3. 4

    Vadzim Belski

    May 23, 2016 10:15 am

    Thank you Jon!

    I know this post is based around designs, still I can’t help but link it to the topic of B2B websites. Concentrating on information and functionality, it’s important not to lose focus on design and convenience. I think the principle of proximity can bring real value to vendors if applied to the designs of partner pages and partner portals. We carried out a research in the way companies with extensive partner networks display their partners on their respective pages: https://www.scnsoft.com/blog/the-guide-to-displaying-partners-on-your-website-correctly. To a great extent, the usability of a partner page depends on how well a company manages to organize a partner finder. In my opinion, proximity, especially white space, can be used to enhance search experience via organization of search categories and visually grouping search results by relevance.

    Or let’s take partner portals, a typical menu on the homepage is exactly the case with a great number of hierarchical elements. Without proximity it would be hard, if possible, to guarantee smooth and quick navigation.

    2

↑ Back to top