By Gemma Penson - Computer Science Student @ Trinity Hall, Cambridge
Developed by German psychologists, the Gestalt laws describe how humans perceive the world around them through a psychological process known as perceptual organisation. In this process, the human mind will group stimuli (objects) into comprehensible patterns in order to readily determine their meaning, which explains why you read a sentence like this, notli ket his!
When creating user-computer interfaces, it’s important that design teams harness psychology principles such as The Gestalt Laws in order to appeal directly to human instinct. This is because the user’s perceptual processes will otherwise impose its own structure on the display and it may be one that the designers didn’t want!
The first of The Gestalt Laws is known as the Figure-Ground relationship which states that humans are able to visually separate objects on different layers of focus due to the brain’s processing of negative space. In general, you’ll intuitively perceive the larger, lighter areas of an image as the (back)ground and the darker, lighter areas as the figure. Take the following optical illusion, for example:
Most humans will perceive the two faces in the left image and the vase in the right image first. Interface designers will often use this phenomenon in order to highlight focus points by using semi-transparent overlays, shadows or by blurring the elements in the background:
The second law is that of proximity, which refers to how close elements are to one another. Grouping subjects into a small area will create the perception of grouping or, by putting whitespace between subjects, you can create separation even when the other subject characteristics are the same. Designers will therefore use whitespace to create proximity relationships that make digital content more comfortable to perceive. Take these identical circles, for example:
Another way designers can create groupings is through the law of similarity. This law states that subjects that have a similar visual appearance, including their colour, size and shape, will seem more related. You’ll probably see the groupings of these coloured circles as rows:
One of the most common-knowledge Gestalt laws is that of symmetry, because who doesn’t love symmetry! Humans are instinctively attracted to symmetry as it creates the impression of stability and order whilst also simplifying the perception process of objects. A symmetrical navigation menu, for example, tends to be better perceived than an asymmetrical one.
On the flip side, one of the most unknown Gestalt laws is that of continuity. When viewing a series of lines, the human eye has a tendency to follow the smoothest path regardless of how many lines there are. Any objects that reside along this path are intuitively viewed as being related or grouped.
This continuation is a valuable tool when guiding the user’s sight in a certain direction. This could be done, for example, with a horizontal slider for which the human eye will naturally be drawn from one item to the next.
The last Gestalt rule is that of closure. This rule explains that the human brain has a tendency to ignore contradictory information and instead fill in information gaps in order to create a whole. You’ll still be able to perceive the following shapes despite them being incomplete:
Every time you design a loading indicator or a progress bar, remember the law of closure! As we’ve seen, you’ll need to not only learn about, but also exploit, cognitive processes in order to create seamless, comfortable and aesthetically pleasing user interfaces.
Further reading:
2021. Chapman, Cameron. TopTal. Exploring the Gestalt Principles of Design. Available at: <https://www.toptal.com/designers/ui/gestalt-principles-of-design>
2021. Cherry, Kendra. Verywellmind. Gestalt Laws of Perceptual Organization and Our Perception of the World . Available at: <https://www.verywellmind.com/gestalt-laws-of-perceptual-organization-2795835#:~:text=The%20Gestalt%20laws%20of%20perceptual,ways%20in%20which%20perception%20works.&text=It%20is%20important%20to%20remember,are%20actually%20heuristics%20or%20shortcuts