How To Make Visually Complex Information Easy To Understand

Posted: 12 May 2014 05:30 AM PDT

Our world is complex and it shouldn’t be a surprise that visually depicting a world of complex objects, systems, and processes leads to some rather complex graphics. Simplifying should be a first step, but sometimes all that complex information needs to remain. How can we help people understand our message despite its complexity?

The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Last week I talked about making abstract concepts concrete through the use of graphs, diagrams, infographics, and other visual displays. Today I want to talk about how we can clarify complex information and make it more understandable.

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

Exploded view drawing of a mechanical system by Leonardo da Vinci

What is Visual Complexity?

What does it mean for something to be complex? Like so many things design, it depends on what that something is.

Numbers — are complex when they contain both real and imaginary components
Systems — are complex when they’re composed of many interdependent parts
Tasks — are complex when they take a great deal of cognitive effort to complete
Information — is visually complex when it’s densely packed and lacking structure

Complexity can be subjective and based on the perception of the viewer. In a sense complexity is in the eye of the beholder. If your relevant skills, knowledge, and abilities don’t align with a task, that task likely seems more complex than if your skills , knowledge, and abilities aligned with it.

The more complex the information, the greater the cognitive load required to process it.

Complexity can also be subjective based on the moment. A viewer might be distracted and his or her attention might be divided on more than one thing. If the viewer is distracted by something in our design, it’s something we can correct. If the viewer is distracted with something in his or her personal life there’s not much we can do. In either case tasks will be more difficult to complete and the information will be more difficult to comprehend.

Graphics that attempt to explain complex concepts are unsurprisingly complex and information rich. There’s a lot to communicate with complex information and meaning can be conveyed through details, patterns, shapes, text, color, and other design elements. Many will likely be needed and used.

Because there are more elements to identify and process, it takes longer to search through a complex graphic and locate what you’re looking for. One tracking study found (PDF) that visually complex web pages lead to more scattered and disordered eye scanning paths than those with fewer elements.

That suggests we should reduce complexity and remove as many elements as we can. Unfortunately sometimes all those elements are necessary to fully explain something complex. Sometimes we can’t reduce complexity and should strive to clarify it instead.

Cognition and Complexity

People rely on previously held knowledge to understand complex information. We lean on schemas and mental models to perform cognitive tasks and to integrate new information.

Schemas are often built from fuzzy and incomplete information. Sometimes this leads to conflicting and illogical concepts being stored, which places great demands on working memory and can cause cognitive dissonance.

To reduce dissonance we continue to refine our schemas in the presence of new information. We gradually build them up into larger structures. We construct mental models based on our schemas, which become broader and more general representations of how the world works.

Two ways we can help our audience build more accurate mental models are through coherency and context.

Coherency — is about consistency and unity. It’s about everything in the explanation being meaningful and making logical sense.
Context — is about the framework within which new information is integrated.

Coherency might involve cause and effect or steps in a process. It contains a structure that simply makes sense both visually and verbally. You can help viewers by removing irrelevant information and increasing visual unity

Context sets expectations and can help guide viewer’s attention. Context influences what will be noticed and how it’s meaning will be interpreted and incorporated back into long-term memory. Something seen out of context doesn’t make sense and can lead to confusion. Providing context helps viewer’s understand the concepts being communicated.

How to Clarify Visually Complex Graphics

There are several approaches you can use to help viewers build and refine more accurate schemas and mental models without overloading them.

Segments and Sequences — present information in chunks instead of all at once
Specialized views — show hidden components
Magnification — show increased detail
Implied motion — suggests motion in static pictures
Inherent Structures — a structure that makes conceptual sense will complement the information and the visual processing of the viewer

Segments and Sequences

Complex information is difficult in part because it comes with so much information. Showing everything at once requires a lot of cognitive processing, which can reduce comprehension and cause viewers to feel overwhelmed.

Better is to segment the information into smaller, digestible chunks and when appropriate show it as a sequence with beginning, middle, and end. Pace the information instead of trying to present it all in an instant.

Human beings naturally divide information into manageable parts. We add chapters to books. We categorize content on a website. We create catalogs of products that can be sorted alphabetically or by price. Segmenting information complements our natural cognitive processes.

Information divided into small, but meaningful chunks is easier to manage in working memory and easier to incorporate into long-term memory. It reduces cognitive load and the overwhelmed feeling that might come with it.

By presenting simpler concepts first and then progressively disclosing more complex information to build on the simple, we help viewers gradually build schemas and mental models.

We want viewers to recombine the chunks into a unified and coherent whole as they become schemas and mental models. To help that process we can:

Show the big picture to provide context
Introduce the core concepts early and then build on those concepts
Provide visual continuity to the information and connect segments to direct the eye through them

A sequence is type of segment shown in chronological order. Sequences can be effective for showing procedures, cause and effect, a series of steps, or any idea or concept that builds on previous ideas and concepts.

Sequencing naturally connects and groups important visual information together. The group is represented as a single unit in working memory and increases the odds it gets encoded as a single group into long-term memory. It leads to reduced cognitive load, quicker processing, and greater comprehension.

Specialized Views

Sometimes the information we need to understand a system or structure is hidden within it. Specialized views allow us to make this hidden information accessible. They allow viewers to see through and inside the structure.

Interior views as you would guess show the interior of the system. They remove an area on the surface so people can see what’s inside.

Cutaways — remove the surface of a particular area and are usually rendered to make it appear as though you’re seeing through a window or tear.
Cross sections — show an object cut at right angles to its axis
Transparent views — make the exterior of an object invisible to show the entire internal structure

Exploded views show components of a structure arranged correctly, but separated along a common axis. They show how all the components fit together as well as their details and relationships to each other and the whole.

The components in an exploded view might be moved out of alignment to better fit the layout. Flow lines are used to show where each part belongs in the overall assembly and callouts are used to show component names.

An exploded view conveys the structure of the object or system. The function of the components can be shown with the addition of arrows as can movement through the system.

Magnification

At times more detail of a specific area or component is necessary to understand it. We can magnify those areas and components to show an increased level of detail that calls attention to its most important aspects.

The detail is usually enlarged and arranged as an inset. Moving it away from the main graphic can help call attention to it and highlight it. Lines, arrows, or a zoom effect keep it connected to the whole.

Magnifying some areas has the advantage of the main graphic being there for context. The main graphic presents the holistic view and the magnified areas offer the specific details.

Implied Motion

Specialized and magnified views are great, but they’re also static. They don’t show the the motion of a dynamic system, which might be necessary to explain:

How the system works
How the structure is assembled
Unseen forces that act on the system.

If the graphic is interactive you can build movement into it. For graphics that are static we can imply motion through one of several techniques.

Motion lines are a streaking lines behind an object to indicate speed and direction. Studies show them to be effective at conveying an impression of quick movement in a given direction.

Stroboscopic movement simulates movement by presenting a progression of images similar in size and shape, but differing in position. Think panels in a comic book. This difference in position creates a rhythm of motion.

Action arrows as we’ve seen in prior posts are a good way to show movement and direction. To show action the arrows might be curved and they typically depend on the overall context to be understood.

Motion blur can be used to show movement. It’s commonly used in photographs, but it has the disadvantage that in blurring some details might be lost.

Inherent Structure

Nothing exists or is perceived in isolation. Everything is part of some larger context and comprehension comes from understanding how parts are connected and related. The structure of an object or system can express meaning by revealing these relationships

Memory for content improves when the information is organized spatially. It allows features like shape and color to be encoded along with the semantic structure making the features easier to integrate and later retrieve.

A structure is more than just ordering elements aesthetically. Ideally the structure will arise out of the meaning of the information being conveyed.

One approach to organizing and structuring information comes from Saul Wurman and is known by the acronym LATCH.

Location
Alphabet
Time
Category
Hierarchy (Continuum)

These are sometimes referred to as the 5 hat racks and each is a different way to organize information. They’re especially helpful for organizing large amounts of information and are generally familiar to most everyone.

Different information naturally calls for different types of organization. News items want to be organized with a time component. Places want to be organized by location. Last names want to be organized alphabetically.

The way you organize information influences how the information is taken in and processed. Using an the organization that makes conceptual sense will help viewers comprehend the message you’re trying to convey.

Summary

Simplifying complex information should be our first step in dealing with it. There comes a point though, where all that can be removed has been removed and what’s left is still quite complex.

The more complex the information, the greater the cognitive load required to process it and the greater the chance for dissonant ideas to conflict.

We can help clarify complex information in a number of ways. We can segment and/or sequence the information to make it easier to process. We can present various views that allow viewers to see hidden information. We can magnify some information to make details clearer. We can show implied motion on static pictures. Finally we can choose a structure for organization that complements the information being communicated.

Each of these techniques will help you explain complex information and will help your audience process and comprehend the message.

We have one more topic to cover in this series and that’s what we can do to make an emotional connection with an audience? How does that emotion help attract attention to important information. How does it influence the way the message is perceived and interpreted? We’ll get to the answers next week.

Download a free sample from my book Design Fundamentals.

The post How To Make Visually Complex Information Easy To Understand appeared first on Vanseo Design.