Categories

That’s not an infographic

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:

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!

8 Comments

Jon Walmsley 3 years ago

The first example in this article (Sci-Fi spaceships) is of a good Infographic. The one you linked to – while not a bad one – is really just a chart. There is a lot more you can do with data visualisation.

Billy Bob 3 years ago

Your first example it is very graphic heavy, which means only certain lines of text and backgrounds will be generated through code. You’d still have to download all those separate png’s/jpg’s as well as the HTML and CSS.

All in all it will reduce a 1Mb file by about 40% at best. Is it really worth the time and money getting someone to build a HTML version every time a company commissions an info-graphic?

Where does is stop there – do all movie posters have to have a HTML backup?

Jon Walmsley 3 years ago

The first example (with the space ships) does not need to be changed. The graphic itself is the information. It is the other so called ‘infographics’ that are the problem.

By definition an Infographic should be Information provided in Graphical form. The current trend is just to create a big JPG with text in it. That is not graphical information, it is an illustrated article saved as a single image.

Do movie posters need to have an HTML version? No, they are illustrations. Just a photographs do not need HTML versions of them. Movie posters have text that can be provided as HTML text if necessary (if an article is discussing the cast list and expects people to see that list purely from the poster then I would suggest transcribing the cast and crew list from the poster into the article itself as well)

Is it worth the time and money to get someone to build an HTML version of every infographic? ABSOLUTELY, YES. Why on earth would you choose to ignore 20% of your potential target audience?

Jon Walmsley 3 years ago

Approximately 20% of people have some form of impairment. That could be visual, auditory, dyslexia, colour blindness… So fine, if you want to exclude these people from your services then that’s up to you. But I suggest reading this Brad Frost article before you say that it isn’t worth considering.

The web is a great enabler – HTML is the language of the internet and it allows people of all abilities to acquire new information and knowledge. Why start going backwards and exclude, nay discriminate against people who don’t have perfect vision or have cognitive impairments? Because you’re too cheap and unprofessional to build things properly in the first place? You wouldn’t build a car with no windscreen just because you’d have to pay someone £300 p/d to fit them. No, you build it properly so that you can provide a decent product and experience to the widest range of people.

Billy Bob 3 years ago

A car has to have a windscreen by law, so that’s a strange analogy.

An info-graphic is essentially what it says in the name… a ‘graphic’. You can’t go around demanding all graphics that contain some text be converted to HTML. Should meme’s be converted to HTML too? Where do you draw the line?

I’m well aware of accessibility standards (I write code to meet WCAG 2.0 standards) but suggesting every informative graphic has to have a HTML backup is slightly absurd and almost impossible in practice.

Perhaps you should learn the practicalities of code and graphic design before making accusations and demands

Jon Walmsley 3 years ago

Not discriminating against persons of differing abilities is also covered by the law. I also think you need to re-read my article. I have not said that all graphics need an HTML alternative (although they obviously need alt= text, but that is a different matter). I have stated that these so-called ‘infographics’ that are nothing more than an illustrated article saved as an image should really be a full HTML article instead (or in addition to) in order for them to be accessible and usable. Having a textual alternative to a graphic is an absolutely fundamental element of the web and of WCAG 2.0 guidelines. In fact it is guideline 1.1 in WCAG 2.0. You cannot even pass accessibility standards at single A level without doing so. There is no way you can write to meet WCAG 2.0 standards but think it is absurd to have HTML versions of informative graphics. If the graphics are purely decorative then that is a different matter. But infographics by their very definition are Informative, so yes, you should have HTML versions of them.

Thank you, your comment successfully submitted

your comment has been submited, it might take a while to be moderated.