Initial reports downplayed the threat of radiation from a damaged nuclear power plant in Japan. An increasingly dangerous nuclear crisis produced explanations of the risks. How were info graphics used online to explain the complexity? We reviewed infographics used on Washington Post.com and CNN.com.
We assume: (1) the audience is non-experts, (2) the goal is to communicate as quickly and EFFECTIVELY as possible, and (3) the graphics are not presented with live narration (i.e. weather broadcasts), which offer some advantages over graphics without narration. Graphics that present a multiple step process typically contain more detail than a graphic explaining one concept. At the same time, research consistently shows that scanning web users do not spend much time on web pages. Our research suggests that the design of an online infographic is more important than ever to avoid a cognitive “kick-out” that terminates users’ engagement.
YOUR “WORKING MEMORY” IS LIMITED.
As you read this, your “working memory” has only a limited storage capacity and can be quickly overloaded (see A. Lang at Indiana University). Other research of explanatory graphics by R. Mayer at the University of California supports one of the four components in our P-I-C-K model. The C in PICK represents “contiguity,” which defines how graphical and textual explanations are combined to maximize learning. Studies found that both the content AND placement of texts are crucial to comprehension of explanatory graphics. Here’s a review of contiguity in recent graphics used to explain Japan’s nuclear reactors.
SOME GRAPHICS REQUIRED MUCH LONGER VIEWING TIMES.
Consider this page explaining the different components in a nuclear reactor.
WE FOUND SOME GRAPHICS WITH GOOD CONTIGUITY.
A series of four graphics instantly focuses the reader on four units in the nuclear plant. Each unit appears with a text explanation of “damage” and “cooling status.” Labels on unit one (presumably identical to units two and four) identify key components such as the “uranium fuel core.” The implication of this graphic is that readers can scan to compare the damage and cooling status of all four units.
WE ALSO FOUND OPPORTUNITIES FOR IMPROVEMENT.
The damage descriptions for two units begin with the day a blast occurred (Sat or Mon). This suggests time is important, so descriptions for units two and four should also start with the day damage occurred.
The label, sea water injections appears in the “cooling status” text but without a matching label in the graphic. Also, unit two’s text reference to “suppression pool” was labeled in unit one’s graphic. Finally, the “spent fuel pool” label appears in unit one’s graphic but only in the text of unit four. This reduced contiguity risks a kick-out because non-experts would not know the relationship between “uranium fuel core” and “spent fuel pool.”
On 3/17/11, the same page URL was updated (right). Three simplified units appeared on a page with fewer labels than the earlier page. Components such as “spent fuel pool wall” were removed from the graphic but remained in the text. Again, research suggests this graphic/text separation can reduce the level of understanding. Also, the labels of 135, 142 and 151 tons in each unit were unexplained.
HOW TEXT AND GRAPHICS ARE COMBINED IS KEY TO GOOD EXPLANATIONS IN NEWS ONLINE.
Some infographics include many elements that explain multiple operations or processes. That appears to be the case for this set of graphics titled “Japan’s nuclear emergency” (click for a larger view).
The question is where does a non-expert focus after choosing to view the graphic? If there is a process being explained, where does the process start? In terms of contiguity, which elements are described by the text, graphic or both? Ideally, the text and graphic should always overlap, which isn’t the case for several steps in these graphics. Some elements appear only in the text and others only in the graphic. Numbered steps might also help readers understand one typical cycle being explained.
It takes the typical non-expert a few minutes to scan this graphic and read all of the text. If the information presented can be instantly integrated with a reader’s prior knowledge (i.e. how to ride a bike or complete a recipe), a graphic can present more information. Explaining a nuclear reactor, however, requires information that is novel to most readers. Non-experts usually avoid the effort it takes to read all of the descriptions, labels and arrows then piece it all together. That’s because working memory has already been overloaded.
CNN.com’s Graphics Were Among the Best
On 3/16/11, CNN’s home page featured a link to a series of animations and text titled, “Explain it to me: Japan’s nuclear crisis”.
After clicking on the story, the user is presented with a choice of several small screens. At least three link to animated illustrations describing a reactor. Since these were animated graphics, we won’t detail their designs, but it is worthy to note: (1) there was no narration to explain the animation, (2) there were few labels that described specific animation, (3) text accompanied the animations in a separate section of the page, and (4) the design required users to simultaneously connect the animation with text elsewhere on the screen, which violates good contiguity. It takes much more effort to read the text, click the animations and then match textual explanation to each animation.
THE BEST CONTIGUITY WAS IN SIMPLE GRAPHICS.
Simple info graphics that explain a complex process, such as this one by CNN.com, demonstrate contiguity with a limited number of processes to follow, prominent arrows for key movements, and captions of text that describe the illustration. Mayer’s research supports this design for comprehension of scientific information. In another graphic (below), levels of risk during a crisis are quickly explained by “a pyramid” that describes multiple levels and how the levels compare. This information may be novel to non-experts, but the hierarchical pyramid design is not.
Both of these simple infographic help to illustrate the importance of emphasizing only a few key concepts at a time. Unlike more traditional static designs or textbook graphics, digital stories should exploit the web’s nonlinear features to guide users through complex explanations without overwhelming working memory with too much information. When explaining a complex issue such as Japan’s nuclear reactors, it is more effective to present non-experts with a series of simple graphics that each explain a single concept rather than presenting one graphic with multiple concepts or animations, especially if the graphic contains too few or too many labels. It can be tempting to build an info graphic with many detailed explanations. It’s always best to run that graphic by others to see if they actually learn the intended message.