Estimated reading time: 5 minutes

Summary

Our sense of perception is highly sensitive to deviations and irregularities in graphic material.
We tend to consider objects that are similar in shape or size as belonging to the same group, and often performing the same function.
We tend to consider objects placed next to one another as belonging to the same group.
We tend to consider objects that are connected to one another, for instance by a line, as belonging to the same group.
Enclosure is a way of asserting commonality.

In the eight graphic principles presented below, visual grouping is a common denominator. Keep in mind that all the principles presented here are just that: principles to understand and relate to, rather than laws to obey or rules to follow.

The eight principles, presented in no particular order, are as follows:

Similarity
Proximity
Common region: connection
Common region: enclosure
Closure
Continuity
Common fate
Symmetry

Similarity

According to the principle of similarity, we tend to consider graphic elements or objects we perceive as similar in colour, shape, size or orientation as belonging to the same group. Implicitly, we assume that these objects perform the same function or possess the same kind of properties.

Image containing four symbols of two different kinds. The objects with similar shape are more easily associated.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Proximity

The principle of proximity, meanwhile, suggests that we perceive graphic elements or objects that are placed next to one another as belonging together. Therefore, the design choices you make regarding spacing around and between objects are crucial! By adding space you can help your viewers understand how elements and different parts of an image are related to each other. This makes it easier for them to navigate the content.

4 symbols: the two objects at the top and the two objects at the bottom are closer to each other. This signals grouping.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Common region: connection

Furthermore, we tend to perceive separate objects or elements that are linked together, for example by a line, as belonging together. This according to the principle of connection. Grouping objects together like this is also sometimes referred to as common region. It can either interact with or contradict the principles of both proximity and similarity.

Four elements of different shape: those that are connected with a line appear to be related.

Image by Karolinska Institutet University Library. Creative Commons BY SA

By formatting a connecting line in a particular way, for example by making small adjustments to its shape, you can also convey additional details about the characteristics of that connection. For instance, in the image below, the line between the two objects on the left is solid, while the line between the two objects on the right is dashed. This dashed line suggests to the viewer that the bond is weaker, or perhaps temporary in some way. If you were also to add, for example, an arrow at the ending of the connection, you would provide information about the directionality.

Left: A solid line connects a dot and square. Right: a dashed line connects a dot and square, hence the bond is weaker.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Common region: enclosure

Enclosure is a way of asserting commonality, or common region. Enclosure can also be perceived as more powerful than the connection principle when it comes to belonging. As with the connection principle, enclosure can work both with and against the principles of proximity and similarity.

Four symbols. The two objects that are enclosed by a line are interpreted by the viewer as related.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Keep in mind that enclosure can be achieved in various ways. In the image above, the dot and square are grouped together by placing them inside a transparent box with a solid red line. One could just as easily skip the line and instead place the two objects on top of, say, a solid coloured box (see the image below, where the dot and square are enclosed using a light grey background). The effect remains the same: asserting commonality.

4 symbols. To signal commonality, a dot and a square are enclosed by placing them together on top of a light grey box.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Closure

The principle of closure describes our ability to identify relatively simple patterns in complex graphical representations. It is thanks to this ability that we perceive a white triangle in the image below. The same ability enables us to follow dotted lines in a diagram and identify shapes and patterns that are familiar to us.

3 black circles with white cake-piece triangles pointing from the middle give impression of a centered white triangle.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Continuity

The principle of continuity is close to the principle of closure; here, too, we rely on the human ability to see patterns and forms. This principle asserts that objects or graphic elements that follow a line or curve are perceived as connected, and that we perceive contour lines as complete even though another object breaks the line (see above).

2 examples of continuity. We follow and group lines, although dashed and crossed. Partly hidden shapes seem complete.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Common movement, or common fate

According to the principle of common movement, or common fate, we also perceive graphic elements that have the same direction or orientation as belonging together. This principle becomes very clear in animated contexts where we associate objects or elements that have similar movement patterns, trajectories or direction of movement as associated with each other.

In animated visualisations, time will influence the principle of common movement, since similar speed and synchronised movement tends to greatly reinforce the impression of objects being associated with one another.

Multiple rectangles arranged in one direction, while two deviate. Elements seem related if placed in the same direction.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Symmetry

The principle of symmetry is similarly based on the human ability to perceive patterns and shapes. In this case it means that our sense of perception is highly sensitive to deviations and irregularities in graphic material. As with the principle of similarity, we tend to group graphic elements that are similar and that have been arranged symmetrically. The image below demonstrates how the principle is expressed in comparative diagrams.

Two horisontal bar charts arranged symmetrically on separate sides of a vertical center line.

Image by Karolinska Institutet University Library. Creative Commons BY SA

Using these principles to your advantage

So, how might you use these principles when designing visualisations? Because humans are very sensitive to deviations, the principles mentioned above are powerful tools for focusing and directing a viewer's attention. Keep in mind, though, that you need to be thoughtful and consistent, both when designing individual visual elements and when you combine and position those elements in a composition. If you don't align or format objects that belong together in a logical and meaningful way, you risk confusing, distracting and misleading your viewers. For example, if you inadvertently make one of the arrows in a flowchart thinner than all other arrows, a viewer might interpret that object or step as less important. However, breaking principles intentionally can be a very effective way of purposely drawing attention to differences that you want to highlight.