10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

[Asynch] 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. 

Check out this classic example below:

Figure 1. Illustration depicting Gestalt principles

Image source:

Popular Science, https://www.popsci.com/story/diy/dalmatian-illusion/ (https://www.popsci.com/story/diy/dalmatian-illusion/)

Are you able to see the dog? Do you know its breed? What sort of environment is it in? What is the
dog doing? 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)
Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 1/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

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
Send

Image Sources:

Max Wertheimer: http://scihi.org/max-wertheimer-gestalt-psychology/; (http://scihi.org/max-wertheimer-gestalt-psychology/) Kurt Koffka:

https://www.britannica.com/biography/Kurt-Koffka; (https://www.britannica.com/biography/Kurt-Koffka)

(https://www.britannica.com/biography/Kurt-Koffka) Wolfgang Köhler: http://wkprc.eva.mpg.de/english/files/wolfgang_koehler.htm

(http://wkprc.eva.mpg.de/english/files/wolfgang_koehler.htm)

Max Wertheimer and his fellow Gestalt psychologists started with the law of grouping called Prägnanz
(https://lawsofux.com/law-of-pragnanz) , 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.
Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 2/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

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.

Figure 5: Principle of Proximity Example

Image Source:

https://courses.lumenlearning.com/intropsychmaster/chapter/gestalt-principles-of-perception/
Send
(https://courses.lumenlearning.com/intropsychmaster/chapter/gestalt-principles-of-perception/)

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.

Figure 6: Principle of Proximity in a PDF Form

Image Source:

https://www.toptal.com/designers/ui/gestalt-principles-of-design#:~:text=The%20classic%20principles%20of%20the,

(also%20known%20as%20pr%C3%A4gnanz). (https://www.toptal.com/designers/ui/gestalt-principles-of-design#:~:text=The%20classic%20principles%20of%20the,

(also%20known%20as%20pr%C3%A4gnanz).)

  Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 3/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

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.

Send
Figure 7: Principle of Similarity Example 

Image Source:

https://courses.lumenlearning.com/intropsychmaster/chapter/gestalt-principles-of-perception/

(https://courses.lumenlearning.com/intropsychmaster/chapter/gestalt-principles-of-perception/)

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.

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 4/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Figure 8: Principle of Similarity in Webpage Design 

Image Source:

https://www.usertesting.com/blog/gestalt-principles (https://www.usertesting.com/blog/gestalt-principles)

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.

Send

Figure 9: Principle of Closure Example

Image Source:

https://research-collective.com/blog/gestalt/ (https://research-collective.com/blog/gestalt/)

The WWF and the Adidas logos shown in Figures 10 and 11, are examples of the closure principle
in logo design. Can you think of other logos that are like these?

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 5/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

  

Figures 10 & 11. Principle of Closure in Logo Design

Image Sources:

WWF: https://en.wikipedia.org/wiki/World_Wide_Fund_for_Nature (https://en.wikipedia.org/wiki/World_Wide_Fund_for_Nature) ; Adidas:

https://blunt.one/index.php?main_page=product_info&products_id=249 (https://blunt.one/index.php?main_page=product_info&products_id=249)
Send

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.

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 6/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Figure 12: Principle of Continuity Example 1

Image Source:

https://courses.lumenlearning.com/intropsychmaster/chapter/gestalt-principles-of-perception/

(https://courses.lumenlearning.com/intropsychmaster/chapter/gestalt-principles-of-perception/)

Send
The same can be observed in Figure 13, even as the colors are changed.

Figure 13: Principle of Continuity Example 2

Image Source:

https://www.usertesting.com/blog/gestalt-principles (https://www.usertesting.com/blog/gestalt-principles)

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".

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 7/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Figure 14: Principle of Continuity in Logo Design

Image Source:

https://logogeek.uk/logo-design/gestalt-theory/ (https://logogeek.uk/logo-design/gestalt-theory/)

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. Send
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.

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 8/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Send
Figure 15: Principle of Area and Symmetry Example

Image Source:

https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/ (https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-

principles/)

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.

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 9/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Send

Figure 16. Principle of Symmetry & Order in Poster Design

Image Source:

https://www.canva.com/learn/gestalt-theory/ (https://www.canva.com/learn/gestalt-theory/)

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.
Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 10/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

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.

Send

Figure 17: Principle of Figure/Ground Example

Image Source:

https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/#symmetry-and-order

(https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/#symmetry-and-order)

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.

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 11/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Send

Figure 18. Principle of Figure/Ground in Poster Design

Figure 19. Principle of Figure/Ground in Webpage Design

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 12/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

Image Source:

https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/

(https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/)

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.
Send

Figure 20: Principle of Common Fate Example

Image Source:

https://www.toptal.com/designers/ui/gestalt-principles-of-design#:~:text=The%20classic%20principles%20of%20the,

Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 13/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

(also%20known%20as%20pr%C3%A4gnanz). (https://www.toptal.com/designers/ui/gestalt-principles-of-design#:~:text=The%20classic%20principles%20of%20the,

(also%20known%20as%20pr%C3%A4gnanz).)

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).

Send
Figure 21. Principle of Common Fate in Interface Design

Image Source:

https://andyrutledge.com/common-fate.html (https://andyrutledge.com/common-fate.html)

To learn more about the Gestalt Principles of Perception, you may watch the video below.

The Gestalt Principles | Basics for Beginners

0:00 / 17:20

https://www.youtube.com/watch?v=FryaH599ec0 (https://www.youtube.com/watch?v=FryaH599ec0)
Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 14/15
10/4/22, 10:59 AM [Asynch] Gestalt Principles of Visual Perception: T-HUMSS11-E Empowerment Technologies 2 (Data Visualization)

References:

Chapman, C. (2018) Exploring the Gestalt Principles of Design. Retrieved from

https://www.toptal.com/designers/ui/gestalt-principles-of-design#:~:text=The%20classic%20principles%20of%20the,
(also%20known%20as%20pr%C3%A4gnanz). (https://www.toptal.com/designers/ui/gestalt-principles-of-

design#:~:text=The%20classic%20principles%20of%20the,(also%20known%20as%20pr%C3%A4gnanz).)

Interaction Design Foundation. Gestalt Principles. Retrieved from https://www.interaction-

design.org/literature/topics/gestalt-principles (https://www.interaction-design.org/literature/topics/gestalt-principles)

Psynso (2018). Principles of Gestalt System . Retrieved from https://psynso.com/gestalt-system-principles/

(https://psynso.com/gestalt-system-principles/)

UserTesting (2019).7 Gestalt principles of visual perception: cognitive psychology for UX. Retrieved from
https://www.usertesting.com/blog/gestalt-principles (https://www.usertesting.com/blog/gestalt-principles)
Yuk, M. & Diamond, S. Applying Gestalt Theory to Data Visualization. Retrieved from
https://www.dummies.com/programming/big-data/big-data-visualization/applying-gestalt-theory-to-data-
visualization/ (https://www.dummies.com/programming/big-data/big-data-visualization/applying-gestalt-theory-to-data-

visualization/)

This topic will be followed by a quiz in the next online synchronous session, which can be accessed
through the link below. Send

(https://dlsu.instructure.com/courses/112463/quizzes/263632)

Another written task is the Gestalt Poster, which can be accessed through the link below.

(https://dlsu.instructure.com/courses/112463/assignments/944871)

Click a link below to go back to the Learning Modules or Home page.

(https://dlsu.instructure.com/courses/112463/modules)  

(https://dlsu.instructure.com/courses/112463/pages/learning-modules)

(https://dlsu.instructure.com/courses/112463/pages/welcome-to-emtech2)
Course Chat 
https://dlsu.instructure.com/courses/112463/pages/asynch-gestalt-principles-of-visual-perception?module_item_id=2639743 15/15