Summary: Information graphics translate data into a visual medium that is easy to understand and engaging. Integrated visuals with text and pictures that strengthen each other are the goal, but hard to achieve.
As the ways we collect data and the tools we use to analyze it evolve, our world is becoming incredibly data-rich. One of the most exciting challenges designers face in an increasingly quantitative world is how to translate data into a medium that is easily understood by a wide audience. Information graphics (better known as infographics) are a powerful storytelling tool that allows users to comprehend, analyze, and explore data. The hope of social-media sharing has made infographics popular on websites that emphasize content marketing.
The distinction between data visualizations and information graphics is subtle, but important. Infographics often contain data visualizations, but a data visualization on its own is not an infographic.
Definition: A data visualization is a graphical representation of a set of data. Charts, graphs and maps are the most commonly used types of data visualization.
In human–computer interaction, the field of information visualization studies interactive data representation. Unlike data visualization, which is generally static, an information visualization allows users to manipulate the visualization in order to get to different aspects of the data.
Information and data visualizations can reveal patterns that might have been difficult to discern from numbers alone. However, for certain types of audiences or in certain contexts, a visualization may be insufficient for communicating your message. In such situations, information graphics can get your point across more clearly.
Definition: An infographic is a multimedia graphic aiming to present complex information and data in a way that is easy to understand. Infographics often include data or (more rarely) information visualizations, but must also provide context in the form of illustrations, facts, quotes, and captions. Thus, an infographic can stand on its own as a separate piece of content (though it can also be shown in the context of an article with additional text).
In This Article:
- Design Guidelines for Information Graphics
- Common Mistakes
- Conclusion
- References
Design Guidelines for Information Graphics
Every item on an infographic — from charts to the imagery that illustrates them — should convey meaningful information. Edward Tufte created the concept of the data–ink ratio in his 1983 book The Visual Display of Quantitative Information to sum up the data density in a visualization. The ratio compares the valuable information (the data) to the full graphic (the total “ink”). Ideally, data visualizations have a high data–ink ratio: all or most of the visual elements in the graphic convey meaningful information about the dataset.
Tufte advocates for a minimalistic presentation of charts that directs viewers to the information presented rather than to the designer’s artistic additions. His approach removes all decoration — a chart with a perfect data–ink ratio not only omits illustrations but also removes items such as background images, decorations of chart items, and even gridlines.
Infographics are a hybrid medium, however, and there is room for creative license here. Elements of visual interest such as illustrations, photos, and icons are acceptable and even expected in the medium. Using a visual theme may ground your piece in a metaphor that makes abstract concepts easy to understand. Elements that do not distract from the charts and add meaning to the numbers can be helpful additions. They can also increase the shareability of the infographic and help 3rd-party users to understand the message when they encounter a reposted visual on, say, Twitter or Instagram without the additional context provided by the original site.
Informational Honesty
The most important thing to remember when designing an information graphic is to present data clearly and truthfully. Scale your charts in a way that shows the differences in the data and communicates the range of values accurately. If you include summary statistics in your graphic, clearly indicate the information source you used to calculate those figures.
Statisticians and information designers have debated the details of scaling in charts for decades. One topic of particular contention is the starting point of the y-axis. Darrell Huff cautioned readers to beware of any chart that does not begin the y-axis with 0 in his 1954 book How to Lie with Statistics. Some experts disagree; Edward Tufte argues that this rule is not necessary as long as the chart clearly shows that the scale has been truncated. Choose a scale for your charts that strikes a balance between demonstrating trends clearly and conveying the scale of the original dataset. The y-axis of a data visualization should show a baseline state of the data set. In many cases, 0 is a natural starting point, but it is not necessary to force a visualization to begin at 0 when another logical starting point exists.
For example, it is a commonly accepted practice in the financial industry to truncate the y-axis of a stock chart. Users generally care about details of the stock’s price and how it has changed over time. The chart does not need to begin at 0 in order to establish a meaningful baseline.
However, truncating the y-axis would not be acceptable if the main user task were to compare different values on the graph. In the stock chart above, if users were interested in the relative values of the stock for October 2017 vs. Jun 2018, they might erroneously infer that the stock price doubled based on the position of the data points on the graph.
Similarly, the chart below lends itself to misinterpretation because of how the y-axis is truncated. The chart was published to show how Americans felt about a controversial court decision. It visually implies that there is a stark difference of opinion between Democrats and Republicans. In fact, the absolute numbers show that 62% of Democrats and 54% of Republicans agreed with the court’s decision.
Minimalism and Infographic Design
Although the rules of design are fairly relaxed in the world of infographics, a minimalistic approach is helpful. Minimalism is a design philosophy that reduces the complexity of the presentation of content.
Choose fonts that are readable rather than decorative. Selecting a font that scales well is key. The medium demands many different text sizes: titles, headings, quotes, statistics, and captions should be sized differently to establish a clear hierarchy within the graphic. Script fonts and overly complex serif fonts should be avoided as they often distract from the many points of visual information that the eye takes in when viewing an infographic.
Choose a limited color palette. A few distinct colors are more visually inviting and focus attention better than many colors. Color can be an excellent way to quickly communicate differences on a chart or to highlight various sections of an infographic, but too many colors are overwhelming.
Remember that, although color is a powerful communication tool, it should never be used as the only visual distinction. Colorblind and visually impaired users will struggle to understand infographics that communicate important points using color alone. A minimal palette requires designers to be conscious of how they use color and what other visual tools they can use to express information.
Present simple illustrations. Choosing simple and clean illustrations allows the focus of the infographic to remain fixed on relevant data. These illustrations should support the overall message of the piece but do not necessarily need to directly interpret the data. The infographic above discusses how companies can recruit remote developers.
The graphical elements in this infographic are modern and minimalistic. The lines are clean and the graphics do not contain any complex textures. All follow the same aesthetic conventions. Maintaining a simple but consistent style for all graphical elements makes an infographic feel like a unified and visually pleasing whole.
Interactivity
Interactive infographics include data or information visualizations that users can directly manipulate. This type of infographic provides context and narrative, while allowing users to control what aspect of the data they see. Interactive infographics have become popular in recent years. Major news outlets frequently feature interactive infographics to allow their readers to explore the numbers behind the stories they publish.
Consider the needs of the piece you are creating before adding interactive elements. What aspects of the data will users be interested in? If you simply want to make a point, then a static visualization supporting it may be enough. If you’d like your users to manipulate and get a deep understanding of the different aspects of your dataset, an interactive infographic may be appropriate.
Sharing and Social Media
Infographics are often shared on social media platforms such as Twitter, Facebook, and LinkedIn. These channels can be helpful in driving traffic to your content. However, graphics shared on social media are often reposted without a link to the original source. Consider adding a watermark or logo to any infographics that you create. This addition will help users who come across an unattributed version of your graphic to find the original piece.
Common Mistakes
- Distracting visual elements. The graphical elements of an infographic should add interest and enhance the infographic’s main point. Relying too heavily on a theme or a visual pun takes viewers’ attention away from the message you are trying to send.
- Distorted scale. This common mistake undermines a visualization’s informational honesty, as we discussed previously. When the scale of a chart does not accurately represent differences between data points then it gives an incorrect impression of the original data. Charts within an infographic that have been cropped, stretched or otherwise distorted give a false impression of the available data.
- Copy as an afterthought. Infographics are a primarily visual medium, but what viewers read is still important. Many infographics designers add text in at the very end of the design process and use unclear copy that detracts from the overall graphic. Moreover, some infographics neglect to optimize text for the format. Long, unstructured paragraphs create an overload of information. Concise writing is harder, but has more impact.
- Unclear hierarchy. A visual hierarchy guides your viewers through the variety of information presented in an infographic. When items are sized arbitrarily and sequenced without apparent reason, the message of the infographic becomes difficult to discern.
A Note on Common Mistakes
Designing data visualizations and infographics is not an exact science. The common mistakes discussed here are so ubiquitous in part because the discipline is evolving so rapidly. Data visualizations have been printed for centuries, but the recent evolution of the internet has enabled vast changes in the way we consume the material. Interactive infographics were slow and difficult to use when they were rendered in Flash ten years ago but highly responsive graphics are possible in modern browsers. Best practices will change with technological improvements and visual trends will shift, but the basic principles of accessible information design will remain the same.
When you create an infographic, strive for clarity and accessibility rather than absolute perfection. Iterate the graphics that you generate in order to discover how to better present your content in a way that is easily understood by your intended audience.
Conclusion
Infographics are an excellent way to communicate complex concepts in an accessible and even entertaining manner. This hybrid medium combines data visualizations with graphics and text to make the information easy to understand. Many established heuristics of user-interface design can be applied to data visualizations and infographics in order to create educational and beautiful expressions of data.
References
Huff, D. (1954). How to Lie with Statistics. New York, NY: W. W. Norton & Company.
Shneiderman, B. (1996). The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, Proceedings 1996 IEEE Symposium on Visual Languages.
Tufte, E. (1983). The Visual Display of Quantitative Information. Chesire, CT: Graphics Press.
