A Guide to Gestalt Theory — The Psychology of Good Design
The world of design is continuously changing.
Flat, Minimalist, Skeuomorphic — Realistic, Eclectic, Isometric — Asymmetrical, 3D, Art Deco — styles and trends are always in flux.
Every year there’s a new trend, and different way designs are being made.
What then, do designers fall back on as the constant to base their designs on?
Well, human behaviour.
That’s right. The underlying psychological tendencies of human behaviour remain reasonably constant, especially in terms of perception.
How humans see, process and perceive visual information serves as the concrete foundation for crafting ingenious designs that make your websites or apps more relatable and compelling.
On these very lines, the Gestalt theory — a collection of psychological principles for visual design — was founded in the early 20th century by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler.
The fundamental core of the theory is based on the psychological principle that humans see a picture as a unified whole instead of perceiving each individual part differently.
“The whole is other than the sum of its parts.”
Most of the principals that govern design originate from this gestalt theory.
It comprises of 5 gestalt principles, and several related principles were added on later.
So let’s first take a look at the 5 governing gestalt principles or the laws of Gestalt theory.
Law of Proximity
The law of proximity says that objects placed close to each other are perceived as a group, indicating a relationship between them.
So even without a text explanation, a design can indicate that this set of items is one group and that is another, just by leveraging the law of proximity.
As a derivation of this law, objects without a relationship between them, when placed together, will create confusion among the audience, as the mind wants to perceive them as being of the same group.
Like in the picture below, the figure on the left clearly shows that you’re dealing with 6 bits of information that are individual yet similar.
On the right side, it appears that there are three primary groups of information with two sub-points in each set.
So when it comes to design, keeping the law of proximity can help your audience form the correct interpretations and identify the context of the visual.
Such grouping has the power to define the visual and psychological comprehension of your design in a big way.
Even if all elements are individually very different from each other in terms of shape, size or colour, they will look like a group when placed together.
So what you place close together and what you move away is critical to the perception a user forms.
This image from the MTV music awards 2002 clearly shows you who the organisers are and who the sponsors are, even without any title indication whatsoever.
They are all random logos of companies in individual free-floating hexagons, and yet, you know exactly who’s a sponsor and who’s the organiser.
Law of Similarity
The law of similarity states that objects which look similar to each other are perceived to be in a group.
This could be elements that are similar in size, shape, style, meaning, function or anything else.
They should look visually similar in any way, to ensure that the law of similarity kicks in and helps viewers make associations and perceive items as being together and related.
This law helps people to differentiate between adjacent figures or overlapping images, using their different appearance and unique visual elements.
The law of similarity often works in conjunction with the law of proximity to create a holistic picture that triggers the right perception in people’s minds and establish a visual hierarchy.
Law of Closure
The law of closure proposes that the mind rushes to fill in what the eye can’t see.
Primarily, when humans come across a pattern with a missing part, the brain tends to fill the gap and produce a complete picture.
Isn’t it amazing how you can see a triangle in the image above, even though it is really just three Pac-man like circles with a notch cut out?
The law of closure allows designers to make some dramatic statements without directly sketching out what they intend to express.
The idea behind the closure is to provide just enough information to the viewers, allowing them to draw the conclusion himself, and then take a moment to admire the design.
It would be hard to talk about the law of closure without talking about the cover of Paul Thagard’s book Coherence in Thought and Action.
What you have is 8 circles with random lines running through them.
What you see though is a 3-dimensional cube that isn’t quite there, but it is.
Law of Figure Ground
The law of figure ground pertains to a harmonious relationship between a design’s background and foreground.
It states that elements in a visual are perceived as either the figure or the focal point of your design that needs to make up the foreground, or as ground or the background of the plan.
Properly using it can influence where you draw the eye and what you make the focal point of your design.
Like in the figure below, when a user needs to perform a search, highlighting the search bar establishes clearly that the website is now listening to user input.
Once this law is mastered, and designers learn to establish a relationship between the figure and the ground, there is plenty of space to play, and some striking effects can be created.
Some of the best examples of the law of figure ground are ones where both the background and the foreground mean something; they are a clear picture individually and produce an entirely new and striking effect when seen as a whole.
For instance, take a look at this fascinating logo of the Hope for African Children Initiative.
What do you see first? A figure of Africa? Or a silhouette of two human characters, much like a child looking up at a mother?
Together, the two combine to create a strong emotion of hope for African children, doing immense justice to the initiative. That is the power of good design.
Also take a look at the familiar old Mac logo of a happy face, which also looks like a smiling face from the side, looking into what looks like a computer screen.
Doesn’t it imply that you’ll be happy once you use a Mac computer?
These images are some brilliant examples if the law of figure ground.
Law of Common Region
Law of common region posits that elements that are enclosed within a defined boundary are perceived as a group.
So no matter how unique and different each individual element is, if it shows up enclosed in a box with other details, it is considered to have a relationship with all the other parts in that enclosure.
Items featuring outside the box are perceived as being different from the group.
Therefore, adding borders to a page can establish clear groups and create a separation from the other elements on the page.
As in the following example, the first picture shows three sets of metrics, individual and distinct from each other.
The second figure, however, implies that all the three metrics could be very closely related or even be different representations of the very same thing.
So those are 5 principles of gestalt theory that form the base of much of the UX principles we follow today.
There are several other laws, too, that became popular over time and now play a pivotal role in shaping visual perception. Some of these are:
Law of Common Fate
The law of common fate states that when humans see visual elements moving in the same direction, even when the movement is merely implied in an entirely static photograph — they tend to perceive that all of these elements are being triggered into motion by the same stimulus.
They are headed to the same or at least similar destination and hence appear to be in the same bandwagon.
When you see the movement of the scrollbar synchronised with the movement of the page, it is a classic example of the law of common fate.
Law of Continuity
The law of continuity states that the elements arranged on a line or a curve are perceived as more related to each other than items that don’t fall on the track or curve.
This law helps designers present visual cues to make the viewers look at a specific part of the page, quite expertly guiding their gaze.
Law of Symmetry
The law of symmetry proposes that humans tend to see objects as symmetrical shapes that take form near the centre and extend equally to both sides.
As a result, designs with symmetry are easy on the eyes and help create more balanced compositions.
Conclusion on Gestalt Theory
As you read through all these Gestalt principles, you found yourself agreeing to all of them, didn’t you.
It’s quite amazing how billions of humans around with so many different nations, cultures, identities and preferences, tend to display highly similar tendencies when it comes to visual perceptions.
In an age where design is more than just how a page looks, in fact when a design is a crucial marketing tool for every business, gaining a fresh understanding of the Gestalt theory will help you craft the best web and app pages that attract users and make them see just what you want them to see.
Author Bio: Hiral Atha is the Founder and CEO of MoveoApps, a mobile apps development company. With over 14 years of experience in tech and software development, she has managed and led several app development projects from ideation to implementation.
Originally published at https://inkbotdesign.com on August 8, 2019.