Using Graphics to Make Abstract Concepts Concrete

Posted: 05 May 2014 05:30 AM PDT

Visual information contributes greatly to thinking and cognition. Some concepts are difficult to communicate with words alone and so human beings sketch and draw. We create graphs, charts, diagrams, maps, and timelines to help communicate complex ideas and make them more concrete.

The last few weeks we’ve been looking at visual perception and some of the design principles that arise from it. Last week we talked about reducing realism. Today I’d like to move in the other direction and talk about how we can make abstract concepts more concrete.

Note: This series comes mainly from the book Visual Language for Designers by Connie Malamed, which I encourage you to read.

Reducing Cognitive Load

One idea I’ve mentioned several times throughout this series is that designers can aid communication by reducing cognitive load and moving some of the processing from working memory to early visual perception. Visuals like charts and graphs help viewers process information quicker than if everything was communicated verbally instead.

designers can aid communication by reducing cognitive load and moving some processing from working memory to early visual perception

The data behind the graphics carries an expectation of accuracy, which lends objectivity to the overall visuals. The abstract data is presented in a visual way, which enables viewers to quickly see relationships and make comparisons.

We find meaning in the spatial relationships between elements. If we see a street in between two other streets on a map, we expect the real street to be physically between the other two as well.

Showing these relationships visually makes them quicker to process and reduces the cognitive load of the viewer. It takes less time for viewers to glance at two elements and notice one is larger than it is to read the data each rectangle represents and consciously determine with data point is larger.

The elements create a structure that helps the visual search process. One element gets connected by a line to another. A few elements are enclosed in space or inside a border. Information is visually linked to related information directing the eye.

Reading on the other hand is sequential. You start at the beginning, scan, and try to remember where the important information is located.

Types of Visual Displays

There are a variety of graphics we might use to communicate abstract ideas and concepts, each with different strengths, weaknesses and purpose.

Create Big-Picture Views with Diagrams

Diagrams show the different elements that make up a system or process as well as the relationships between them. They become visual explanations for the system or process they describe. Common types of diagrams include:

Cyclical diagrams — to show recurring processes
Hierarchical diagrams — to show structure and organization
Tree diagrams — to show hierarchy and category detail
Flow diagrams — to explain processes

Every element in the diagram should have a direct 1:1 relationship with an object in the system. You can use space, lines, shapes, and other visual elements to show the different functions that take place within the system or during a process.

Arrows can be used to point to important information or to indicate relationships between elements. They can be used to guide people through a process or the flow of events. Arrows are effective at showing the actions in a system, movement through the system, or changes over time.

By adjusting the size, shape, color, or other primitive feature of an arrow you can change what the arrow represents.

Movement — can be shown with jagged, curved, or twisted arrow shafts
Cyclical or reciprocal relationships — can be shown through the use of double-headed arrows
Strength and value — can shown through the use of large, emphasized, and contrasting arrows.

The decision to use or not use arrows can change the meaning of a diagram. When arrows are used in a diagram they’re often interpreted as showing cause and effect. When they aren’t present, the diagram is interpreted more as the structure of the system being shown.

Dashed lines are often used to indicate transactions, connections, and events. They can be used with or without arrowheads and the the space between the dashes can suggest movement and an unseen energy.

Dashed lines are also often used to represent a tentative or temporary connection. It might be an uncertain connection or one that’s on again off again or a connection that existed in the past or will in the future.

Patterns in a diagram help viewers derive meaning and integrate information with existing schemas and mental models. A cyclical diagram will likely be stored with a circular mental model while a timeline will be stored linearly. We can use this knowledge to choose the most effective structure for a diagram based on the message we want to convey.

When taking in a diagram viewers can enter it at a global or local level. Globally people take in the overall pattern of the diagram first. Locally they take in the details of a particular element first.

We generally want them entering at the global level because the overall pattern helps set the context for the particular details. To help we can make elements large enough to show the overall pattern, but not so large that the viewer’s eye is instantly drawn to them.

Show Numeric Data Visually

Numbers are abstract and it can be difficult for someone to quickly grasp the message they’re conveying. When the same data is displayed visually it helps show relationships that might otherwise not be seen. The visual patterns make it much easier to compare different data points at a glance.

Graphs are the most common type of data display and they’re typically shown with a horizontal (x) axis representing the data being measured and a vertical (y) axis representing the type of measurement.

Other common displays include

Pie charts — which show data as a percent of a whole
Pictographs — which use a series of icons to show quantity
Statistical maps — which show data across a geographical area

Bar graphs are good for showing comparisons. Line graphs tend to be better at showing trends and changes over time. Percents, averages, and other relative values will generally make data points easier to compare.

Again it’s much easier for viewers to gain meaning from the data when it’s shown spatially as opposed to numerically. We’ve also seen enough pie charts and pictographs to know their conventions leading to some immediate pre-understanding that occurs before our cognitive processes are activated.

Remember that the purpose of visually displaying data isn’t just to show the data. It’s to communicate something the data reveals. People typically won’t remember the actual numeric values, but will remember their relationships and comparisons.

Merge Science and Art with Infographics

Human beings are good at detecting and identifying patterns. We’re good at understanding spatial metaphors and we can better process and understand information when it’s well organized and structured. Patterns complement our natural perceptual and processing systems and patterns that can be easily shown visually would be difficult to see with the data alone.

Infographics use size, shape, color, and other primitive features to communicate. They communicate verbally through text, labels, captions, and legends. Digital infographics can be made interactive. They can show data in real time and allow viewers to explore and rearrange data for additional insight and understanding.

Not every infographic you come across online will be worth your time. Effective infographics tend to share some qualities.

They’re easy to perceive and interpret
They find unique ways to structure data and information
They’re efficient in communicating relationships and comparisons between different elements and data
When applicable they show movements and interactions
Their aesthetic qualities attract and engage

Infographics merge science and logic with art and creativity. They combine data with graphics. Their aesthetics can sometimes take over the data itself and be used to create artistic work or to promote social and political agendas.

Maps Go Beyond Geography

Maps are most commonly used for wayfinding and as a record of what’s known about a given environment. Beyond geography they can be useful for studying history, art, and other subjects. They also help create a desire in us to explore people, cultures, cities and landscapes.

Maps can’t include everything about an environment, but they should communicate the most important features as determined by the purpose of the map in question. A topological map would show different features than a street map for example. Depending on what features you decide to show you can create a near infinite variety of maps for the same environment.

Information on maps can typically be found across four different levels of communication between designer and viewer.

Feature information — This level is composed of the symbols, icons, landmarks, labels, size, color, and shapes that attract attention.
Structural information — This level creates a spatial layout that structures and organizes the information.
Viewer projected structures — This level comes from viewers who create additional structures, such as imaginary lines connecting objects, based on their schemas and mental models.
Subjective impression and associations — This level includes aesthetic treatments which can trigger emotions and memories of places and people previously visited

Remember maps can represent a near infinite number of possibilities so they should be designed within a context. They should have a specific purpose and be designed for specific people and uses.

Maps should be made to be both functional and beautiful. The aesthetics of a map can create additional experiences to help viewers process and remember the map’s features and can communicate far more than geographical information.

Use Timelines for Temporal Relationships and for Cause and Effect

Representing time can help us understand temporal relationships and the connections between events. The most common way we think about time is as something that progresses linearly in a single direction.

As you would expect timelines are most commonly used to show the linear nature of time. They’re usually shown horizontally with the future to the right and arrows to show direction. Events are shown in a chronological series, which may suggest cause and effect relationships.

Time can also be thought of as cyclical like the seasons or as a spiral helix. In ancient times events on a time line were sometimes shown non-chronologically and instead were shown according to which events were most significant.

Timelines are used:

To show newsworthy events
To show historical events
To show cause and effect
Tto show transformation and change
To show how events might shape the future
To show accomplishments for an individual or organization

How much time should be shown in a given timeline is up to the designer and the purpose of the timeline. Any amount of time can be shown and different scales of time can be used. Studying a timeline can help us make sense of the past and point the way toward the future.

Summary

Pure data can be very abstract and it can take time for viewers to cognitively understand what the information is communicating. By presenting it visually we can help people quickly find and process information moving cognitive load from working memory to early perception.

In addition to making the data easier to process, showing the data visually makes it easier to identify, compare and understand relationships leading to greater comprehension and memory.

There are a variety of ways to represent data visually, each with its own strengths and weaknesses. Visual data displays make the concepts they communicate quicker to process. They can be used to communicate different things and should be designed with a specific purpose and for a specific set of people.

Next week we’ll continue with some thoughts about what to do when complex information needs to be present and how we might make that complex information clearer and easier to understand.

Download a free sample from my book Design Fundamentals.

The post Using Graphics to Make Abstract Concepts Concrete appeared first on Vanseo Design.