THE GESTALT OF SLIDES

The whole is other than the sum of its partsA Tutorial for Presenters and Slide Designers

ByGlenna Shaw

Using this Tutorial

Click this button to return to this page

Click this button to go to the menu

Click these buttons to go to the next/previous pages

Click on the menu items to jump to different sections

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.Use the navigation buttons shown below to move through the pages.

MENU

Introduction

Figure/Ground Organization

Perceptual Grouping

Pragnanz

Gestalt Principles Practice

References

..

Introduction

Figure/Ground Organization

Perceptual Grouping

Pragnanz

Gestalt Principles Practice

Sources

INTRODUCTION

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.

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

gestalt

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.

About this tutorial

Food for ThoughtHave 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?

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.

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.

FIGURE/GROUND ORGANIZATION

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

Is this a rectangle or a hole?

Is this a rectangle or a hole?

Edge is assigned an internal shadow sending the figure to the background.

Edge is assigned an external shadow bringing the figure to the foreground.

Smallness

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.

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.

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

TIETIE

ContrastSufficient contrast is needed to differentiate objects from background.Without enough contrast the objects blend into the background.Click once on the text at right to see this principle.Just as animals depend upon this principle for purposes of camouflage, it can be used to hide or highlight objects on slides.

This is TextThis is TextThis is TextThis is TextThis is Text

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

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

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

PERCEPTUAL GROUPING

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.

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

STOP

YIELD

?Tulong

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

STOP

YIELD

?Help

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

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

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

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

Psychotherapist

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

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

EnclosureThe 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. When the enclosed area is

filled with color the ambiguity is removed since the principle of common area is stronger.

The enclosing line is ambiguous because of the connection between the green and purple objects.Click again to see the impact of enclosure within a common area.

PRAGNANZ

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.

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

..

..

..

..

Contrast

Boundary

Surroundness Smallness

Symmetry Orientation

Convexity

My findings for the hierarchical relationships 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.

Figure/Ground Organization

This is Text

TIE

Common Area Enclosure

Connectivity

Proximity Motion

Similarity

Continuity Closure

Familiarity

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

Perceptual Grouping

STOP

Gestalt Principles Practice

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.

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.

Click to select the principles that apply to the image

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.

Practice # 1

Click here to see my analysis

BoundarySmallnessSurroundednessContrastOrientationSymmetryConvexity

FamiliarityClosureContinuitySimilarityProximityMotionConnectivityEnclosure

Click to select the principles that apply to the image

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr0

1

2

3

4

5

6Series 1 Series 2 Series 3

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.

Practice # 2

Click here to see my analysis

BoundarySmallness

SurroundednessContrast

OrientationSymmetryConvexity

FamiliarityClosure

ContinuitySimilarityProximity

MotionConnectivity

Enclosure

Click to select the principles that apply to the image

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.

Practice # 3

Click here to see my analysis

BoundarySmallnessSurroundednessContrastOrientationSymmetryConvexity

FamiliarityClosureContinuitySimilarityProximityMotionConnectivityEnclosure

Click to select the principles that apply to the image

Practice # 4

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.

Click here to see my analysis

BoundarySmallness

SurroundednessContrast

OrientationSymmetryConvexity

FamiliarityClosure

ContinuitySimilarityProximity

MotionConnectivity

Enclosure

Topic

Subtopic

Subtopic

Topic

Subtopic

Subtopic

Topic

Subtopic

Subtopic

Click to select the principles that apply to the image

Practice # 5

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.

Click here to see my analysis

BoundarySmallnessSurroundednessContrastOrientationSymmetryConvexity

FamiliarityClosureContinuitySimilarityProximityMotionConnectivityEnclosure

Click to select the principles that apply to the image

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.

Practice # 6

Click here to see my analysis

BoundarySmallness

SurroundednessContrast

OrientationSymmetryConvexity

FamiliarityClosure

ContinuitySimilarityProximity

MotionConnectivity

Enclosure

Click to select the principles that apply to the image

Practice # 7

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.

Click here to see my analysis

BoundarySmallnessSurroundednessContrastOrientationSymmetryConvexity

FamiliarityClosureContinuitySimilarityProximityMotionConnectivityEnclosure

Click to select the principles that apply to the image

Practice # 8

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.

Click here to see my analysis

BoundarySmallness

SurroundednessContrast

OrientationSymmetryConvexity

FamiliarityClosure

ContinuitySimilarityProximity

MotionConnectivity

Enclosure

Big Boss

Little Boss

Senior Worker Bee

Worker BeeWorker BeeWorker Bee

Assistant

Helper Helper

Click to select the principles that apply to the image

Star

t Pr

ojec

tTa

sk

Task

Mile

ston

eTa

sk

Task

Mile

ston

e

Practice # 9

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.

Click here to see my analysis

BoundarySmallnessSurroundednessContrastOrientationSymmetryConvexity

FamiliarityClosureContinuitySimilarityProximityMotionConnectivityEnclosure

Click to select the principles that apply to the image

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.

Practice # 10

Click here to see my analysis

BoundarySmallness

SurroundednessContrast

OrientationSymmetryConvexity

FamiliarityClosure

ContinuitySimilarityProximity

MotionConnectivity

Enclosure

References

SourcesRudolf Arnheim (2004) Art and Visual Perception: A Psychology of the Creative Eye, Fiftieth Anniversary Printing.

Vicki Bruce, Mark A. Georgeson, and Patrick R. Green (2003) Visual Perception: Physiology, Psychology and Ecology. Chapter 6, Perceptual Organisation

Robert Snowden, Peter Thompson, and Tom Troscianko (2006) Basic Vision: An Introduction to Visual Perception.

Rudolf Arnheim (2004) Visual Thinking: Thirty-Fifth Anniversary Printing.

Stephen Few (2006) Information Dashboard Design: The Effective Visual Communication of Data. Chapter 4, Tapping into the Power of Visual Perception

Russell A. Dewey, PhD (2008) Psychology: An Introduction. Chapter 4, Senses and Perception

Dempsey Chang, Laurence Dooley and Juhani E. Tuovinen (2002) Gestalt Theory in Visual Screen Design – A New Look at an Old Subject.

Lisa Graham (2008) Gestalt Theory in Interactive Media Design. Journal of Humanities and Social Science, Volume 2, Issue 1, 2008

David S. Touretzky & Ethan Tira-Thompson (2009), Gestalt Perception. 15-494 Cognitive Robotics

Michael Britt, PhD (2007) The Psych Files. Episode 31: Lemon Slices and a New Face on Mars! Gestalt Principles at Work

Dejan Todorovic (2008) Gestalt Principles. Scholarpedia, 3(12):5345

AcknowledgementsGeetesh Bajaj, Indezine.com

Steve Rindsberg, PPTools.com

Echo Swinford, Echosvoice.com

Julie Terberg, terbergdesign.com

No product is ever created in a vacuum and this tutorial is no exception. It would not be as polished as you are seeing it without the generous review, feedback, editing and creative ideas from the folks you see at left.They are an extremely talented group and I encourage you to visit their sites to learn more about and from them.

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 ShawVisualology.net

December 2010

Disclaimer