This document provides a tutorial on Gestalt principles of visual perception. It discusses how Gestalt psychologists identified consistent behaviors in how the mind groups visual information. The tutorial is organized into sections on key Gestalt principles like figure/ground organization, proximity, closure, and presents examples to illustrate each principle. It also discusses how understanding these principles can help presenters design effective slides that communicate messages clearly to audiences.
1. The whole is other than the sum of its parts
A Tutorial for Presenters and Slide Designers
By
Glenna Shaw
2. This tutorial is organized into
sections.
Each section contains an
introductory page and multiple
instructional pages.
Instructional pages are
organized into text and
interactive images.
Most images can be clicked
multiple times to go back and
forth to illustrate the concepts.
Click on the menu items to jump to different sections
Use the navigation buttons
shown below to move through
the pages.
Click this button to Click this button Click these buttons to go to
return to this page to go to the menu the next/previous pages
3.
4. Gestalt psychology was developed during the 1920s by
three German psychologists: Wertheimer, Kafka and
Kohler. Gestalt is a German word meaning the essence
or shape of an entity’s complete form. These
psychologists found that we subconsciously segregate
and group visual information in order to perceive it as a gestalt
whole.
Gestalt Principles demonstrate a set of consistent
behaviors or rules pertaining to these visual
perceptions. And these principles universally apply to
all human beings.
As presenters and/or slide designers, knowledge of these principles can be a
powerful tool. We can successfully organize and group elements on our slides
to be easily understood (or perceived) by our audience. By using Gestalt
Principles we can enhance the communicative power of our slides.
Today there are more than 114 principles. I’ve chosen to demonstrate the
ones I consider most relevant to presentations and slide design.
5. I recently had the pleasure of drawing
with my 4 year old grandson. He asked
me to show him how to draw a house.
Instead of simply drawing a house, I
decided to show him how he could put
together shapes (a triangle, several
rectangles and a circle) to draw a
recognizable house.
The look on his face was pure wonderment and I had the joy of experiencing that
magical moment when he made a significant cognitive leap. As human beings, we
perceive what we see as a whole intuitively. We must cognitively choose to
deconstruct images. The Principles of Gestalt document the laws governing this
behavior of visual perception.
I already planned to write an entry on my blog, Visualology.net, about the Principles of
Gestalt. Originally I intended to simply explain the 6 main principles of Gestalt applied
to slide design. However, I so enjoyed the experience with my grandson, that I decided
to create this more extensive tutorial.
As you complete this tutorial it is my fondest hope that you experience your own
sense of wonderment, that ah-ha moment when you understand why certain
elements on your slides work so effectively and others do not.
6. Have you ever wondered why
optical illusions work?
Consider the image at top
right. I can assure you the
circles are perfectly
symmetrical and the lines of
the square are straight, yet
when one is placed on top the
other, both appear bent.
Now consider the image at
bottom right. What stands out
when you look at this image?
Does this image clearly present
a message? Would you use this
image in a presentation? Do
you know why or why not?
7. In1915, Danish psychologist Edgar Rubin introduced a
series of cognitive illusions that laid the ground work for
Gestalt theories of visual perception.
Figure/Ground Organization articulates our visual field
into two components, the figure and background.
Consider Rubin’s famous image on this page. Do you see
a vase or two faces? Notice that you cannot see both at
once. You must change your perspective of the
foreground and background to perceive one or the
other.
While this may seem a simple concept of contrast, figure/ground
organization is actually much more complicated. It gives the perception
of depth and is impacted by changes to the boundary of the objects.
Slides are the perfect medium for Figure/Ground Organization since they
will always have a 2D background upon which objects are placed.
8. Boundary is the edge area of the objects (where they touch
one another.) Attributes of the boundary create the illusion of
depth. Depending on the grouping (or edge-assignment) of
the boundary, the figure will be seen in the foreground or the
background.
Click several times on the images below to alternate between
edge assignments.
Edge is assigned
an internal
external
Is this a rectangle shadow sending
or a hole? bringing the
the figure to
figure
the to the
foreground.
background.
9. The smaller of two objects
will be seen as a figure
against a larger background.
Click on the red rectangle at
left to see this principle
applied.
In the images at right the
vase is favored on the left
and faces are favored on the
right because of the
principle of smallness.
10. Surrounded areas tend to be seen as figures.
Surroundedness is one of the strongest principles of
visual perception and will frequently supersede
other principles when applied to the same object.
Click several times on the shapes below to see this
principle in action.
11. Sufficient contrast is needed
to differentiate objects from
background. This is Text
Without enough contrast
the objects blend into the
This is Text
background.
Click once on the text at
This is Text
right to see this principle. This is Text
Just as animals depend upon
this principle for purposes of This is Text
camouflage, it can be used
to hide or highlight objects
on slides.
12. Figures are more easily seen
when oriented horizontally
or vertically.
The blue propeller stands
out in this orientation.
Click several times on the
propeller to see the change.
The white areas are more
easily seen as figures when
oriented horizontally and
vertically.
13. Symmetrical objects stand
out as figures. Asymmetrical
objects are perceived as
incomplete.
Do you see two diamonds at
left or three asymmetrical
objects?
Click once on the diamonds
to see the change.
Two diamonds stand out as
figures when they are
symmetrical.
14. When all things are equal, convex
(protruding) rather than concave
(indented) patterns tend to be
perceived as figures.
Click several times on the buttons
at right to create your own
patterns.
Click several times on the blue
background to see how the
principle of surroundedness
affects your preference for
convexity.
If an object is presented as 3D, it
is using the principle of convexity
even if the object is concave.
Convexity is a weak principle.
15. Gestalt psychologists found that we perceive our
world holistically. From a visual standpoint, we
organize what we see into patterns and groups in
order to make sense of it.
This is especially true when looking at forms and
shapes on a two dimensional surface.
Gestalt psychologists identified a number of
consistent behaviors in how the mind groups
objects depending on factors such as
spacing, alignment, similarity, etc.
In the image at right you can see not one, but two
triangles. The little pacman type objects give your brain the visual clues that
allow you to intuit the existence of the second triangle.
These abilities were and are very important skills. We wouldn’t have survived
very long if we couldn’t spot a camouflaged predator.
As slide designers, knowledge of these principles of grouping enables us to
clearly communicate our message without ambiguity.
16. We tend to recognize shapes
and groupings when they are
seen frequently. This allows us
to recognize them even when
a part is missing or they’re out
of context. Traffic signs rely
heavily on this principle.
However, familiarity (or past
experience) is the weakest
principle and easily overcome
with very little change.
Click the images at left several
times to see if your
perceptions of the objects
change.
17. When presented with
incomplete visual
information, we instinctively
fill in the blanks. Although the
structures at right are
open, we perceive them as a
circle and a square.
The iconic image at left is
easily recognizable even
though it is incomplete.
Closure relies, in part, on past
experience.
Click the image several times
to experience this principle.
18. Shapes tend to be perceived as a
whole when they are aligned to
each other or appear to form a
continuous pattern.
This is what enables us to
perceive the continuation of a
road even though we cannot see
the end of the road.
This principle can be easily
interrupted by changing the
pattern of the objects so that
they no longer appear
continuous.
Click several times on the three
segments at right to experiment
with the principle of continuity.
19. We intuitively group
objects that are similar in
size, shape, color and
orientation.
Click several times on the
objects at left to form
your own groupings based
on different aspects of
similarity.
20. Proximity is one of the strongest
principles.
The closer objects are to one
another the more likely they are
to be perceived as a whole.
Click once on the objects at right
to see this principle applied to
the ten objects.
The ten objects are now
perceived as 3 groups despite
their similarities or differences.
Since letters are also perceived as
objects, we depend on proximity
to separate letters into words.
Click on the word at left to see
how critical the principle of
proximity can be.
21. Also known as common fate, this principle states that objects
that move in the same direction or appear to move in the
same direction will be perceived as a group.
Click on the purple objects to see this principle applied.
Notice, once the motion stops, the objects on the left are no
longer perceived as a group. The objects on the right maintain
their grouping since the common fate is illustrated by the
arrows rather than an actual movement.
22. When objects are
connected, they are perceived
as a single figure. This principle
is stronger than nearly any
other principle.
The objects at left appear as
two groups based on the
principles of similarity and
proximity.
Click on the objects at left
several times to add/ remove
connections.
The objects will appear to be
three figures when connected.
23. The principle of enclosure, also
known as common area, is similar
to surroundedness. When objects
are enclosed by lines or placed
within a common container they
will appear as a single figure.
Enclosure is thought to be the
strongest principle.
Click on the objects once to see
the impact of enclosure by a line.
The enclosing line is ambiguous
because of the connection
between the green and purple
objects. When the enclosed area is filled
Click again to see the impact of with color the ambiguity is
enclosure within a common removed since the principle of
area. common area is stronger.
24. Pragnanz, German for clarity or conciseness, is
..
known as the principle of good form. By now you
know that we have organizational tendencies in our
visual perceptions, the way in which the human
brain decides that things we see go together.
For figures to have pragnanz, also known as good
..
gestalt, they should be as
simple, orderly, balanced, unified, coherent, regular,
etc. as possible.
..
The image at right is a simple example of pragnanz.
The principles you’ve learned in this tutorial govern
how we resolve what we see. Each principle stands
on its own when there is no conflict or competing factors. However, when
presented with ambiguous stimuli, there is an hierarchical component to the
principles.
Although the exact order of this hierarchy is still being debated today, I’ve
presented my own guidance on this hierarchical structure in this section.
As slide designers, we should strive to practice good gestalt, ensuring our
visual communications will be perceived with clarity.
25. My findings for the
hierarchical relationships This is Text
for the principles of
Figure/Ground
Organization are shown at
right. I’ve included visual
reminders from the lessons
with each principle.
Contrast is a requirement
for all figure/ground
organization because
without it the figure
cannot be seen.
Boundary is also present in
all images even when that
boundary is ambiguous.
Convexity is the weakest
principle.
26. My findings for the
hierarchical relationships
for the principles of
Perceptual Grouping are
shown at left. I’ve included
visual reminders from the
lessons with each
principle.
All images will have at least
one of the principles of
Perceptual Grouping.
The primary message
conveyed by an image will
depend on the strongest
principle applicable to the
STOP
image.
27. As many people know, Psychology is an imperfect
science. And the Gestalt Principles of
Perception, like most things in psychology, are
open to interpretation.
The lessons you’ve just completed are my own
interpretations of Gestalt Principles as they
relate to slide design.
They are presented as guidance to help clarify
your visual communications.
The following pages offer you ten opportunities to practice your own
analysis of images using the principles you’ve just learned.
Examine each image and determine which principles you think are most
applicable to the image.
You then have the opportunity to see my analysis of the image.
28. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
Connectivity is strongest principle conveyed in this image. This image is good
for a message about a series of steps or a sequence of events. Because
connectivity is stronger than the principle of motion, this image needs an
arrow added to convey a message of moving up or down with visual clarity.
An image of an escalator is a better image to convey a message of motion.
29. Click to select the principles that apply to the image
Boundary Familiarity
6 Series 1 Series 2 Series 3
5
Smallness Closure
4
Surroundedness Continuity
3
Contrast Similarity
2
Orientation Proximity
1
Symmetry Motion
0 Convexity Connectivity
1st Qtr 2nd Qtr 3rd Qtr 4th Qtr Enclosure
Click here to see my analysis
The principle of closure allows us to present this graph without needing to display the
plot area or gridlines. We automatically fill in the plot area. Proximity is the strongest
principle in this graph. The bars appear as four groups. Although the principle of
similarity is used in the form of color to differentiate the series, it’s eclipsed by the
proximity of the groupings and requires more effort to understand the data. There is
no continuity of the series. A line graph is a better choice to display this information.
30. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
The principles of surroundedness, contrast and convexity ensure that the button is the
focal point of this image. Although the orientation is not vertical, it doesn’t detract
significantly from this image because the other figure/ground organization is so
strongly depicted. The predominant grouping principle is motion. This is an excellent
image to convey a message about upward motion.
31. Click to select the principles that apply to the image
Boundary Familiarity
Topic Topic Topic Smallness Closure
Surroundedness Continuity
Subtopic Subtopic Subtopic
Contrast Similarity
Orientation Proximity
Subtopic Subtopic Subtopic
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
This Smart Art graphic conveys a message of relationships using the
principles of similarity, proximity and enclosure. It is clear to the
audience the categorized relationship between the topics and
subtopics. This is a splendid method to display ordered relationships of
objects as shown.
32. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
The principles of contrast, smallness and familiarity ensure that the message
of stop on this pedestrian crosswalk sign is clearly conveyed. However, the
non-vertical orientation allows the yellow triangles to compete and detract
from the message. This image would more clearly convey the message if it
were vertically aligned and the yellow triangles were cropped out of the
image.
33. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
This image uses the principles of boundary, surroundedness and contrast to place all
the focus on the cup of dark liquid. It significantly stands out as the focal point of the
image. The brie cheese in the upper right corner is nearly invisible with the lack of
contrast against the white paper. The principles of familiarity and proximity (of the
bread to the cup) allows for significant ambiguity in this image. Does the cup contain
coffee or au jus? You might use this image to convey it’s time for a break since it
doesn’t really matter what’s in the cup.
34. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
This image obviously relies on the principles of familiarity and closure to mentally
complete the image of a woman. Familiarity further reinforces the concept of a
business woman because of the proximity of the briefcase. The principle of motion
also applies because the woman is taking a step forward in the perspective of the
image. This is a good image to convey a message of career advancement for women.
35. Click to select the principles that apply to the image
Boundary Familiarity
Big Boss Smallness Closure
Surroundedness Continuity
Little Boss Assistant Contrast Similarity
Orientation Proximity
Worker Bee Symmetry Motion
Senior Helper
Worker Bee
Worker Bee
Helper Convexity Connectivity
Worker Bee
Enclosure
Click here to see my analysis
This organizational chart uses the principles of surroundedness, symmetry, similarity
and proximity to clearly convey the message of hierarchy. The principles of
enclosure, similarity and proximity are used rather than connectivity (as you might see
in a more traditional org chart.) This is an outstanding graphic to use to convey a
message about a hierarchical structure that doesn’t have too many levels.
36. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
This timeline Smart Art graphic relies primarily on the principles of continuity
and similarity. An image with the principles of motion or connectivity might
more clearly convey the message of moving through time. This graphic is
perfect for conveying a timeline that has incremental instances of
importance, such as the milestones shown above.
37. Click to select the principles that apply to the image
Boundary Familiarity
Smallness Closure
Surroundedness Continuity
Contrast Similarity
Orientation Proximity
Symmetry Motion
Convexity Connectivity
Enclosure
Click here to see my analysis
This image is most strongly influenced by the principles of contrast and convexity. The
contrasting colors and the attributes of the boundary ensure the indentation in the
building stands out as well as ensuring the building itself stands out against the lighter
sky. The lack of vertical orientation does not significantly impact the clarity of the
image because the other principles are so strong. This is a terrific image to convey a
message about heights or goals.
38.
39. Rudolf Arnheim (2004) Art and Visual Russell A. Dewey, PhD (2008) Psychology:
Perception: A Psychology of the Creative An Introduction. Chapter 4, Senses and
Eye, Fiftieth Anniversary Printing. Perception
Vicki Bruce, Mark A. Georgeson, and Dempsey Chang, Laurence Dooley and
Patrick R. Green (2003) Visual Juhani E. Tuovinen (2002) Gestalt Theory
Perception: Physiology, Psychology and in Visual Screen Design – A New Look at
Ecology. Chapter 6, Perceptual an Old Subject.
Organisation
Lisa Graham (2008) Gestalt Theory in
Robert Snowden, Peter Thompson, and Interactive Media Design. Journal of
Tom Troscianko (2006) Basic Vision: An Humanities and Social Science, Volume
Introduction to Visual Perception. 2, Issue 1, 2008
Rudolf Arnheim (2004) Visual Thinking: David S. Touretzky & Ethan Tira-
Thirty-Fifth Anniversary Printing. Thompson (2009), Gestalt Perception.
15-494 Cognitive Robotics
Stephen Few (2006) Information
Dashboard Design: The Effective Visual Michael Britt, PhD (2007) The Psych Files.
Communication of Data. Chapter Episode 31: Lemon Slices and a New Face
4, Tapping into the Power of Visual on Mars! Gestalt Principles at Work
Perception
Dejan Todorovic (2008) Gestalt
Principles. Scholarpedia, 3(12):5345
40. Geetesh No product is ever created
Bajaj, Indezine.com in a vacuum and this tutorial
is no exception. It would
Steve not be as polished as you
Rindsberg, PPTools.com are seeing it without the
generous
review, feedback, editing
Echo and creative ideas from the
Swinford, Echosvoice.com folks you see at left.
They are an extremely
Julie talented group and I
Terberg, terbergdesign.com encourage you to visit their
sites to learn more about
and from them.
41. As I’ve previously stated, the
purpose of this tutorial is to provide
presenters and slide designers with
the informational tools to increase
the visual clarity of their products.
This tutorial does not provide
specific information on design,
although visual clarity is a contributing factor to good visual aesthetics.
All findings and conclusions expressed within this tutorial are my own
opinions. You’ll also find that there are anomalies to any theory. I find that
my eyes are drawn to concave objects before convex objects, which is why I
underlined the word tend on that particular principle.
For more authoritative findings, please refer to my sources and draw your
own conclusions.
Glenna Shaw
Visualology.net
December 2010