To take advantage of the benefits mentioned above, it is worthwhile to be aware of the perceptual laws that govern visual perception.
We do not follow a linear order when reading visual representations. We look at the whole picture first, then at the contextual elements. Scanning follows the rules of the order of gaze. First we look at the outstanding elements related to the main concept. This means differences, uniqueness or distinctions (e.g. color, size, shape, etc.). While elements that are completely different are distracting.
Our visual perception is limited, we only see a few objects at a time. Thus, we see the whole rather than the individual components. The number of parts we can see is also limited. So if we want to highlight some elements, we have to represent some of them so that we do not perceive them as a whole. We make connections in search of meaning, which means that our mind tries to establish cause and effect relationships between the elements presented, even if they are not real relationships. Thus visual elements should be related in a meaningful way so that viewers can construct right narratives about the relationship between them.
Gestalt principles describe how human perception groups similar elements, recognises patterns and simplifies complex images when perceiving objects. The mind communicates what the eye perceives as a series of elements as a whole. These principles affect us all, even if we are not aware of it. Consciously applying the following principles is important when designing flows, because they affect our perception unconsciously.
Principle of Proximity
Things that are close together are perceived as more related than things that are further apart. Even when there are different colors in the groups. Meaning similar concept or related information.
As you can see in the figure beside, the 4-4 elements of the two groups (CFO and Accountant) are shown close together for ease of understanding. The elements of the groups are separated from each other during processing unlike if they were represented in a cluttered way.
Principle of Similarty
Similar things are perceived to be more related than different things. These include, but are not limited to, shape, color, size, texture and orientation. Meaning similar concept or related information.
In the figure above, the similarity is highlighted by a pattern. In this way, the striped elements and the elements without pattern can be clearly identified. Similarity can be indicated by colors, patterns, shapes, color transitions. For example, you can indicate the person responsible for the task, the department, etc.
Principle of common region
Elements that are in the same enclosed region are perceived as a cohesive group that is distinct from other groups. Region can be enclosed by lines, color or texture.
This is another way of highlighting elements that are related in some way, by framing them with a line, color or pattern.
Principle of Focal Point
The visual standout is what will grab and hold the viewer's attention first.
If you place an attention-grabbing element that is different from the rest, or place it in a prominent spot on the canvas, it will attract the eye and become a focal point.
Further Visual Principles
Visual thinking involves attentional acts that control eye movements and pattern recognition. These visual queries are key to deepening understanding. When we see visual information, our primary goal is usually to solve cognitive challenges, for example, by looking at a graph to try to identify trends. Through the process of visual queries, we target specific patterns that provide the answers we seek. (Ware, 2008)
We have seen such patterns in our previous examples and will discuss some of them in the following.
Nested concept is embedded in another concept or set of concepts. It comes from the notion of putting one thing inside another, similar to how Russian Matryoshka dolls are nested inside each other.
Overlapping concept: two or more concepts have elements or characteristics in common. Typical in complex projects or plans, where boundaries may be blurred, for example several departments or persons working on the same subtask or supporting each other in solving the task. This can also be indicated in this way.
Cross-group elements: different elements or members (entities) that have important relationships across different categories, classes or clusters (groups). In complex networks, nodes (elements) may have links (edges) across different clusters or groups within the network. These links may be reporting or a task not closely related to the flow.
Size of the elements
The size of a graphic object can represent importance or magnitude. We are not always aware of this; we perceive a larger object as more important, a smaller one as less important or even less powerful. Another effect of size is perspective in three dimensions, where smaller objects appear more distant and larger objects appear closer. If you want to avoid these effects, you might consider drawing elements at the same size.
The thickness of the connecting line or arrow can indicate the strength of the connection. The type of connection can be indicated by the color or style of the connecting line (e.g. dashed or dotted line).
Use of colors and color-coding
We can use colors to make it easier to ditinguish or search visually. Or we can use colors to indicate elements that are related in some way. If the emphasis is on distinctiveness, it is useful to use easily distinguishable colors or shades of color, such as the primary colors red, yellow and blue. Or you can also use mixed colors such as green, orange, gray and purple. It's also worth considering the issue of accessibility here, just think of color blindness or color mismatch.
If you want to color code a flow, the number of colors that can be used effectively is 6-12 (Ware, 2008). The main reason for not using a larger number of colors is that the background can interfere with the visual perception of the symbols, making them easier to confuse. To ease a successful visual search, the colors of the background and other symbols within the set are equally important, not just the symbol being searched for. When we search for an object of a particular color, neurons in our brains that are sensitive to that hue are more prominent than neurons tuned to other colors. This ability is limited. The strength of the discrimination effect depends both on the presence of other coloured objects in the visual field and on the color of the background. For visual search, it is most effective to use only a few colors for highlighting, as this allows faster identification. The more limited the color palette, the faster the items can be found.
Three conventions to remember about our minds (Berinato 2019):
- The same colors ( things of the same color) belong together.
- The saturation of colors denotes different values - lighter colrs have a lower value than darker colors.
- We like information to be arranged in ascending or descending order
Coloring can be used to indicate changes, such as new items or changes. We can use color to code obsolete information or information aging, inside-outside, ownership, permission, warnings, risks (e.g. high-mid-low risk with red-yellow-green).
The meaning of color
Color often carries symbolic meaning. In Western culture, red is a symbol of danger and stopping, green of safety and renewal, blue of cold and white of purity. Cultural factors influence the interpretation of colors, so the meaning of a particular color choice may vary from country to country. Understanding these cultural color symbolisms is key for designers working in international settings.
Highlighting
You can highlight elements or contexts to increase the plasticity. One approach to highlighting text is to reduce the contrast of the surrounding text while providing sufficient luminance contrast for clarity. Alternatively, highlighting can be achieved by coloring the background rather than the letters themselves.
Similar principles can be applied to highlighting images. We can increase the saturation of colors in a particular area of interest, while reducing saturation in other areas. (Berinato 2019)
Reference
Berinato, Scott. 2019. The Harvard Business Review Good Charts Collection: Tips, Tools, and Exercises for Creating Powerful Data Visualizations. Harvard Business Review Press.