Gestalt and Design: Similarity
My last post introduced the Gestalt Principles on a higher level. The next few posts will go more in-depth about each principle.
Similarity
When visual elements share similar characteristics with one another, they are perceived as being grouped together.
When looking at the image below, what do you see? Most would say five vertical columns alternating between green and gray circles — not horizontal rows. Because the circles in the vertical columns share the same color, the eye automatically sees them as related.
Similarity is dependent on superficial traits — color, shape, orientation and size are some seen in visual design.
Above, there appears to be some kind of relationship between the larger squares. Though they are not next to each other, the eye still connects and groups them together.
In the image above, the two white rectangles are the same and are automatically perceived to act in a similar manner. Contrarily because the purple rectangle below is different, it is regarded as a separate element.
Similarity helps to establish a hierarchy in building relations between elements that are at a similar level.
The principle of similarity is seen between the three-item titles as they share the same size, font, and color. This indicates that there is some commonality between them, here being that they are all product names.
A relationship is also established between elements that share a similar format. The elements in the image above can also be perceived as being related as they each share the format of a title, image, rating and price.
Certain characteristics can override others when forming groups. Color has the strongest effect when grouping elements. In the image above, the colors of the squares on each day of the calendar represent the price of the related color in the rectangle. Although the shapes are different, the colors establish a relationship.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.nngroup.com/articles/gestalt-similarity/
- https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1
Check out the other articles in the Gestalt and Design series
