Gestalt Psychology sorted out
How we can easily understand Gestalt psychology and exploit it for good design.
I have taken the Interaction Design Foundation’s course on Gestalt Psychology for Web Design. The course threw at me many principles and laws:
Emergence (lesson 1.2)
Reification (lesson 1.3)
Multistability (lesson 1.4)
Invariance (lesson 1.5)
Figure/Ground Organization (lesson 1.6)
Law of Pragnanz (lesson 1.7)
Law of Similarity (lesson 2.1)
Law of Proximity (lesson 2.2)
Law of Familiarity (lesson 2.3)
Law of Symmetry (lesson 2.4)
Law of Continuity (lesson 2.5)
Law of Common Fate (lesson 2.6)
Law of Closure (lesson 2.7)
Law of Synchrony (lesson 2.8)
Law of Element Connectedness (lesson 2.9)
Law of Common Region (lesson 2.10)
Some of these principles are NOT mutually exclusive. Reification and Law of Closure essentially refer to the same thing, so do Laws of Common Fate and of Synchrony. Multistability is a phenomenon often caused by Figure/Ground Organization.
It’s really hard to remember all these principles, because there is no underlying theory that unites them all.
After a lot of trial and error, I have come up with an underlying theory that ties these principles together. There’s no reason why this theory is correct. But it will help remember all these perceptional biases that human beings possess.
So here we go:
1. Most fundamental principle: Emergence
When we see something, we immediately make sense of what we see as a whole. We do not analyze each bit of color and shape to make sense of the whole scene. This perceptional tendency of human beings is called Emergence.
We do this because only such humans survived during the pre-historical periods. To avoid the attack of predators, or to catch animals swiftly for eating them, only those who could immediately understand their perception managed to survive.
2. By-product of Emergence: Multistability
Multistability is a phenomenon that our perception goes back and forth between multiple interpretations of an image, like the famous Rubin’s vase:
This is a by-product of Emergence (in my humble opinion). As our brain tries to immediately make sense of what we see, an ambiguous image keeps changing in our perception.
3. Five-step shortcut procedure of perception
To immediately make sense of what we see, our brain needs to make various shortcuts to process visual information. These shortcuts can be described in five steps. This is just heuristic. I don’t know if our brain actually takes these five steps. Maybe or maybe not. If you’re a neuroscientist, tell me what the truth is.
Step 1: Group visual elements
We recognize objects by grouping visual elements, based on several principles.
The first set of principles originates from the fact that related objects (the same species of animals and plants, the same type of rocks, etc.) tend to look similar, reside in proximity, and move together, like a school of fish. The Laws of Similarity, Proximity, and Common Fate help us group visual elements.
For the Laws of Similarity and Proximity, see Jon Hensley’s Smashing Mag article in 2016. For the Law of Common Fate, see Andy Rutledge’s article. The Laws of Similarity and Proximity form the basis for two of the four design principles (repetition and proximity) advocated by Robin Williams in her bestseller book Non-Designer’s Design Book.
The second set of grouping principles comes from the fact that an object in nature is physically continuous (Laws of Continuity, Element Connectedness, and Common Region: see Andy Rutledge’s another article) and an animal or a plant tends to be symmetric (Law of Symmetry: we tend to perceive a symmetric pattern as one object).
The Law of Continuity can be seen as the perceptional basis for the third of Robin Williams’s design principles: alignment. An example is what you are now seeing: a paragraph.
The last grouping principle is the Law of Familiarity. We use our memory to recognize a particular visual pattern as an object.
A great example is an emoticon. When we see ;-), we recognize it as a winking face, rather than seeing it separately as a semicolon, a hyphen, and a closing parenthesis.
An application of these grouping laws for design is not just about observing them but also about breaking them. Designers can then achieve contrast, the last of Robin Williams’s design principles. A visual element that doesn’t follow the grouping laws attracts the user’s attention as something separate from the rest.
Step 2: Fill in the missing visual information
Even when an object is partly hidden, our brain fills in the missing visual information. This perceptual bias is known as Reification or the Law of Closure. The image below is a good example of this phenomenon.
Logo designers often exploit this perceptual tendency as in the famous WWF logo:
Step 3: Go for simplicity
If the above process results in multiple possible interpretations, our brain chooses the simplest one. This perceptual bias is called the Law of Pragnanz.
As Kevin Matz explains in his article in 2011, when we see the image below:
we recognize it as a wired cube, not as seven contiguous two-dimensional shapes of triangles and quadrilaterals.
This law perhaps explains why simplicity is often advocated for what designers should aim for. Complex design may be misunderstood by the user as something simpler and unintended.
Step 4: Recognize as the same object seen in different conditions
Different pieces of visual information can be recognized as the same object seen in different conditions such as seen close or far, in front or from the back, etc. This perceptual phenomenon is called Invariance.
When we see a family member, for example, the visual information differs when we see him/her facing in front or looking back. We still recognize these different pieces of visual information as the same person.
Step 5: Identify figures against the background
The final step to shortcut visual processing is to understand which visual information is the figure and which is the background. The objects recognized as the figures come forward, and we ignore the background. This perceptional processing is known as the Figure/Ground Organization.
Multistability, the perceptional phenomenon described above, occurs often due to ambiguity in the Figure/Ground Organization. And the logo designer often plays with it:
In this example, we recognize the golf player as the figure against the pale yellow background. But once the background around the golfer’s head is also recognized as part of the figure, we see the profile of a solider with the helmet on, like the one from Sparta of Ancient Greece:
This Spartan Golf Club logo actually exploits three more of the Gestalt principles described above. Let me show the logo again, to ease my explanation:
First, Reification is at work: our brain fills in the missing contour of the Spartan soldier’s profile. The Law of Familiarity is also at work: the silhouette of a golfer is recognized as such because we know what a golfer looks like after hitting the ball. The Law of Continuity makes us recognize the blocks that form an arch as tracing the movement of the golf club, rather than as some random separate blocks.
For design applications, Reification (step 2) and the Figure/Ground Organization (step 5) can be exploited for adding the “wow” factor as seen in the logo examples above. All the grouping laws (step 1) can be exploited to organize visual information as intended.
If you are interested to know more about Gestalt psychology, I recommend taking the Interaction Design Foundation’s course on Gestalt Psychology for Web Design as I did. But with the help of the framework that I describe in this article. Otherwise, you will get lost for sure.
