This post is part of a larger series focused on exploring the fundamental principles of data visualization. Eventually, the collection may grow into something larger and more coherent. For now, each post simply picks up and plays with one idea related to how we represent data visually. Other posts in this series can be found using the Form to Data tag.
When we look at a chart, several things happen at once. First, the rods and cones in our eyes detect light. This is called a visual stimulus: an outside influence stimulates our eyes to record what’s happening. Next, our brains whir into action, trying to make sense of that stimulus. There are about 130 million rods and cones in the retina, and our brains need to make sense of information from all of those sensors at once (and from two different eyes). Different areas of the eye are more or less sensitive than others, and rods and cones perceive different sets of information. When the brain receives a burst of visual information, the first thing it does is to start sorting and prioritizing, trying to figure out what information is most important. It groups information from different sensors together and compares signals coming from different photoreceptor cells to calculate basic differences like contrast and color. Then, the brain needs to decide how to group the millions of signals it received into information that it can interpret, and what that information might mean.
Because the brain is processing so much information, it relies on shortcuts and general patterns to interpret the data coming in from our senses. One of the first visual tasks is to recognize visual stimuli as individual objects, rather than one big continuum of color and noise. Once that is done, the brain needs to determine how those objects are related to each other. Most of this processing happens instantly, before we are even aware that we have “seen” anything at all. This preattentive processing happens outside of our conscious control, but it affects how we understand the world.
By understanding how preattentive processing works, we can use it to make our visualizations clearer and easier to understand. Working with our built-in visual systems will make charts that are “more intuitive” and easier to read; working against it requires that the viewer exert conscious effort to avoid mistakes, and often leads to errors and frustration. A well-designed chart uses preattentive processing to our advantage, and frees up space for the viewer to focus on understanding what the chart information actually means.
Psychologists have outlined a number of rules that explain the patterns that our brains look for in order to perceive the world. Once a set of objects has been perceived, our brains determine the relationships between them based on a few general properties. These rules are called the gestalt principles of perception.
Proximity
When looking at multiple objects at the same time, objects close to one another will appear to be grouped together. Instead of seeing one group of 15 dots, most people will see the image below as 3 groups of 5 dots each. The only reason that we perceive this relationship is that the dots in rows are closer together than the dots in columns.
Similarity
If a set of objects contain two or more types that are similar to one another, we will perceive those types to represent different groups. Here, proximity and similarity work together to distinguish the gray dots from the black dots. Now, instead of 3 groups of 5 dots each, we have two groups of 5 black dots and one group of 5 gray dots.
Closure
Our brains will automatically fill in gaps in lines that otherwise look continuous. We know that the two lines belong together, even though the corner is cut off of this square.
Continuity
We will perceive parts of a shape as connected to each other, even if they are cut off or covered up by other objects. We still see a square and a circle in the image below, even though they overlap, because of closure. An interesting thing happens when we change how the gaps are drawn, though: in the pair on the left, the circle is perceived on top of the square because it is drawn as a continuous shape. In the pair on the right, each shape has a break in its continuity, and we see the two shapes as linked instead. When continuity is paired with a gap in another object, the continuous one appears to be on top. 
Connectedness
When objects are connected by a line or another object, they feel more connected than when they are simply close to each other. The image below shows three dots connected in a group, and two outside of that group, rather than 5 equal dots on the page. 
Enclosure
Objects that are enclosed in another object appear to be grouped by it. In the grid below, there are 5 dots outside of the box, and 4 dots inside. 
Symmetry
Symmetry can also create powerful visual relationships; the dots below are grouped into two pairs related by symmetry, and one dot that makes up the vertex of the “V.”
Figure and Ground
When working with solid visual elements, our brains can’t always decide which one is the actual object (the figure) and which is the background. The image below shows three black shapes, or three circles behind a white triangle, depending on how you look at it. Multistable images like this one crop up when our brains switch back and forth between one interpretation of the image and another. In this case, the wedge cut out of each circle combines with a symmetry relationship to create a powerful sense of closure by forming the wedges into an invisible triangle. 
Combining gestalt principles
The figure and ground image above is a good example of multiple gestalt principles working simultaneously. The different perceptions can reinforce one another, as we saw above for the gray and black dots in the similarity example, or they can contradict each other. The example below uses both proximity and similarity to group a set of dots, but the two principles are contradicting each other. Proximity says that the rows are the groups, because the dots in rows are closer together than the dots in columns. Similarity says that the gray dots are different than the black dots, and so the groups really should be columns rather than rows.
When two gestalt principles are in conflict like this, the image becomes much more “active” as our brains try to work out which way to interpret these two possible meanings. In a composition or a work of art, this activity is a good thing, because it makes the image more interesting to look at. In a visualization, conflicting principles often make a chart confusing and difficult to read. Generally speaking, it is better to create visualizations where the different groupings reinforce one another, as in the Similarity example above.
The gestalt principles also have different strengths, which can be used to impose hierarchy on a grouping without necessarily leading to contradiction. Connectedness is a stronger principle than proximity, and so there is no conflict in the image below. There are three dots connected by a line, and two that are not. We can still see that the three dots in the bottom right are close to each other, but that doesn’t make them seem more grouped than the ones connected by a line. Because connectedness is a stronger principle, there is no added ambiguity in this case.
