As often happens when we go searching the web for something, I ended up with something else, and learned something different than I started out to learn. I was searching for statistics about social media. I soon discovered how pervasive infographics have become, even compared to six months ago. When done well they are clearly very good at presenting data quickly and coherently. But there are some other things I expect when I go searching for data, and they seem to be as easily overlooked as they could be to include, if only we take the extra couple minutes to consider. I believe I’ve also seen some hints that with infographics it may even be easier to misrepresent and distort data than with such well-known devices as bar graphs, and well understood yet often repeated practices such as moving the origin to influence scale.

UPDATE: Accessible Image Maps (below, under Presentation)

From Wikipedia:
Information graphics or infographics are graphic visual representations of information, data or knowledge intended to present complex information quickly and clearly.^[1][2] They can improve cognition by utilizing graphics to enhance the human visual system’s ability to see patterns and trends.^[3][4] The process of creating infographics can be referred to as data visualization, information design, or information architecture.^[2]

Infographics aren’t new. The article above links their origin to cave paintings. I remember posters in my doctor’s office in the 60s that fit the description. Neither myself nor most of the adults in the waiting room would have been likely to pick up a peer-reviewed journal or seek out the study that uncovered the data being presented. There would likely be some fine print in the corner that indicated who prepared it, and you could track it down if you were interested. In the information age and on the World Wide Web that would be both lazy and unacceptable. For end users with sight, graphic presentation of data on the Web may be even more effective in some cases.
Whether graphs are actually superior to tables—in business decision-making, for example—has been a bone of contention for some time (e.g., Davis, 1986:46-7). I would suggest that on the World Wide Web the ability to select, copy and paste the text in a tabular display would in many cases be more satisfactory to many end users than an attractive display that was perhaps not as portable.

File Format

One “solution,” or perhaps just a happy accident, is that many infographics are posted as PDF files¹. These can support embedded links, can be downloaded and printed maintaining the integrity of the original (and its copyright notices, etc.) and in many cases support copy/paste. PDF files can be made accessible; that becomes a process that must be included in the development cycle. As I’m writing this, it should be noted, only certain WebKit browsers—Chrome, Konqueror (Linux) and Safari  (Mac only)—display PDF files without additional software. Native and open formats like PNG are more universal. In my opinion SVG is the one to watch. It’s a “vector” graphic format, which means it maintains quality at any size. Most newer browsers will display SVG, and the spec contains some very exciting abilities of the “coming soon” variety, such as zooming, timecode and animation, that should greatly enhance our ability to organize and communicate the meaning of data. In either case you should put references, links, and anything else your visitor may want to know that isn’t in the data itself in plain text in a caption underneath. If you’re on WordPress there’s a caption box in its standard image upload form you can use. Regardless of platform this should be relatively easy and may go a long way to advance the usability and usefulness of your data.

Data Obfuscation

Infographics may contain mixtures of several types of data display, including graphs and tables. All of the abilities to distort and misrepresent data, whether intentionally or not, are therefor multiplied. A prime example is this infographic released by the US Republican Party to convince their constituency why they believed the Affordable Care Act was a bad idea. A combination of  illogical colour use, bad layout, poor choice of fonts and font-size, meaningless relative proportions and little white space make the system it claims to represent look overly complex, and to many perhaps, even ugly.

On the site where this lives commenter Nick Dobbing, founder and principal designer at Wovenland Systems in Vancouver points out, “Notice all the bright primary colours in the chart, all the many different shapes, with no sense or order in the way they’re used. No help to anyone sincerely trying to comprehend the diagram… but boy howdy, it sure makes it look more complicated! And that’s all that this diagram is about.” When other designers redid the graphic with a commitment to display the information with integrity  it looks quite different.

Presentation

Many sets of data may form lovely graphics that are nonetheless too large and complex to fit a single browser window. In my experience a popular solution is to make the graphic longer, not wider. This is in keeping with a standard web mantra that vertical scrolling is okay, horizontal scrolling is bad. I’ve read recent reports that scrolling is less a big deal to those who’ve grown up on the mobile web, and it’s easy to find designers who agree. I’m a centrist in this case, I much prefer to get what I came for front and centre, but I’ll adapt and go with the flow—if it’s clearly a flow, not an eddy.

The future

Conclusion

I think I’m getting some ideas about possible best practices for posting infographics. Please use the comment section to critique my suggestions and to offer your own.

1. The most useful format when the graphic contains links, references end users may want to paste into a Google search, or the document is to be printed or downloaded is PDF1. However, currently only WebKit-based browsers: Chrome, Konqueror (Linux) and Safari for Macintosh can display PDF without additional plugins, PDF files can be large, and they require extra care to assure accessibility.
2. Unless I absolutely need my audience to download and print I’d be inclined to post a PNG (all browsers) or SVG (all newest browsers) image and include links, references and citations in a plain text caption underneath.
3. Mayer’s principles of multimedia design, especially concerning coherence and spatial contiguity, apply. Good use of whitespace, a sensible colour scheme are key, but these are indicators of good design in any medium. Illogical colour use, bad layout, poor choice of fonts and font-size, can obscure, distort, and render meaningless any set of data.
4. I’m personally not a fan of long, skinny and scrolling. Unless the data demands otherwise I’d try to keep all the information visible at once. If scrolling is necessary there’s still general agreement that it should be vertical.

Further reading

The United Nations Statistics Division Knowledgebase on Economic Statistics offers these Making Data Meaningful guides that are “…intended as a practical tool to help managers, statisticians and media relations officers in statistical organizations use text, tables, charts, maps and other devices to bring statistics to life for non-statisticians. […] The first guide provides guidelines and examples on the use of effective writing techniques to make data meaningful. The second guide provides guidelines and examples on preparing effective tables, charts and maps, and using other forms of visualizations to make data meaningful. It also offers advice on how to avoid bad or misleading visual presentations. The third guide aims to help producers of statistics find the best way to get their message across and to communicate effectively with the media. It contains suggestions, guidelines and examples.”

PENN State’s Image Maps in HTML explains image maps and how to make them accessible.

§

Notes

1. Note that PDF (in strictly speaking) is not an image format, but a scriptable rich text document format that can contain different types of multimedia content, including vector and bitmap graphics, audio, video, forms, intra- and inter-document hypertext links and a hierarchical contents listing. You should handle accessibility outside the web browser before attaching your PDF.