Current Issue
Infographics: Being and Doing (Part II) - 7 December 2007
by Venkatesh Rajamanickam
Read this article in Chinese (translated by Woodear, proofread by Can Zhao)
Editor: Can Zhao
Infographic design: a framework
There are 3 major challenges in designing a successful infographic.
1. To clearly understand what type of information it is trying to communicate – whether spatial, chronological, quantitative or, as is usually the case, a combination of all three.
2. To conceive a suitable representation for that information as a cohesive whole – a whole that is more than the sum of its constituent parts such as, charts, diagrams, maps, timelines etc.
3. To choose an appropriate medium for presentation – static (paper or computer screen), motion (animation or video), or interactive (increasingly web or other electronic device-based, but could be something as simple as a paper-based pregnancy wheel).
Despite the difficulty in creating a design framework, it would be useful to have one, in order to understand the overall picture of the infographic design process. The following diagram (Table 1) depicts one such a framework:
Table 1. Infographic Design Framework
Infographic design: nine strategies
In the last section, we understood where and how an infographic fits into the overall scheme of the information design process. In this section, let’s glean some design strategies by analyzing some successful infographics.
1. ORGANIZE: Organizing the available information and coming up with a plan for presenting it is the first and probably the most difficult stage in designing any infographic. The train accident infographic (Figure 18) explains the collision of two trains triggered by an automobile veering off a nearby highway.
Figure 18. Anatomy of an accident, El Pais
The key to reconstructing an event like this is to establish the role of geography, the cause, the chronological sequence, and the facts of the objects involved. All of these pieces of information have to be organized effectively with right amount of detail and emphasis to make sure the viewer experiences the incident as an authentic whole.
2. MAKE VISIBLE: It is the essential quality for an infographic. The fishermen of Marshall Islands have for centuries used maps (Figure 19) made using shells tied together by bamboo sticks, to visually represent the distance between the various islands, their locations with respect to each other, and the direction of currents.
Figure 19. Shell Map, Marshall Islands
3. ESTABLISH CONTEXT: Going back to the train accident example, establishing context begins with locating the geography of the accident site so that the viewer get the bearings on the topography of the event. The designers have chosen the top view because the key components are the highway and the tracks below. Notice the view is closer when the first collision happens and gets wider during the second collision. Through this the difference in scale of collision is established. The viewer is able to experience the fact that a small vehicle has triggered a catastrophic collision.
4. SIMPLIFY: Representations that are simple and direct are easier to interpret. We get easily distracted by extraneous properties of representation. The NYT graphics on the spread of the SARS virus (Figure 20) exemplifies the principle of simplicity – most notably in its visual treatment of the map and use of colors.
Figure 20. How SARS spread, The New York Times
The graphic talks about a spread from country to country. Hence a coarse representation is good enough to convey that message. Colors are used to indicate the primary, secondary and tertiary spreaders of the virus and it is critical piece of information. Hence you see only 3 colors in the entire graphic.
5. ADD REDUNDANCY: Redundancy is a concept which has emerged from the information theory to communication. Redundancy is the opposite of information. Something that is redundant adds little, if any, information to a message. Yet much of the information we deal with in everyday life contains a good deal of redundancy.
The English language, for example, can be mostly understood if you remove the vowels. Cnsdr ths sntnc, fr xmpl. One of the purposes of adding redundancy to a stream of information is to make it easier for us to digest information. Although the sentence without vowels can be read, it is harder to read. On a noisy transmission channel, the redundancy enables the reader to correct errors that may have been introduced into the stream of information. Noise is any factor in the process that works against the predictability of the outcome of the communication process. For example, traffic lights communicate through color. They also use position to reinforce the message.
While adding redundancy offsets noise, too much redundancy is inefficient. Using repetition, reiteration and restatement, we run the risk of burdening or boring the audience. So, maintaining an optimal balance between predictability and uncertainty is the key to success in communication.
6. SHOW CAUSE AND EFFECT: When we try to comprehend something, we are looking for information to understand the underlying mechanisms. Reasoning is about examining causality.
Earlier we saw an example which shows cause and effect in of Dr. John Snow’s medical detective work in which he identified the cause of Cholera epidemic in London. Similarly the decision diagram (Figure 21), lucidly shows the cause and effect by taking the viewer through a decision diagram about whether a particular is suitable for them or not.
Figure 21. Decision Diagram. Are Reward Cards for you?
7. COMPARE AND CONTRAST: Together with what is the cause, and what is the effect, the third important question that needs to be answered is, compared to what?
In the NYT graphic on the spread of SARS, comparison comes across through the use color-coding, which differentiates primary, secondary and tertiary infections. Dots are used to indicate the number of infected people. This helps us to make a quick visual comparison of the volumes infected people across different countries.
8. CREATE MULTIPLE DIMENSIONS: We saw earlier the graphic by Minard in which he manages to portray six dimensions – the size of the army, latitude, longitude, direction the army is moving, temperature, and date. On a single sheet of paper with no text, he eloquently captures Napoleon’s failed march to take Russia.
The NYT SARS graphic too is multi-dimensional. The graphic informs us about space (map of South East Asia), volume (numbers of infected), and movement of infected people (arrows to indicate the direction of spread).
9. INTEGRATE: It is important to tell a “coherent story”. This means avoiding references for figures and examples, which are physically removed from the flow of the text (Figure 22). Also information for comparison should be put side by side. That is, within the eye span, not stacked in time on subsequent pages.
Figure 22. Gray’s Anatomy. Words well integrated with the image.
This article tries to present a coherent story by placing visual and references within the eye span and not at the end as an appendix.
Books
Harmon, Katherine (2003). You Are Here. Princeton Architectural Press.
Harris, Robert L. (2000). Information Graphics: A Comprehensive Illustrated Reference. Oxford University Press.
Helfand, Jessica (2002). Reinventing the Wheel. Princeton Architectural Press.
Holmes, Nigel (1991). Designer’s Guide to Creating Charts and Diagrams. Watson-Guptill.
Holmes, Nigel (2005). Wordless Diagrams. Bloomsbury.
Institute for Information Design Japan (2005). Information Design Source Book. Graphics-Sha.
Jacobson, Robert (2000). Information Design. The MIT Press.
Malofeij Awards – Yearly Books.
McCloud, Scott (1994). Understanding Comics. Harper.
Mijksenaar, Paul and Westendorp, Piet. Open Here: The Art of Instructional Design.
Mijksenaar, Paul (1997). Visual Function: An Introduction to Information Design. Princeton Architectural Press.
Myer, Eric. K. (1997). Designing Infographics. Hayden Books.
Tufte, Edward (1990). Envisioning Information. Graphics Press.
Tufte, Edward (1997). Visual Explanations: Images and Quantities, Evidence and Narrative. Graphics Press.
Tufte, Edward (2001). The Visual Display of Quantitative Information. Graphics Press.
Websites
Alberto Cairo – A lot of useful resources from one of the leading practitioners
Design of Signage – Theory, Application and Resources
Gallery of Data Visualization – Examples of good and bad infographics
InfoDesign – A well maintained collections of annotated links related to infographics
Interactive Narratives – A database of links to interactive narratives from the web
John Grimwade – Online portfolio of one of the leading infographic designers
Nixlog – An exhaustive collection of infographics available online
New York Times – Arguably the best online interactive features in the business
Society of News Designers – News design resources and awards gallery
Xplane – The visual thinking weblog
6 Read Interactive Visual Explainers – A Simple Classification for an elaboration of the types of Interactives.
About the author
Mr Venkatesh Rajamanickam is a Section Head at the School of Design, Singapore Polytechnic.
The article was originally prepared as a handout to his October 2005 seminars on Infographic Design to the Visual Communications students at the National Institute of Design, Ahmedabad, and the Industrial Design Centre, Indian Institute of Technology, Bombay.
“Images may be too small, but a discerning reader should be able to find better quality images from the references. Some sections may appear brief and abrupt as I have not put in all the examples and discussions that I use in the seminar. I intend to capture some interesting digressions, discussions and exercises that emerged during the seminar. Additionally, I invite you to tell me what more I can add or how better I can improve this. Send your feedback to venkatra@gmail.com.”
Comments made
Possible Related Articles:
Latest Comments