THE GESTALT OF SLIDES : THE GESTALT OF SLIDES The whole is other than the sum of its parts A Tutorial for Presenters and Slide Designers
Glenna Shaw Using this Tutorial : 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 : MENU Introduction Figure/Ground Organization Perceptual Grouping Pragnanz Gestalt Principles Practice References .. Introduction : 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 About this tutorial : 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 Thought : Food for Thought 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? Figure/Ground Organization : 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 Boundary : Boundary 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. Smallness : 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. Surroundedness : Surroundedness 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. Contrast : Contrast Sufficient 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 Text This is Text This is Text This is Text This is Text Orientation : Orientation 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. Symmetry : Symmetry 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. Convexity : Convexity 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. Perceptual Grouping : 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 Familiarity : STOP YIELD ?
Tulong Familiarity 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. STOP YIELD ?
Help Closure : Closure 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. Continuity : Continuity 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. Similarity : Similarity 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. Proximity : Proximity 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. Psycho the rapist Motion : Motion 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. Connectivity : Connectivity 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. Enclosure : Enclosure 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. 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 : 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 .. .. .. .. Figure/Ground Organization : 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 Perceptual Grouping : 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 : 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. Practice # 1 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 2 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 3 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 4 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 5 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 6 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 7 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 8 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 9 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure Practice # 10 : 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 Boundary Smallness Surroundedness Contrast Orientation Symmetry Convexity Familiarity Closure Continuity Similarity Proximity Motion Connectivity Enclosure References : References Sources : Sources Rudolf 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 Acknowledgements : Acknowledgements Geetesh 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. Disclaimer : 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.
December 2010 Disclaimer