Gestalt and Design: Proximity and Common Region
Following my previous post about Similarity, this post goes more in-depth about the Proximity and Common Region principles
Proximity
When visual elements are located close together, they are most likely considered grouped together
Proximity is probably the most obvious of Gestalt Principles as it’s a natural tendency to group things that are close together. In the image below, all of the circles appear to be part of the same group due to their closeness.
The further elements are placed from each other, the more unrelated they appear. Whitespace is used to communicate the relationship between separate groupings. Usually, more white space used between elements indicates more of a disconnect between them.
In this image, the space separates the shapes into two groups. Each column of circles is grouped with a column of triangles rather than the other column of circles due to their closeness. Even though the objects are different, their closeness will group them together as proximity is strong and often overpowers other principles.
In the navigation menu above, the search and settings icons are placed all the way to the right, separate from the rest of the navigation. This indicates different functionality between the two different groups.
The principle of proximity can be seen all over, including in this writing. The letters of every word are placed together with space used to separate them from other words. Each word is placed next to another to form a paragraph with is then separated from other paragraphs.
Proximity is important to use in design, especially when trying to convey certain information.
The closely placed name and prices of the images indicate that they are connected. White space separates the item from other items.
Common Region
When visual elements share a region or distinct area they are likely perceived as belonging together
Much like proximity, the law of common region has to do with closeness.
In the image above, a border surrounds the circles in the box, grouping them together.
The card UX pattern is a great example of how a common region can be utilized in design. In the image above, because the information is all on the same card, it is automatically assumed that it is related to Saku Japanese Cuisine
The usage of containers helps to create a visual hierarchy. The image above shows both one large card and multiple smaller cards inside. The large container helps to communicate the overall relationship between the items whereas the individual cards help to establish smaller subgroups within.
The common region principle is incredibly powerful and overpowers most other elements, including proximity. In the image above, even though the navigation menu overlaps with the content, the container establishes a barrier and separates them from one another.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.nngroup.com/articles/common-region/
- https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2
- https://uxplanet.org/gestalt-theory-for-ux-design-principle-of-proximity-e56b136d52d1
Check out the other articles in the Gestalt and Design series
