In the very early stages of vision—before we’re really conscious of it—our perceptual processes are humming away, organizing sensory data from vision into meaningful patterns. Visual grouping, also known as perceptual grouping, is one of the primary ways that our visual system provides meaning.
Both Gestalt psychologists and modern researchers have shown that perception naturally organizes information into wholes rather than parts. Without conscious effort, you likely used perceptual grouping to transform the orange shapes above into an arrow rather than
As designers, we can leverage these early perceptual processes so viewers interpret our visuals quickly and accurately. The principles of perceptual grouping below provide practical ways to impart greater meaning to your graphics. Becoming aware of the principles can also prevent misinterpretation caused by unintended groupings. This is one of many ways to improve your infographics.
Perceptual Grouping by Enclosure
When elements are enclosed by a boundary or filled area of color, viewers perceive them as a single unit. This signals that the elements are related. You might draw a line around related buttons in a user interface or use a background color to group items in a map or diagram. In this example, viewers perceive the houses on the colored background as a distinct group apart from the others. Enclosure is a compelling way to show relationships.
Grouping by Proximity
The distance between the elements in a graphic or user interface affects how we interpret it. We see elements that are close together as one unit, and those farther apart as separate and unrelated. As a result, we assume that grouped elements are associated. In the graph on the left, each set of clustered bars forms a single group. A corollary of this principle is that unintended associations can arise when elements are placed too close together.
Grouping by Similarity
We tend to see elements that share common properties like size, color, shape, orientation, brightness, and movement as one group. This is an effective way to show how objects and data are associated in charts, diagrams, and maps. In this map, we perceive the countries in blue as a visual group, indicating they are related in some way.
Grouping by Connectedness
Connecting elements with a line or common edge indicates that they belong to the same group. In fact, it can be difficult to perceive the individual elements without seeing the group as a whole. Although this may seem obvious, connection lines are powerful. They can override other grouping principles, such as proximity and similarity. Using connection lines between objects is one way to accurately portray relationships in diagrams and process steps.
Grouping by Common Fate
According to the Gestalt principles of grouping, objects that move in the same direction share a “common fate,” and viewers perceive them as a group. We interpret these elements as more related than those that move in different directions or at different times. This principle is particularly important in animation. If your goal is to show a relationship between moving objects, move them at the same time, speed, and direction.
Combining Principles
Combining two or more of these principles can strengthen visual grouping. For example, drawing a border around similar houses that are close together reinforces three principles: enclosure, similarity, and proximity. On the other hand, combining principles can create ambiguous groupings. For example, drawing connecting lines between houses inside and outside an enclosure does not clearly indicate a group. Use visual grouping thoughtfully and intentionally.
For a scholarly look at visual grouping, see Traditional and New Principles of Visual Grouping.
Leave a Reply