Number of pages: 25
Estimated reading time: 30 minutes
Subject: design skills > layout / photography / typesetting / digital production / print production > composition, combining colors
'Clutter is Your Enemy'. In: Cole Nussbaumer Knaflic. Storytelling with Data: A Data Visualization Guide for Business Professionals. 1st edition. Hoboken: Wiley, 2015, 1–25.
Picture a blank page or a blank screen: every single element you add to that page or screen takes up cognitive load on the part of your audience—in other words, takes them brain power to process. Therefore, we want to take a discerning look at the visual elements that we allow into our communications. In general, identify anything that isn’t adding informative value—or isn ’t adding enough informative value to make up for its presence—and remove those things. Identifying and eliminating such clutter is the focus of this chapter.
You have felt the burden of cognitive load before. Perhaps you were sitting in a conference room as the person leading the meeting was flipping through their projected slides and they paused on one that looked overwhelmingly busy and complicated. Yikes, did you say “ugh” out loud, or was that just in your head? Or maybe you were reading through a report or the newspaper, and a graph caught your eye just long enough for you to think, “this looks interesting but I have no idea what I’m meant to get out of it”—and rather than spend more time to decipher it, you turned the page.
In both of these instances, what you’ve experienced is excessive or extraneous cognitive load.
We experience cognitive load anytime we take in information. Cognitive load can be thought of as the mental effort that’s required to learn new information. When we ask a computer to do work, we are relying on the computer’s processing power. When we ask our audience to do work, we are leveraging their mental processing power. This is cognitive load. Humans’brains have a finite amount of this mental processing power. As designers of information, we want to be smart about how we use our audience’s brain power. The preceding examples point to extraneous cognitive load: processing that takes up mental resources but doesn’t help the audience understand the information. This is something we want to avoid.
The data-ink or sienal-to-noise ratio
A number of concepts have been introduced over time in an effort to explain and help provide guidance for reducing the cognitive load we push to our audience through our visual communications. In his book The Visual Display of Quantitative Information,Edward Tufte refers to maximizing the data-ink ratio, saying "the larger the share of a graphic’s ink devoted to data, the better (other relevant matters being equal)." This can also be referred to as maximizing the signal-to-noise ratio (see Nancy Duarte’s book Resonate),where the signal is the information we want to communicate, and the noise are those elements that either don’t add to, or in some cases detract from, the message we are trying to impart to our audience.
What matters most when it comes to our visual communications is the perceived cognitive load on the part of our audience: how hard they believe they are going to have to work to get the information out of your communication. This is a decision they likely reach without giving it much (if any) conscious thought, and yet it can make the difference between getting your message across or not.
In general, think about minimizing the perceived cognitive load (to the extent that is reasonable and still allows you to get the information across) for your audience.
One culprit that can contribute to excessive or extraneous cognitive load is something I refer to simply as clutter. These are visual elements that take up space but don’t increase understanding. We’ll take a more specific look at exactly what elements can be considered clutter soon, but in the meantime I want to talk generally about why clutter is a bad thing.
There is a simple reason we should aim to reduce clutter: because it makes our visuals appear more complicated than necessary.
Perhaps without explicitly recognizing it, the presence of clutter in our visual communications can cause a less-than- ideal—or worse—uncomfortable user experience for our audience (this is that “ugh”moment I referred to at the beginning of this chapter). Clutter can make something feel more complicated than it actually is. When our visuals feel complicated, we run the risk of our audience deciding they don't want to take the time to understand what we’re showing, at which point we've lost our ability to communicate with them. This is not a good thing.
Gestalt principles of visual perception
When it comes to identifying which elements in our visuals are signal (the information we want to communicate) and which might be noise (clutter), consider the Gestalt Principles of Visual Perception. The Gestalt School of Psychology set out in the early 1900s to understand how individuals perceive order in the world around them. What they came away with are the principles of visual perception still accepted today that define how people interact with and create order out of visual stimuli.
We’ll discuss six principles here: proximity, similarity, enclosure, closure, continuity, and connection. For each, I'll show an example of the principle applied to a table or graph.
We tend to think of objects that are physically close together as belonging to part of a group. The proximity principle is demonstrated in Figure 3.1:you naturally see the dots as three distinct groups because of their relative proximity to each other.
Figure 3.1 Gestalt principle of proximity
We can leverage this way that people see in table design. In Figure 3.2.simply by virtue of differentiating the spacing between the dots, your eyes are drawn either down the columns in the first case or across the rows in the second case.
Figure 3.2 You see columns and rows, simply due to dot spacing
Objects that are of similar color, shape, size, or orientation are perceived as related or belonging to part of a group. In Figure 3.3. you naturally associate the blue circles together on the left or the grey squares together on the right.
Figure 3.3 Gestalt principle of similarity
This can be leveraged in tables to help draw our audience's eyes in the direction we want them to focus. In Figure 3.4. the similarity of color is a cue for our eyes to read across the rows (rather than down the columns). This eliminates the need for additional elements such as borders to help direct our attention.
Figure 3.4 You see rows due to similarity of color
We think of objects that are physically enclosed together as belonging to part of a group. It doesn’t take a very strong enclosure to do this: light background shading is often enough, as demonstrated in Figure 3.5.
Figure 3.5 Gestalt principle of enclosure
One way we can leverage the enclosure principle is to draw a visual distinction within our data, as is done in the graph in Figure 3.6.
Figure 3.6 The shaded area separates the forecast from actual data
The closure concept says that people like things to be simple and to fit in the constructs that are already in our heads. Because of this, people tend to perceive a set of individual elements as a single, recognizable shape when they can— when parts of a whole are missing, our eyes fill in the gap. For example, the elements in Figure 3.7 will tend to be perceived as a circle first and only after that as individual elements.
Figure 3.7 Gestalt principle of closure
It is common for graphing applications (for example, Excel) to have default settings that include elements like chart borders and background shading. The closure principle tells us that these are unnecessary—we can remove them and our graph still appears as a cohesive entity. Bonus: when we take away those unnecessary elements, our data stands out more, as shown in Figure 3.8.
Figure 3.8 The graph still appears complete without the border and background shading
The principle of continuity is similar to closure: when looking at objects, our eyes seek the smoothest path and naturally create continuity in what we see even where it may not explicitly exist. By way of example, in Figure 3.9.if I take the objects (1) and pull them apart, most people will expect to see what is shown next (2), whereas it could as easily be what is shown after that (3).
Figure 3.9 Gestalt principle of continuity
In the application of this principle, I’ve removed the vertical y-axis line from the graph in Figure 3.10 altogether. Your eyes actually still see that the bars are lined up at the same point because of the consistent white space (the smoothest path) between the labels on the left and the data on the right. As we saw with the closure principle in application, stripping away unnecessary elements allows our data to stand out more.
Figure 3.10 Graph withy-axis line removed
The final Gestalt principle w e’ll focus on is connection. We tend to think of objects that are physically connected as part of a group. The connective property typically has a stronger associative value than similar color, size, or shape. Note when looking at Figure 3.11. your eyes probably pair the shapes connected by lines (rather than similar color, size, or shape): that’s the connection principle in action. The connective property isn’t typically stronger than enclosure, but you can impact this relationship through thickness and darkness of lines to create the desired visual hierarchy (we'll talk more about visual hierarchy when we discuss preattentive attributes in Chapter 4).
Figure 3.11 Gestalt principle of connection
One way that we frequently leverage the connection principle is in line graphs, to help our eyes see order in the data, as shown in Figure 3.12.
Figure 3.12 Lines connect the dots
As you have learned from this brief overview, the Gestalt principles help us understand how people see, which we can use to identify unnecessary elements and ease the processing of our visual communications. We aren't done with them yet. At the end of this chapter, we’ll discuss how we can apply some of these principles to a real-world example.
But first, let’s shift our focus to a couple of other types of visual clutter.
Lack of visual order
When design is thoughtful, it fades into the background so that your audience doesn’t even notice it. When it’s not, however, your audience feels the burden. Let’s look at an example to understand the impact visual order—and lack thereof—can have on our visual communications.
Take a moment to study Figure 3.13. which summarizes survey feedback about factors considered by nonprofits in vendor selection. Note specifically any observations you may have regarding the arrangement of elements on the page.
Figure 3.13 Summary of survey feedback
As you look over the information, you might be thinking, “this looks pretty good.”I'll concede: it’s not horrible. On the positive side, the takeaway is clearly outlined, the graph is well ordered and labeled, and key observations are articulated and tied visually to where w e’re meant to look in the graph. But when it comes to the overall design of the page and placement of elements, I'd have to disagree with any praise. To me, the aggregate visual feels disorganized and uncomfortable to look at, as if the various components were haphazardly put there without regard for the structure oftheoverallpage.
We can improve this visual markedly by making some relatively minor changes. Take a look at Figure 3.14.The content is exactly the same; only the placement and formatting of elements have been modified.
Figure 3.14 Revamped summary of survey feedback
Compared to the original visual, the second iteration feels somehow easier. There is order. It is evident that conscious thought was paid to the overarching design and arrangement of components. Specifically, the latter version has been designed with greater attention to alignment and white space. Let’s look at each of these in detail.
The single change having the biggest impact in the preceding before-and-after example was the shift from center-aligned to left-justified text. In the original version, each block of text on the page is center-aligned. This does not create clean lines either on the left or on the right, which can make even a thoughtful layout appear sloppy. I tend to avoid center-aligned text for this reason. The decision of whether to left- or right-justify your text should be made in context of the other elements on the page. In general, the goal is to create clean lines (both horizontally and vertically) of elements and white space.
Presentation software tips for aligning elements
To help ensure that your elements line up when you are placing them on a page within your presentation software, turn on the rulers or gridlines that are built into most programs. This will allow you to precisely align your elements to create a cleaner look and feel. The table functionality built into most presentation applications can also be used as a makeshift brute-force method: create a table to give yourself guidelines for the placement of discrete elements. When you have everything lined up exactly like you want it, remove the table or make the table's borders invisible so that all that is left is your perfectly arranged page.
Without other visual cues, your audience will typically start at the top left of the page or screen and will move their eyes in a "z”shape (or multiple “z" shapes, depending on the layout) across the page or screen as they take in information. Because of this, when it comes to tables and graphs, I like to upper-left-most justify the text (title, axis titles, legend). This means the audience will hit the details that tell them how to read the table or graph before they get to the data itself.
As part of our discussion on alignment, let’s spend a bit of time on diagonal components. In the previous example, the original version (Figure 3.13) had diagonal lines connecting the takeaways to the data and diagonally oriented x-axis labels; the former were removed and the latter changed to horizontal orientation in the makeover (Figure 3.14).Generally, diagonal elements such as lines and text should be avoided. They look messy and, in the case of text, are harder to read than their horizontal counterparts. When it comes to the orientation of text, one study (Wigdor & Balakrishnan, 2005) found that the reading of rotated text 45 degrees in either direction was, on average, 52% slower than reading normally oriented text (text rotated 90 degrees in either direction was 205% slower on average). It is best to avoid diagonal elements on the page.
I've never quite understood this phenomenon, but for some reason, people tend to fear white space on a page. I use "white space” to refer to blank space on the page. If your pages are blue, for example, this would be "blue space”—I'm not sure why they would be blue, but the use of color is a conversation we will have later. Perhaps you've heard this feedback before: “there is still some space left on that page, so let’s add something there,”or worse, "there is still some space left on that page, so let's add more data.”No! Never add data just for the sake of adding data—only add data with a thoughtful and specific purpose in mind!
We need to get more comfortable with white space.
White space in visual communication is as important as pauses in public speaking. Perhaps you have sat through a presentation that lacked pauses. It feels something like this: there is a speaker up infront ofyou and possibly due to nerves or perhaps because they're trying to get through more material than they should in the allotted time they are speaking a mile a minute and you're wondering how they’re even able to breathe you’d like to ask a question but the speaker has already moved on to the next topic and still hasn’t paused long enough for you to be able to raise your question. This is an uncomfortable experience for the audience, similar to the discomfort you may have felt reading through the preceding run-on, unpunctuated sentence.
Now imagine the effect if that same presenter were to make a single bold statement: "Death to pie charts!”
And then pause for a full 15 seconds to let that statement resonate.
Go ahead—say it out loud and then count to 15 slowly.
That’s a dramatic pause.
And it got your attention, didn’t it?
That is the same powerful effect that white space used strategically can have on our visual communications. The lack of it—like the lack of pauses in a spoken presentation— is simply uncomfortable for our audience. Audience discomfort in response to the design of our visual communications is something we should aim to avoid. White space can be used strategically to draw attention to the parts of the page that are not white space.
When it comes to preserving white space, here are some minimal guidelines. Margins should remain free of text and visuals. Resist the urge to stretch visuals to take up the available space; instead, appropriately size your visuals to their content. Beyond these guidelines, think about how you can use white space strategically for emphasis, as was illustrated with the dramatic pause earlier. If there is one thing that is really important, think about making that the only thing on the page. In some cases, this could be a single sentence or even a single number. We'll talk further about using white space strategically and look at an example whenwediscussaestheticsinChapter5.
Non-strategic use of contrast
Clear contrast can be a signal to our audience, helping them understand where to focus their attention. We will further explore this idea in greater detail in later chapters. The lack of clear contrast, on the other hand, can be a form of visual clutter. When discussing the critical value of contrast, there is an analogy I often borrow from Colin Ware (Information Visualization : Perception for Design, 2004),who saidit'seasy to spot a hawk in a sky full of pigeons, but as the variety of birds increases, that hawk becomes harder and harder to pick out. This highlights the importance of the strategic use of contrast in visual design: the more things we make different, the lesser the degree to which any of them stand out. To explain this another way, if there is something really important we want our audience to know or see (the hawk), we should make that the one thing that is very different from the rest.
Let’s look at an example to further illustrate this concept.
Imagine you work for a U.S. retailer and want to understand how your customers feel about various dimensions of their shopping experience in your store compared to your competitors. You have conducted a survey to collect this information and are now trying to understand what it tells you. You have created a weighted performance index to summarize each category of interest (the higher the index, the better the performance, and vice versa). Figure 3.15 shows the weighted performance index across categories for your company and five competitors.
Figure 3.15 Original graph
Study it for a moment and make note of your thought process as you take in the information.
If you had to describe Figure 3.15 in a single word, what would that word be? Words like busy, confusing, and perhaps exhausting come to mind. There is a lot going on in this graph. So many things are competing for our attention that it is hard to know where to look.
Let's review exactly what we're looking at. As I mentioned, the data graphed is a weighted performance index. You don’t need to worry about the details of how this is calculated, but rather understand that this is a summary performance metric that we'd like to compare across various categories (shown across the horizontal x-axis: Selection, Convenience, Service, Relationship, and Price) for “Our Business”(depicted by the blue diamond) compared to a number of competitors (the other colored shapes). A higher index represents better performance, and a lower index means lower performance.
Taking in this information is a slow process, with a lot of back and forth between the legend at the bottom and the data in the graph to decipher what is being conveyed. Even if we are very patient and really want to get information out of this visual, it is nearly impossible because “Our Business" (the blue diamond) is sometimes obscured by other data points, making it so we can't even see the comparison that is most important to make!
This is a case where lack of contrast (as well as some other design issues) makes the information much harder to interpret than it need be.
Consider Figure 3.16. where we use contrast more strategically.
Figure 3.16 Revamped graph, using contrast strategically
In the revised graph, I’ve made a number of changes. First, I chose a horizontal bar chart to depict the information. In doing so, I rescaled all the numbers to be on a positive scale —in the original scatterplot, there were some negative values that complicated the visualization challenge. This change works here since we’re more interested in relative differences than absolute values. In this remake, the categories that were previously along the horizontal x-axis now run down the verticaly-axis. Within each category, the length of the bar shows the summary metric across “Our business”(blue) and the various competitors (grey), with longer bars representing better performance. The decision not to show the actual x-axis scale in this case was a deliberate one, which forces the audience to focus on relative differences rather than get caught up in the minutiae of the specific numbers.
With this design, it is easy to see two things quickly:
1. We can let our eyes scan across the blue bars to get a relative sense of how "Our business”is doing across the various categories: we score high on Price and Convenience and lower on Relationship, possibly because we're struggling when it comes to Service and Selection, as evidenced by low scores in these areas.
2. Within a given category, we can compare the blue bar to the grey bars to see how our business is faring relative to competitors: winning compared to the competition on Price, losing on Service and Selection.
Competitors are distinguished from each other based on the order in which they appear (Competitor A always appears directly after the blue bar, Competitor B after that, and so on), which is outlined in the legend at the left. If it were important to be able to quickly identify each competitor, thisdesigndoesn’timmediatelyallowforthat.Butifthatisa second- or third-order comparison in terms of priority and isn’t the most critical thing, this approach can work well. In the makeover, I’ve also organized the categories in order of decreasing weighted performance index for "Our business,” which provides a construct for our audience to use as they take in the information, and added a summary metric (relative rank) so it’s easy to know quickly how "Our business”ranks in each category in relation to our competition.
Note here how the effective use of contrast (and some other thoughtful design choices) makes it a much faster, easier, and just more comfortable-feeling process to get the information we're after than it was in the original graph.
When redundant details shouldn't be considered clutter
I've seen cases where the title of the visual indicates the values are dollars but the dollar signs aren't included with the actual numbers in the table or graph. For example, a graph tittle "Monthly Sales ($USD Millions)" with y-axis labels of 10, 20, 30, 40, 50. I find this confusing. Including the "$" sign with each number eases the interpretation of the figures. Your audience doesn't have to remember they are looking at dollars because they are labeled explicitly. There are some elements that should always be retained with numbers, including dollar signs, percent signs, and commas in large numbers.
Now that we have discussed what clutter is, why it is important to eliminate it from our visual communications, and how to recognize it, let’s look at a real-world example and examine how the process of identifying and removing clutter improves our visual and the clarity of the story that w e’re ultimately trying to tell.
Scenario: Imagine that you manage an information technology (IT) team. Your team receives tickets, or technical issues, from employees. In the past year, you've had a couple of people leave and decided at the time not to replace them. You have heard a rumbling of complaints from the remaining employees about having to “pick up the slack.”You’ve just been asked about your hiring needs for the coming year and are wondering if you should hire a couple more people. First, you want to understand what impact the departure of individuals over the past year has had on your team’s overall productivity. You plot the monthly trend of incoming tickets and those processed over the past calendar year. You see that there is some evidence your team's productivity is suffering from being short-staffed and now want to turn the quick-and-dirty visual you created into the basis for your hiring request.
Figure 3.17 shows your original graph.
Figure 3.17 Original graph
Take another look at this visual with an eye toward clutter. Consider the lessons we’ve covered on Gestalt principles, alignment, white space, and contrast. What things can we get rid of or change? How many issues can you identify?
I identified six major changes to reduce clutter. Let's discuss each.
1. Remove chart border
Chart borders are usually unnecessary, as we covered in our discussion of the Gestalt principle of closure. Instead, think about using white space to differentiate the visual from other elements on the page as needed.
2. Remove gridlines
If you think it will be helpful for your audience to trace their finger from the data to the axis, or you feel that your data will be more effectively processed, you can leave the gridlines. But make them thin and use a light color like grey. Do not let them compete visually with your data. When you can, get rid of them altogether: this allows for greater contrast, and your data will stand out more.
3. Remove data markers
Remember, every single element adds cognitive load on the part of your audience. Here, we’re adding cognitive load to process data that is already depicted visually with the lines. This isn’t to say that you should never use data markers, but rather use them on purpose and with a purpose, rather than because their inclusion is your graphing application’s default.
4. Clean up axis labels
One of my biggest pet peeves is trailing zeros on y-axis labels: they carry no informative value, and yet make the numbers look more complicated than they are! Get rid of them, reducing their unnecessary burden on the audience’s cognitive load. We can also abbreviate the months of the year so that they will fit horizontally on the x-axis, eliminating the diagonal text.
5. Label data directly
Now that we have eliminated much of the extraneous cognitive load, the work of going back and forth between the legend and the data is even more evident. Remember, we want to try to identify anything that will feel like effort to our audience and take that work upon ourselves as the designers of the information. In this case, we can leverage the Gestalt principle of proximity and put the data labels right next to the data they describe.
6. Leverage consistent color
While we leveraged the Gestalt principle of proximity in the prior step, let’s also think about leveraging the Gestalt principle of similarity and make the data labels the same color as the data they describe. This is another visual cue to our audience that says, “these two pieces of information are related.”
This visual is not yet complete. But identifying and eliminating the clutter has brought us a long way in terms of reducing cognitive load and improving accessibility. Take a look at the before-and-after shown in Figure 3.24.
Figure 3.18 Remove chart border
Figure 3.19 Remove gridlines
Figure 3.20 Remove data markers
Figure 3.21 Clean up axis labels
Figure 3.22 Label data directly
Figure 3.23 Leverage consistent color
Figure 3.24 Before-and-after
Any time you put information in front of your audience, you are creating cognitive load and asking them to use their brain power to process that information. Visual clutter creates excessive cognitive load that can hinder the transmission of our message. The Gestalt Principles of Visual Perception can help you understand how your audience sees and allow you to identify and remove unnecessary visual elements. Leverage alignment of elements and maintain white space to help make the interpretation of your visuals a more comfortable experience for your audience. Use contrast strategically. Clutter is your enemy: ban it from your visuals!
You now know how to identify and eliminate clutter.
Attribution: © All Rights Reserved, 2015 Wiley