Make the Complex Understandable: Show, Don't Tell

Imagine you’re reading an article about the lack of scientific evidence for the most popular dietary supplements. Folic acid, probiotics, green tea, resveratol, aloe vera, zinc, vitamin D, and so on. But you’re confused. “Wait,” you think, “Didn’t they just say there’s strong evidence for fish oil? Now they’re saying the evidence is only slightly promising.” Well, which is it?

Now imagine this same information delivered as a visual representation showing the strength of the evidence for various supplements for a variety of health problems (Figure 1). The stronger the evidence, the closer it is to the top. You see that fish oil is near the top, showing that there’s strong evidence for its use for high blood pressure and secondary heart disease. But look. There’s a line from fish oil down to another bubble a tad north of the “worth it” line, meaning that the strength of the evidence for fish oil for general health is much less than it is for high blood pressure and secondary heart disease. Ah, that explains the confusion. The strength of the evidence is different for different conditions.

 

Figure 1. Strength of scientific evidence for dietary supplements infographic (Source: http://www.informationisbeautiful.net/visualizations/snake-oil-supplements/)

 

The problem with many text explanations is that words get confusing when conveying complex relationships. And there are many complex relationships to explain in instruction. How things work. What’s related to what. How varying circumstances affect outcomes. And the explanations of these relationships too often become muddied or downright incomprehensible in a wall of words.

Concise, understandable, memorable, and fun

Enter visualizations or information graphics (commonly called infographics), stage right. Visualizations or information graphics are visuals specifically created to represent, instruct, or to disseminate information in a visual format. Traditionally, visualizations have included charts, maps, or diagrams. But there are many other types of visualizations and infographics in wide use today and you’ll see a bunch of examples in this article. For the rest of this article I’ll be using the term infographics to mean a wide range of visual representations whose goal is to inform and explain in a concise visual format.

You see infographics all around you and you use them without even thinking. For example, look at Figure 2 for a split second and tell me what it is.

 

Figure 2. I’m not telling you what this is but I bet you know.

 

When you looked at Figure 2, I’m betting you knew immediately that you were looking at a subway map. This particular subway map is for the Washington D.C. subway (Source: http://www.wmata.com/rail/maps/map.cfm).

We often see infographics used in news, science, and business communications but we don’t see too many of them used in instruction. And that’s a shame, because they can be very powerful for learning. Here’s why. These types of visual representations, when well designed, often have the power to do what words alone cannot. They can reveal what is hidden (where the transfer points are along the subway), make the complex easier to understand (where the stations are located and what “lines” they are on), and make the obscure more observable (how you can transfer to bus lines to get to local airports). They concisely summarize complex information into attractive visuals.

Well-designed infographics have perceptual, motivational, and cognitive characteristics that make them exceptionally valuable for instructional content, including improving:

• Clarity and conciseness

• Ability to make sense of complex information

• Focus on key information

• Engagement and ease of remembering

How infographics get the message across: Examples

Numerous studies describe the power of showing rather than telling. For example, Richard Mayer (1996) provides compelling evidence for the value of summary visuals through a number of experiments that show that if we want learners to be able to explain a system and solve problems, providing lengthy verbal or textual content doesn’t work too well. Visual summaries, in contrast, can make these types of learning outcomes far more likely. This research shows that a textual/verbal summary is not as effective as a multimedia summary that combines both visual and textual/verbal formats. It also shows that a summary with visuals and a small amount of text was more effective than a summary with visuals and a large amount of text. Lose the words!!! What this tells us is that summarizing information visually is beneficial and too many words get in the way. Good infographics do both.

And good infographics often get the message across more concisely and in more engaging ways than other methods. For example, let’s say you’re working with a state-wide homeschooling organization to produce information to overcome commonly held myths about homeschooling. For example, some people think that that homeschoolers typically aren’t prepared for college. Which of the following information representations makes the fact that this myth is incorrect more clearly and compellingly, the bullet points (tell) or the infographic (show)? I’ve shown these two examples to workshop participants and most agree that not only is the infographic more compelling, they get the gist faster.

 

Figure 3. Homeschool readiness for college, text bullets (Source: http://www.listafterlist.com/DesktopModules/iBelong.LAL.ListResults/ListResults_print.aspx)

 

Figure 4. Homeschool readiness for college, infographic (Source: http://offers.degreesearch.org/infographics/homeschooling-by-the-numbers)

 

An image represents many thousands of words and good infographics are the personification of this truth. And these images attract more attention than a wall-of-words. People are drawn to images. Text? Not so much. Figure 5 is an infographic showing how to repot a houseplant. It shows rather than tells, and does so in an extremely concise and clear manner. It is clear and visually engaging. (I highly recommend the Show Me How books, available in bookstores and from http://www.showmenow.com/?q=Book as sources of inspiration for ways to provide information visually.)

 

Figure 5. How to repot a houseplant visualization (Source: http://www.showmenow.com/?q=showme/gallery&page=5)

 

Why is it more engaging to show rather than tell? A good part of the answer lies in how we perceive the world. People naturally prefer images. Vision dominates over other senses for acquiring perceptual information and we are wired to efficiently handle the large amount of visual information we deal with every day. And, because of this wiring, we feel more compelled to make sense of images than text. We also have a surprisingly large capacity to remember images, especially compared to our ability to remember text.

Infographics often take advantage of our perceptual characteristics. For example, we notice differences in color, size, shape, what’s moving, and what’s inside and outside a grouping and many infographics use these factors to make complex information easier to understand.

For instance, Figure 6 uses color and size to show comparisons of different country’s military budgets.

 

Figure 6. Comparison of military budgets infographic (Source: http://www.guardian.co.uk/news/datablog/2010/apr/01/information-is-beautiful-military-spending)

 

Because of our wiring, we can’t help but zoom into the red shape because of size and color. And we can easily judge the relative size of the shapes. Chances are you spent a little time looking at this infographic to determine what it had to say. You put in effort and were likely more engaged than you would have been with a paragraph explaining the same information. (I would have skipped right over the paragraph, I think. You?)

I’ll bring up a potential negative right here in case it’s not obvious. There’s opportunity to engage in a little or a lot of deceit when using infographics and visualizations such as charts and graphs. In Figure 6, military budgets are provided without any context. When we put them in the context of gross domestic product, the picture looks quite different (Figure 7). (If the differences between these charts have piqued your interest, as they did mine, you can get an explanation at the source URL. See? Good infographics can make you curious to know more!)

Figure 7. Comparison of military budgets as % of GDP infographic (Source: http://www.guardian.co.uk/news/datablog/2010/apr/01/information-is-beautiful-military-spending)

 

The point here is twofold. Infographics can help us see relationships, but we can also manipulate relationships by what we show and how we show it. Infographics typically use color, size, shape, and other perceptual factors to make complex information clearer.

Well-designed infographics also make patterns that are not easy to detect easier to detect. For example, citizens concerned with U.S. government spending might have questions about what parts of the budget can be cut, that is, which portions are not mandatory spending. (Mandatory spending includes expenditures mandated by programs outside of the budgetary process.) They could try to figure this out by reading the actual budget (thousands of pages, ugh!) or reading news about the budget (Figure 8). The news story shown in Figure 8 clearly shows the mandatory budget amount. Holy cow, that’s more than 80% of the budget. What’s in that mandatory portion? It’d be pretty hard to figure this out by reading the budget or the news.

 

Figure 8. News story about US 2011 budget (Source: http://www.cbsnews.com/stories/2010/02/01/politics/main6163654.shtml)

 

To the rescue: Figures 9 and 10 show how infographics can make this information clearer and easier to make sense of.

Figure 9 is a screenshot from an infographic that shows total spending divided into labeled blocks. This infographic, like the military spending examples, uses color and size to help us understand the information. Block size indicates the spending amount and the colors of the blocks show percent change from 2010. Rectangles in the chart are sized according to the amount of spending for that category. Color shows the change in spending from 2010. Rectangles in the chart are sized according to the amount of spending for that category. Color shows the change in spending from 2010.So we can easily see that we spend a whole lot more on Social Security than we spend on Veterans benefits, for example. And we can see that the budgets for Health, Income Security, and Veteran’s benefits had large increases over the 2010 budget.

 

Figure 9. U.S. 2011 budget with mandatory spending infographic (Source: http://www.nytimes.com/interactive/2010/02/01/us/budget.html)

 

But how much of this can realistically be cut? That’s still not obvious. If you click the Hide Mandatory Spending button (the button that the arrow points to), the areas of mandatory spending disappear (Figure 10). The colorless areas are the removed mandatory spending areas. Wow, that’s a huge portion of the budget. You can also zoom into smaller areas, as shown, to determine 2010 and 2011 budget amounts for a specific block.

 

Figure 10. U.S. 2011 budget without mandatory spending infographic (Source: http://www.nytimes.com/interactive/2010/02/01/us/budget.html)

 

Figures 9 and 10 are terrific examples of making extremely complex information easier to understand through infographics. They take advantage of our perceptual abilities to zoom into changes in size and color. They also show how infographics are useful for making complexity more manageable, revealing underlying patterns, and emphasizing key information.

The examples I’ve shown so far are statistical in nature but infographics are also useful for making other types of complex information clearer. For example, Figure 11 is an infographic that shows categorization of fruits, vegetables, herbs, fish, and other foods into seasons. This is a clever and engaging way of presenting this information, and a viewer is likely to spend more time considering this image than they would a table with similar information.

 

Figure 11. Seasonality of foods infographic (Source: http://www.guardian.co.uk/lifeandstyle/2008/oct/07/seasonal.food.chart)

 

I explained earlier that in addition to making complex information more easily understood, infographics can also make content more vivid. We’ve seen that in the examples shown. Vivid content is far more memorable than more understated content, a fact that advertising and marketing folks regularly take advantage of. Figure 12 is one of my favorite examples of a vivid and compelling infographic (it’s also meant to be instructional). It’s a four minute animation that documents the U.S. Civil War. When I show this infographic during workshops, participants are transfixed by the simple and powerful images and graphics on the screen.

 

Figure 12. The Civil War in four Minutes infographic (Source: http://www.lincolnlibraryandmuseum.com/m5.htm)

 

Infographics represent, instruct, or disseminate complex information in a visual format and, when well designed, do so in a concise and compelling manner. They tap into our natural perceptual, motivational, and cognitive abilities and preferences.

Types of infographics

Infographics come in a variety of flavors. One way to categorize them is by the type of information they provide. I developed a simple infographic (Figure 13) that shows all of the infographics shown above by the type of information provided.

 

Figure 13. Types of infographics infographic (Source: Patti Shank)

 

The subway map is an example of a spatial infographic because it shows the location of stops, the lines themselves, etc. The repotting a houseplant example and the Civil War example are both chronological infographics because they primarily highlight a sequence of events. The food seasonality example is conceptual because it shows us a categorization of those foods by season. The military spending, SAT scores, and U.S. 2011 budget examples are quantitative infographics. All deal with amounts and comparisons of those amounts. Some infographics combine types (chronological and quantitative, for instance).

You can also categorize infographics by movement and interaction. Some are static images, such as the foods by season infographic and the repotting a houseplant infographic. The Civil War infographic is an example of an animated infographic and the U.S. 2011 budget is an example of an interactive infographic. Interactive means that the user is able to manipulate the infographic. You’ll see many examples of these if you go to the links I share in the Getting Started section.

Showing rather than telling in instruction

Making complex information clear is a common part of our jobs and infographics can be extraordinarily useful towards this end because they take advantage of our natural affinity for and desire to understand images and our innate perceptual capabilities. Plus they help us get away from the too-often-deadly wall-of-words that makes learning content look boring and feel confusing.

I try, more and more, to make my explanations visual. One example of that is Figure 12. To be honest, I started out explaining the categorization in text and then realized that showing would be far clearer than telling in this situation (as it is in so many situations). So I spent a few minutes pulling together the elements to make this infographic.

What should also be clear is that you don’t need to be a graphic artist to create acceptable infographics. I am certainly not a graphic artist, but I have availed myself of opportunities to learn more about graphics over the years. These experiences have given me a better “eye,” but let me clear … Photoshop and Illustrator scare me. I use simple tools such as PowerPoint and SnagIt. My infographics are rarely gorgeous like some of the ones shown here. They’re acceptable. They do the job.

One of the best ways to get started is by adapting infographics you see for a variety of purposes. For example, the repotting a houseplant infographic gave me an idea for showing how to use a glucometer to get a blood sugar reading (Figure 14). I did this by using my inexpensive digital camera and then pasting the images onto a PowerPoint slide and arranging them with text boxes, shapes, and arrows.

Inspiration: How to repot a houseplant visualization (Source: http://www.showmenow.com/?q=showme/gallery&page=5)

Result: How to use your glucometer to obtain your blood sugar reading (Source: Patti Shank)

 

Figure 14. How I adapted an infographic for another purpose, example 1

 

A diabetic educator in a physician’s office typically teaches newly diagnosed diabetic patients how to do this. Patients practice right then and there. Good way to learn! But ... no one wants to prick their fingers 20 times or even 5 times in a row so that they get adequate practice. So when they do this at home the next time, they often need a refresher. The materials that come with the tools are not concise. A simple infographic works better as a reminder than a wall-of-words.

I am not saying that you should never provide long textual (or verbal) explanations but that you should consider whether learners will understand or even use them. We need to realize that long textual (or verbal) explanations can be intimidating and unclear, so a visual explanation is worth considering.

An infographic on the front of Business Week gave me an idea for creating an infographic on the numerous roles that today’s instructional designers have to juggle (Figure 15). I created this infographic using PowerPoint clip art, text boxes, and arrows. It took almost no time to create. I think it makes the point better (and in a more engaging way) that an instructional designer often has many roles than a textual explanation would. Agree?

 

Inspiration: Business Week cover, Jan 18, 2010

Result: The many roles of today’s instructional designer (Source: Patti Shank)

 

Figure 15. How I adapted an infographic for another purpose, example two

 

Problems with infographics

Infographics are not without problems and you should be aware of them so you can avoid them. You probably noticed that I used the term “well designed” or “good” before the word infographic throughout this article. That’s because these images can be confusing under certain conditions.

Bresciani and Eppler, at the University of Lugano in Switzerland developed a classification system of potential visualization issues. They gleaned their list from a review of research and interviews with experts and divided the issues into cognitive, emotional, and social issues. Figure 16 is a screenshot taken from their Table of Disadvantages in the Appendix, which lists potential issues, the research discussing each issue, and a brief explanation of the issue. For example, the cryptic encoding issue describes how a visual format may use elements that are not universally understood.

 

Figure 16. Section from the Table of disadvantages with brief explanations, Bresciani and Eppler

 

One comment that I found especially interesting was their discussion of how these problems could be intentional or unintentional. Intentionally inducing problems? Remember how I discussed how infographics could intentionally mislead when I discussed the comparison of the military budgets infographics. The authors of this paper conclude, however, that it is very difficult to determine intentionality. (But it is worth considering your own intentions when developing infographics!)

If you agree with my assertion that infographics can be especially valuable for learning content, it’d be a great idea to download the paper and use the list of problems as a checklist of sorts to help you reduce or eliminate common problems.

One additional point worth considering is the time and effort it takes to produce these types of images. It often takes more time to create visual explanations than textual explanations. But if you begin developing them, I think you’ll find that they get easier to develop and that you can reuse some of the ones you develop with other images for other purposes. Still, the time consideration means that you probably won’t create them in all cases where they could be valuable.

Getting started

The best first step for getting started with creating infographics is to view lots of examples of them to get ideas about what to include and what works well and less well. Great sources of inspiration are available at the following sites.

• David McCandless’ Information is Beautiful site: http://www.informationisbeautiful.net/

• The online version of the New York Times has many infographic examples (take a look at the infographic about the BP oil spill off the coast of the southeastern U.S. as an example http://www.nytimes.com/interactive/2010/05/27/us/20100527-oil-landfall.html

• A list of good places to view infographics is available on the Smashing Magazine site: http://www.smashingmagazine.com/2009/09/11/25-useful-data-visualization-and-infographics-resources/.

After you view lots of examples, you may want to try to build one. Here’s what I do when I want to create one.

1. Pick a question you want to answer visually. For example—What’s the most valuable practice for using a 401k to save adequate funds for retirement? The answer to this question will likely be more impactful visually than in text. It’s usually better to answer one question than try to cram the answers to multiple questions into one infographic.

2. Determine what critical point you are trying to make. For this question,
   I want to make the point that you’ll have far more money by saving less each month starting at 25 than saving more each month starting at 40 (about the time that you begin to care about having enough money at retirement).

3. Determine if the emphasis should be spatial, conceptual, chronological, or quantitative. In this case, the emphasis is clearly quantitative. Not only is amount important but a comparison of amounts is needed, too. If I wanted to show how people should ideally prepare for retirement over time in another infographic, for example, I’d build a chronological infographic. An animated one might be especially compelling.

4. Look for examples of similar types of infographics to adapt. Because I’m not a graphic artist, I need examples that I can emulate. I’ve seen infographics showing comparisons of money using piles of money and think that type of graphic would do a terrific job of making my point in a visual manner.

5. Design and test. Now you’ll use the tools you have available to build your infographic. It’s a good idea to test your infographics to see if others get the message you are intending to send. It’s a good idea to do this. Ask me how I know.

Figure 17 shows the infographic I built in less than ten minutes to show you that these don’t have to be that time consuming, using just PowerPoint. If you want to improve your skills using PowerPoint as an image creation and editing tool, you should subscribe to Tom Kuhlmann’s blog: http://www.articulate.com/rapid-elearning/.

 

Figure 17. Save now or later infographic (Source: Patti Shank)

 

I can think of some ways to make this better. I’d like to add a photograph on top of each money pile that compares what it’ll be like to live on these amounts. The infographic also needs to have an explanation of the assumptions (interest rates, for example) and show the final amounts.

There are some other tools that I hope to play with more to use in creating infographics. One is Wordle (http://www.wordle.net/), a tool that generates word diagrams that use size and color of words to show the frequency of word use in a given segment of textual content (Figure 18). This would be a super tool for infographics about speeches, buzzwords, and the like.

 

Figure 18. Frequency of tags used in Patti Shank’s del.icio.us site (Source: http://www.wordle.net/ and http://www.delicious.com/LearningPeaks/)

 

Another tool I want to play more with is the Google Public Data explorer (http://www.google.com/publicdata/home) which makes it possible to create visualizations using large available datasets (Figure 19). I can see using this in various types of instruction.

 

Figure 19. Fertility rate visualization (Source: http://www.google.com/publicdata/home)

 

Other tools that I intend to check out in the future include:

• StatPlanet (http://www.sacmeq.org/statplanet/

• SIMILE Widgets (http://www.simile-widgets.org/)

• Lovely Charts (http://lovelycharts.com/), and

• Many Eyes (http://www-958.ibm.com/software/data/cognos/manyeyes/).

There are additional tools listed here: http://www.1stwebdesigner.com/freebies/free-online-tools-create-diagrams/.

Final thoughts

This is the place in an article where I usually try to tell you what I told you. So 2010, don’t you think? So instead, I’ll leave you with this summary infographic.

 

Figure 20. Summary of main benefits of good infographics (Source: Patti Shank)

 

I know I could make Figure 20 more elegant but I am forcing myself to leave it as is to prove that when you’re on deadline, you can build acceptable visualizations quickly. The key message should be obvious: Well designed infographics can help us do what we do better. Often much better. And they’re fun to develop. Now tell me you can’t use a bit of that!

References and resources

20 Essential Infographics & Data Visualization Blogs http://www.inspiredm.com/2009/10/10/20-essential-infographics-data-visualization-blogs/

Eppler M., Bresciani S. (2008) The risks of visualization: A classification of disadvantages associated with graphic representations of information. Institute for Corporate Communication Working Paper, Lugano, Switzerland. Available: http://www.knowledge-communication.org/pdf/bresciani-eppler-risks-visualization-wpaper-08.pdf Additional research by Brescani on visualizations: http://sabrinabresciani.wordpress.com/publications/

Heath, C. & Heath, D. (2007) Made to Stick: Why Some Ideas Survive and Others Die. Random House.

Huge Infographics Design Resources: Overview, Principles, Tips and Examples http://www.onextrapixel.com/2010/05/21/huge-infographics-design-resources-overview-principles-tips-and-examples/

Malamed, C. (2009) Visual Language for Designers: Principles for Creating Graphics That People Understand. Rockport Publishers.

Mayer, R. et al. (1996) When Less Is More: Meaningful Learning From Visual and Verbal Summaries of Science Textbook Lessons, Journal of Educational Psychology 88: 64–73. Available: http://visuallearningresearch.wiki.educ.msu.edu/file/view/Mayer,+et+al+(1996).pdf

Meyer, E. (1997) Designing Infographics. Hayden Books.

Ware, C. (2008) Visual Thinking for Design. Morgan Kaufmann.

Wong, D. (2010) The Wall Street Journal Guide to Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures. W. W. Norton & Company.

February 14, 2011