Gestalt Principles of Visual Perception

Perception is a set of psychological processes by which people tend to organize environmental stimuli
into some meaningful patterns or whole according to certain principles. Perception is your ongoing
experience, based on how you interpret incoming messages from your various senses.

Your ability to answer these questions and perceive the dog is not because of your knowledge of what
comprises a dog (its parts), but because of your familiarity of how it looks like (as a whole). (Psynso,
2018)

The Gestalt Principles of Visual Perception were created by a group of psychologists in the early 20th
century that explains how visual perception worked. “Gestalt” is a German term for shape, figure, or
form. The set of principles says that humans perceive objects and their environments as well-organized
patterns, based on the concept of grouping, rather than separate components, where the whole is
greater than the sum of its parts.

Figures 2, 3, and 4. From left to right: Gestalt psychologists Max Wertheimer, Kurt Koffka, and Wolfgang
Köhler

Max Wertheimer and his fellow Gestalt psychologists started with the law of grouping called Prägnanz
(Links to an external site.), which became the foundation for the Gestalt Principles of Visual Perception
that are known today. These principles are being used in graphic design to help create more visually-
appealing, intuitive, and functionally-aesthetic forms and interfaces. Each of the seven (7) principles are
further explained in the succeeding sections.
Proximity

The principle of proximity or contiguity says that things that are closer together will be seen as
belonging together.

Figure 5 shows that the circles in (a) is in one group, while the image in (b) has three groups of circles.

 The distance between objects in display affects our perception of whether or not they are
related to one another.
 Objects near one another are perceived as related or part of a group. Once it is far away, they
are understood to be unrelated to each other.

Here is another example where proximity is not appropriately used in design. You might have
encountered similar forms which are confusing to fill-up because of the proximity between the labels
and the blank spaces. In this form from a courier company, users tend to indicate the Primary Business
Name/Trade name in blank "c", rather than in "d", because the former is closer to the label.
Similarity

The principle of similarity says that things that have the same visual characteristics, such as size, shape,
texture, value, color, or orientation, will be seen as belonging together. In Figure 7, objects with the
same color are perceived to belong to a group.

Here is an example of using similarity in interface design. Most well-designed websites, like this one in
Figure 8 from GitHub, groups sections on the page according to their purpose through color-coding or
the application of the same design features for one group: fonts, alignment, texture, style, etc. You can
easily distinguish static labels from interactive ones based on their design similarities.
Closure

The principle of closure predicts that we complete figures rather than distinguish their missing parts.
Figure 9 can be perceived as two triangles and three circles.

 The closure principle states that the human visual perception system attempts to automatically
close open parts of the figures so that they are perceived as whole objects rather than separate
pieces.
 A tendency to close a simple figure, independent of continuity or similarity. It results in an effect
of filling in missing information or organizing information which is present to make a whole.

The WWF and the Adidas logos shown in

Continuity

The principle of continuity envisions the preference for continuous figures. We can see only two groups
of dots, following two wavy lines, instead of four groups in the example shown in Figure 12.

 This principle works on the fact that our visual perception system is designed to resolve
ambiguity and to fill in missing data to create whole objects.
 We are hard-wired to favor continuous forms rather than disconnected segments. What our
brains do is fill in missing information if needed.
The same can be observed in Figure 13, even as the colors are changed.

A third example in Figure 14, shows the principle applied in graphic design. The choice of font for the
Coca-Cola logo applies continuity as our eyes follow the letters from the first "C" in "Coca", to the next
"C" in "Cola", and then to "l" and the last "a".
Symmetry and Order

The principle of the symmetrical figure is seen as a closed figure. Symmetrical contours define a figure
and isolate it from its ground.

 Our visual system prefers to see simple symmetrical figures rather than more complex and
asymmetrical figures.
 Our visual system also tries to lessen complexity by choosing to see simple symmetry in objects.

Look at Figure 15 below. Notice how you tend to perceive the one on the left as one object, while the
one on the right as two objects. These are the effects of symmetry and asymmetry, respectively, on
visual perception.

Here's an example of the Gestalt Principle applied in graphic design (see Figure 16). The event poster
shows a half of a bike wheel and half of a manhole in New York City. Yet, we tend to perceive the two
halves as one whole circle because they are symmetrical.
Figure/Ground

The principle of figure-ground is the segmenting of our visual world into figure and ground/foreground
and background/positive space and negative space.

 The figure/ground principle states that humans have a predisposition to see objects within a
relationship of primary and secondary importance.
 The figure or foreground is of more importance than elements that sit behind it on the
background.
 It also explains that the characteristics of the objects determine their assignment to either the
fore or background.

There have been many versions of the classic example of the figure-ground principle like the ones shown
in Figure 17. What do you see first? What you first perceive becomes the foreground/figure and the
other as the background/ground.
You can experiment with design and style elements to somewhat force the user to focus on a more
important of the screen. You can change the colors, size, contrast, and position of the objects to help
the viewers shift their focal attention. The poster designs in Figure 18 and the graphic elements in the
website design in Figure 19 show the use of such design elements.

Common Fate

The principle of common fate is not part of the original Gestalt Principles, but had been recently added
because of similar perception concepts that are applied in relation to Prägnanz. It combines the
principles of proximity, similarity, and continuity, where multiple, similar, objects that seem to move
towards the same direction are perceived as a single figure. This can be naturally observed with a flock
of birds, a herd of sheep, or a school of fish (see Figure 20).

 The figure/ground principle states that we perceive shapes as lines moving along the smoothest
path.
 The elements do not have to be moving, like in a video, animation, or GIF, but they must suggest
motion/movement.
The principle of common fate is usually seen in the design of menus, where we immediately perceive
menu items in a group as they move together when expanded/collapsed (see Figure 21).