Short introduction to Gestalt laws
In early 20th century, Gestalt psychologists were trying to understand how people perceive the world and why we see objects in some ways but not in others.
This is how Gestalt principles were coined. The Laws of Proximity, Similarity, Closure, and Common Region are often used in interface design. The Laws of Proximity and Common Region explain how people decide whether an element is a part of a group and are especially helpful for interface designers because they help set up a hierarchy by putting elements into groups. Here is how these laws are defined:
The Law of Proximity: Objects that are near or proximate to each other tend to be perceived as a group. Element grouping, or chunking, helps one scan information.
The Law of Common Region: Elements tend to be perceived in groups if they share an area with a clearly defined boundary. Great to use when there is a lack of space.
Now that we know what these laws mean, let us take a look at some examples:
How grouping, or chunking, helps facilitate interaction with a webpage
As previously mentioned, grouping sets up a hierarchy that regulates the arrangement of elements on a webpage; such a hierarchy supports an eye flow making it easy for a user to move through the content.
The Proximity Law is the golden rule for grouping, or chunking, elements.
The word chunking comes from cognitive psychology and denotes a process of taking individual bits of information and grouping them into larger units, which helps improve short-term memory.
For example, memorising six digits individually will be more challenging than breaking them into three groups containing two digits each. This way, our memory needs to retain just three units instead of six. In other words, it is easier to remember, say, 23 56 98 than 235698.
Therefore, if you group elements correctly, you improve the visual perception of a page and decrease the interaction cost, or the effort that a user has to put into interacting with a website to achieve their goals.
Now let us get back to the Law of Common Region that we mentioned above. It is a useful tool in case you do not have much space, want your interface to be compact, or need to fix things quickly.
In the example below, the spacing between the upper and lower images and the picture captions is almost the same, which makes it difficult to understand which element each caption belongs to, especially when there are many images in the grid.
We can solve this issue by simply adding a border around each item so that the relationship between the caption and the image may become clear.
Here is an additional example from real life. In the old version of Ikea’s website, it was hard to tell where the quantity picker belonged. After redesign, the elements became not only well adjusted but also got a separating border between them. The designers utilised the Proximity Law and backed it up with the Law of Common Region separating items in the cart with a visual border.
The Law of Proximity and the Law of Common Region are two very important Gestalt laws that help a designer create simple and usable interfaces, improve the perception of a webpage, and facilitate smooth interaction with a product.