Something has been annoying me for months. That something is ‘Infographics’.
As a concept it’s great and pretty much a Ronseal idea: ‘Information presented in a graphical format’. This suits many situations because ‘a picture speaks 1000 words’ and to represent it in text would take, well, 1,000 words.
A great example of what I think of with an Infographic is this; a visualization of the scale of various science fiction spaceships against others:
What is great about this?
Well if this information wasn’t presented graphically then it wouldn’t be anywhere near as comprehensible. The graphic presentation is the information. There is some text on here, but only acting as in-line legends for those people who wouldn’t instantly recognize the ‘Freespace Vasudan Imperium Sobek-Class Corvette’ as being 608 meters long. But the text included doesn’t really tell the story, the image itself does. This information could be presented in pure text as a list, or even a comparison table of spaceships making it accessible and searchable (I’m not sure if anyone has done so yet though – any volunteers?) but showing it as an image is the clearest way to get that information across.
However such infographics are rare. What we are treated to these days are the variety found on eMarketing websites the web-over. And they’re terrible.
So what is my problem with Infographics?
Lets take some examples. A quick Twitter search for ‘Infographic’ brings in a wealth of examples. The first two I came across were these (shown in thumbnail format here as they’re pretty massive, but the full size ones can be found by following the links against the images to the source pages).
What’s wrong with these?
Well, firstly they’re not infographics. They’re illustrated articles saved into a .png. They could quite easily be created as an html webpage (something the web is unsurprisingly pretty good at displaying). But they’re saved as one big long image. Should you choose to follow the links to view the originals you’ll find that the first image is 354KB. The second is an appallingly large 1MB. (I hadn’t even checked the sizes until I started writing this article, I just chose the first two infographics I found on twitter, so I’m not even intentionally cherry-picking large graphics for this post). That means anyone on a mobile has to download that monstrosity on their data connection. This is disgraceful, even more so because such ‘infographics’ are basically created so they can be shared on Twitter / LinkedIn – services with a very high percentage of mobile access.
Secondly, they’re spectacularly inaccessible. Want to read this information with NVDA screenreader? Tough. Got bad eyesight? Tough. Colorblind? Tough. Dyslexic and prefer reading serif font text? Tough. This is your only option – download the huge image and then pan-and-scan it on your phone / laptop hoping the image was saved in enough quality that the text is still readable – which also increases the file size.
Thirdly, they’re not search friendly. Did you see one of these Infographics a month ago and want to see it again? “I remember it had the phrase “don’t be discouraged, it takes time” so I’ll search Google for that”. Nope, no results for this image because the text is embedded in an image so it’s unsearchable.
I’ve been annoyed about these for quite some time, but the one that really got me foaming at the mouth arose on Twitter last month:
I mean come on – there aren’t even any graphics on here!
There are other ways
OK, I understand that presenting information like this makes it easily sharable, and the sheer ubiquity of them suggests that they’re actually liked (but then rotating banner / carousels are pretty commonplace too…) however that doesn’t mean you should take shortcuts when creating them.
You can still present this type of information in an accessible and useful format. Take WCAG guideline 1.1
Guideline 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
(Note the number: 1.1. So you can’t even say you were unaware of it because the WCAG guidelines were too long that you didn’t finish reading it – it’s the first one on the whole list!)
So provide a text version of it. With all the formatting and layout options available to web content producers this isn’t really an excuse. In fact why not create the web version of the content first, and then copy and paste the text and images into Photoshop from there?
Does anyone actually show them correctly?
Well yes. You can find a great example over on Webaim.org:
Not only is the infographic presented visually as shown above, but there is also an HTML version as well as a text version so that the content is available to the widest possible audience. And not only that; the content is actually interesting and useful too. See; it can be done!
(But it’s still not an infographic).