Infographics: Being and Doing (Part I) - 27 November 2007

by Venkatesh Rajamanickam

Read this article in Chinese (translated by Woodear, proofread by Can Zhao)
Editor: Can Zhao

Introduction

Information graphics reveal the hidden, explain the complex and illuminate the obscure. Constructing visual representation of information is not mere translation of what can be read to what can be seen. It entails filtering the information, establishing relationships, discerning patterns and representing them in a manner that enables a consumer of that information construct meaningful knowledge.

In the attention scarce world of today, information graphics (or infographics) have taken the media and communications industries by storm. From simple instructions on how to assemble your table, to explaining how a conjoined set of twins were surgically separated, to understanding what went wrong in the Challenger Shuttle disaster – designers, educators, journalists, and communicators in general have embraced infographics to help audience understand their intent in a swifter and smarter way.

In this article we will explore what an infographic is, how it evolved, and what it takes to create one.

What is an infographic?

Infographics are traditionally viewed as visual elements such as charts, maps, or diagrams that aid comprehension of a given text-based content. Thus, a newspaper infographic on a breaking news accident is expected to faithfully record, using visuals, what has been explained in the accompanying text.

However, as we shall see in this article, visual representation of information can be more than just the manner in which we are able to record what has been discovered by other means. I hope to establish that they have the potential to become the process by which we can discern new meaning and discover new knowledge.

A classic example of an infographic that not merely illustrates the content but interprets it in a manner that was not possible otherwise, was produced by Dr. John Snow to identify the cause of cholera epidemic in Central London. By plotting (Figure 1) the two available sets of data about number of deaths and their corresponding locations, Snow was able to pinpoint the notorious contaminated pump well.

Figure 1. Location of deaths from cholera in Central London by Dr. John Snow, 1854

In designing infographics, applying a graphic style to the information is not nearly as important as giving a graphic form to the actual content, with a clear understanding of how that content is perceived and processed by an audience. For example, the Periodic Table chart designed by Henry Hubbard is a visual representation of known chemical elements. Since the last edition of the Hubbard chart, 16 new elements have been discovered. These discoveries have confirmed the genius of the Periodic Table as a template that not only summarizes information succinctly, but also provides a system for predicting future outcomes¹.

We will see how infographics have wide ranging applications beyond news dissemination, in several other domains such as, scientific visualization, product design, education, information technology, business communication and entertainment. The ceramic measuring bowls (Figure 2) from the design studio Panepinto is a fine example of product that displays unambiguous information in a vivid manner.

Figure 2. mesü measuring bowls by Studio Panepinto, 2005

Let’s look at some common everyday artifacts around us. Think about the nature of the information they contain and how they get communicated to the user. The clock (Figure 3) for example is probably the most well-known information graphic in the world. Three hands revolving on the clock face at differing speeds reveal information about seconds, minutes, hours and days. It is a clever depiction of four measures using one scale.

Figure 3. Clock as an infographic

Visual Thinking and Representation

Representation (literally, to present again) provides the basis for all communication. We can convey ideas about things that are not materially in our presence only by calling forth an appropriate mental representation. These mental representations are characterized by a degree of abstraction and are stored in categories.

The ease of interpretation varies with the level of abstraction of the representation. As highly concrete, realistic representations are simplified, they become easier to interpret – up to a point, beyond which further abstraction begins to obscure its meaning. We get best results by eliminating non-characteristic details and exaggerating defining features. Representations that successfully manage to communicate are easily visible, simple, immediate, cohesive and general in nature.

Figure 4. Abstraction from Typical to General

Figure 5. Animated Proof of Pythagoras Theorem, Project Mathematics, California Institute of Technology

Recent studies have revealed that we categorize even before we identify things. For example when we look at a chair, a closet, and a table, we process them as a broader class of objects (“furniture”) rather than as individual instances of the class (Figure 6). Furthermore, the mental imagery associated with each of the furniture is likely to have the essential characters of the class (“chairness”) rather than literal characters of a specific instance (“recliner”).

Figure 6. We think in terms of categories – a diagrammatic representation by Alberto Cairo

Thus, we think in terms of categories, and relationships among categories. This capacity to generalize, to form associations, to detect relationships, and to seek comfort in organization is the cornerstone of our communication system. While words and sentences are part of the verbal communication system, images and graphical representations form the visual communication system.

The visual-verbal dichotomy² is well illustrated in the example of Rene Magritte’s The Treachery of Images (Figure 7). When serving as representation of concrete, real-world objects, images make identification easy. When word and image collide, as in this case, the image dominates perception and it is impossible to read the caption (“this is not a pipe”) without first recognizing the pipe.

Figure 7. The Treachery of Images by Rene Magritte

The representational style – a highly realistic rendering of the pipe – is a conscious choice of expression by the painter to underscore the contradiction between word and image. Pictorial representations cross social and linguistic boundaries with ease. However they are also dependant upon the culture in which their meaning is established. Magritte’s painting can be recognized as a pipe by anyone, but only a Francophone will appreciate the full meaning of the work. Communication therefore is always affected by the context in which it occurs.

Figure 8. Bizarro by Don Piraro The Globe and Mail 24/03/97

Infographics, because they use a combination of images, words, and numbers, operate in a hybrid system of both the verbal and the visual. Consequently they offer us the greatest opportunity to increase the effectiveness of our communication.

A Brief History of Infographics

Images predate not only today’s graphics-laden media but also written language itself. Petroglyphs³, which were the earliest forms of non-verbal communication created by prehistoric societies, are found in all continents except Antarctica. They evolved into more advanced pictograms such as the Sumerian cuneiform script and the Egyptian hieroglyphs, which in turn led to linguistic writing that we use today.

Throughout most of this history, image and text have remained inextricably mixed. From ancient holy books (Figure 9) to Renaissance writing (Figure 10), authors strived to integrate visuals and script into a coherent whole. However when technology intervened in the form of moveable type, visual expression become separated from written text because of the different production processes and the skills required to produce them.

Figure 9. Vishnu’s Footprints as Constellation of His Earthly Symbols, Rajasthan, 18th century

Figure 10. Anatomical Studies by Leonardo Da Vinci, 15th century and 16th century

With the advent of desktop publishing in the late eighties, and the emergence of the field of information design in the nineties, the infographic movement has regained its lost momentum. But before we get to its present state, let’s look at five key examples from the past that have left a lasting influence on the way we think about and create infographics today.

1. William Playfair’s The Commercial & Political Atlas: Scottish engineer and political economist William Playfair is credited with inventing the bar chart and the pie chart. With the help of charts, he was able to better communicate the data that was conventionally presented in tables.

In 1786, he published The Commercial and Political Atlas, which contained a series of 43 charts (Figure 11) representing changes in data over time graphics and one bar chart. It has been described as the first major work to contain statistical graphs.

Figure 11. Chart by Playfair, showing the price of the quarter of wheat and the wages of labor by the week, 1786

By abandoning a literal, metaphorical approach that likened data to piles of items, Playfair “broke free of analogies to the physical world and drew graphics as designs-in-themselves,” Edward Tufte⁴ notes. In doing so, he furthered the quest for symbolically representing ideas than simply depicting them.

2. Charles Minard’s Map of Napoleon’s Army’s Russian Campaign: French engineer Charles Joseph Minard in 1861 charted the ill-fated campaign by Napoleon’s army during the Russian Campaign of 1812. This map (Figure 12), along with several dozen others that he published during his lifetime, set the standard for excellence in graphically depicting statistical data such as flows of people and goods in space and time.

Figure 12. Napoleon’s Army’s Russian Campaign by Charles Minard, 1861

Edward Tufte, who considers Minard’s map as the best statistical graphic ever drawn, identifies six separate variables that are captured in the map. First, the line width continuously indicates the size of the army. Second and third, the line shows the latitude and longitude of the army as it moved. Fourth, the direction that the army was traveling, are distinguished by colors, tan for advance and black for retreat. Fifth, the location of the army with respect to certain dates. Finally, the temperature along the path of retreat. Few, if any, maps before or since have been able to coherently and so compellingly weave so many variables into a captivating whole.

3. Otto Neurath’s Isotype: Otto Neurath an Austrian sociologist and political economist conceived a visual communication system called ISOTYPE (International System Of Typographic Picture Education) in Vienna in the late 1920’s. Using a standardized system of symbols, he believed he would be able to convert profound research statistics into ideas, ideas into a picture narrative, and a drama of social interpretation (Figure 13).

Figure 13. Isotype system by Otto Neurath, 1920

Meant to represent quantitative information as easily interpretable icons, Isotype served to visualize social and economic relations especially to ease reception of complex matters for the uneducated receiver. Isotype was developed from a specific socialist concept of adult education beyond reading, one that was generally accessible independent of individual educational backgrounds.

In this picture language, elements or pictograms were reduced to the smallest possible detail of what they represented (e.g. starting with the outline of a “man” and if necessary, with additional attributes to identify the man as “worker”, “coal worker”, “unemployed” etc). In the pictures, perspective was abandoned, details banned and any use of colors standardized. They were then arranged into fact pictures according to a set of rules concerning serialization and consistency in use.

Although Isotype failed due to the difficulties related to the sheer enormity and complexity of iconic representation, it had profound impact on graphic design and iconography. The influence continues to be felt today in such things as road signs, universal symbols and software user interfaces.

4. Henry Beck’s Map of London Underground: The London underground rail system was getting complex in the 1930’s and the map designers were having a hard time fitting all the stations into the standard issue card folder (Figure 14). Un-intimidated by cartographic convention, an out-of-work engineering draughtsman called Henry Beck plotted the underground as if he was sketching an electrical circuit board.

Figure 14. London Underground Map, 1932

He used only vertical, horizontal, or 45 degrees angled colored lines; located the stations according to available space; and evened out the distances between stations. The resulting “map” although geographically inaccurate, provided a coherent overview of a complex system (Figure 15). The map was an instant success and for Londoners it became the organizing image of their city. “The map organized London, rather than London organizing the map”, remarks Tufte.

Figure 15. Redesigned Map by Henry Beck

There was an interesting and unwitting fallout from Beck’s map. The map telescoped scale, and brought the suburbs closer to central London. Suddenly, Watford was no further from Paddington than Liverpool Street. The map lubricated the exodus of London’s inner-city dwellers as nearly half a million people were enticed out to the suburbs, where they found themselves captive customers of their local tube station.

Beck’s map is by far the most successful infographic as it continues to accommodate the ever expanding rail network (Figure 16) and inspires design of countless other route maps world-wide. This success is due to two design strategies that the map employs.

Figure 16. London Underground Today

First, the map places importance on function over precise geography. A commuter is interested in how to go from one station to another. All he needs to know are: which line to take, where to change lines, and what are the preceding stations. The map fulfills this need by simple lines (which ensure an uncluttered layout), color (which differentiates the lines), clear typography (which makes text easy to read), and symbols (which differentiate stations from interchanges).

Second, the map capitalizes on the fact that the system operates underground and therefore the commuters need not be burdened with the confusing topography above ground. The only surface feature to survive was the River Thames. The map makes complex information simple by eliminating all extraneous details.

5. George Rorick’s Weather Maps: At a time when graphics in Newspapers were considered time consuming and distracting, George Rorick⁵, pioneered the use of graphics as an important component of news communication. He envisioned USA Today as a visual Newspaper – “Visuals that help people understand the news. And color, of all things!”

However, he is best known for the weather graphics, which revolutionized the way we read weather information and is probably the most imitated news infographic (Figure 17). Using a combination of color, maps, tables, symbols, and annotation, Rorick transformed a hitherto dull and often hard to understand information into something very interesting and accessible.

Figure 17. Weather Map by George Rorick, USA Today, 1982

Rorick’s greater legacy though was his efforts in gaining a widespread acceptance for visual journalism in a profession dominated by text, establishing a business case for infographics, and formalizing a production process within the newsroom setup that churn out consistent quality infographics on a continuous basis under tight deadlines.

¹ For a scathing criticism of the indiscriminate appropriation of scientific imagery, read Wonders Revealed: Design and Faux Science by Helfand and Drenttel.

² For a more detailed discussion of the topic, read chapter ‘Image and Representation’ from the book Designing Visual Interfaces by Mullet and Sano.

³ Petroglyphs: The word comes from the Greek words petros meaning “stone” and glyphein meaning “to carve”.

⁴ See Edward Tufte’s The Visual Display of Quantitative Information (pp.40).

⁵ The vision of George Rorick

To be continued on Part II

Possible Related Articles:

• Toward a Model of Innovation
• Infographics: Being and Doing (Part II)
• Design for the Dream Economy
• Getting from Research to Personas: Harnessing the Power of Data
• Simplicity: The Distribution of Complexity
• Starting a Career in User Experience
• User Experience Group Development and Integration
• Tag Cloud in Chinese websites
• Early and often: How to avoid the design revision death spiral