Infographically Disinclined

I don't care for infographics. Their original purpose of visually conveying otherwise complex information has been superseded by their current use as marketing drek with "quirky" illustrations, blocks of prose, and the occasional useful factoid.

The love affair with inforgraphics is confounding to me as a web developer. They are often deployed on the web as a giant image that typically has text too small too read, that cannot be selected, and doesn't include any kind of accessibility affordance. In short, the likelihood I can get one them to display properly in anything other than a desktop web browser is slim.

Doing It Wrong

This example in particular seems to epitomize the poor planning and execution of the typical infographic.

Example of a poorly-done infographic about accessibility in HTML email.

It is intended to convey the challenges of designing and building HTML-formatted emails for users with disabilities. Got that? It's an infographic about accessibility best practices.

How many ways is this doing it wrong, just from an accessibility perspective?

1. All of the text is set as an image. There is no selectable text.
2. At default zoom settings, the text is too small.
3. The text and background colors don't provide enough contrast.
4. The numbered examples require extensive scrolling to see the accompanying text.
5. The blog post of this infographic has useless alt text ("Accessibility-Email-Design-1000px").
6. The title of the blog post is easily as useless (again, "Accessibility-Email-Design-1000px").
7. The blog post itself has no other content. No words, no explanation, no plain-text equivalent.
8. The option to embed the infographic on your site perpetuates the same inaccessible content.

Feel free to suggest more.

I'd also like to qualify that if your infographic is primarily text, you're doing it wrong. All text save for two useless pie charts and a fake screen capture do not make up for the volume of copy stuffed into this image.

Another example of doing it wrong: NASA's Falling UARS Satellite Explained

Doing It Right

Example of an infographic getting it right, from XKCD.

This simple and direct infographic isn't even meant to be an infographic, but it conveys quite a lot of information in very little space with very few words. In fact, this information is conveyed better visually, with no words, than as long blocks of prose.

At a quick glance you can see the height that the ice achieved relative to familiar landmarks and relative to each of three other cities. No long-winded explanations, no pointless pie charts, just familiar context and simple references to learn more. This is data visualization, simply put.

Another example of doing it right: Wind Map

Giving It a Go

I figured that, on a lark, I'd make my own infographic using HTML and CSS and code it so that it's accessible. Then I realized that I don't have a topic I think is best represented by a graphic. Nor am I a data visualization expert. So I cheated and made a Venn diagram (often labeled as an infographic, even though it's a diagram) about infographics:

Cannot copy text.

Large download.

Forgot its roots.

Cannot copy text + Large download = Flash

Large download + Forgot its roots = Animated GIF

Cannot copy text + Forgot its roots = Text as image

Cannot copy text + Large download + Forgot its roots = Infographic

I also made a version on CodePen if you want to hack it for your own use.

Related

• We've Reached Peak Infographic, and We're No Smarter for It
• 70 best infographics on the web (The number keeps changing as they add more and retweet it, also, I disagree with the assertion in the title.)
• Why your Brain Craves Infographics (I'll give them credit for building it in HTML, even if it's still a text-laden scroll-a-thon.)
• WTF Visualizations: Visualizations that make no sense (added September 12, 2013).
• Creating an Accessible Infographic (added September 23, 2013).
• Accessible Infographics (added February 6, 2014).

Update: November 11, 2013

SMBC put together a great infographic this weekend, The Top 6 Reasons This Infographic Is Just Wrong Enough to Sound Convincing. It struck a cord with some at Slate, because it got re-purposed over there with a lot of handy links to other infographical horrors: Why Infographics Are Terrible, in One Terrible Infographic.

Update: January 6, 2014

Derek Featherstone has found an infographic that is made up of text. Yep. Text. Check out "The Health Hazards of Sitting" at the Washington Post and maybe take a cue from it.

Web Accessibility Sorta-Infographic

WebAIM is a non-profit organization within the Center for Persons with Disabilities at Utah State University. It has a reputation (perhaps only in my head?) or providing resources both to the disabled and to organizations enlightened enough to want to support the disabled (or selfish enough to recognize they will be disabled as they age).

WebAIM makes the point that accessibility should be considered early in a web site's development, all the way back at the design phase (something lost on the Adobe Muse development team). WebAIM made a graphic, with accompanying text alternative, for its post Web Accessibility for Designers. It's not easy for me to be critical of an organization that does work for good (apparently not hard for me, either) but its latest infographic is nothing more than a pretty checklist (see the checklist below the graphic, but read the original post for more detail).

Web Accessibility for Designers

• Plan Heading Structure Early
• Consider Reading Order
• Provide Good Contrast
• Use True Text Whenever Possible
• Watch the Use of CAPS
• Use Adequate Font Size
• Remember Line Length
• Make Sure Links are Recognizable
• Design Link Focus Indicators
• Design a "Skip to Main Content" Link
• Ensure Link Text Makes Sense on Its Own
• Use Animation, Video, and Audio Carefully
• Don't Rely on Color Alone
• Design Accessible Form Controls

Social Media Spam Sorta-Infographic

Today's sorta-infographic contains four pie charts, one of which is supposed to show a range, and the other three are ostensibly based on 12 hour clocks. Despite it's clip-art-style graphics, it does provide some pretty interesting factoids and comes with accompanying text to explain the graphics and provide more details. You can read the commentary, and comments, at the original post: Debut Impermium Index Reveals Surprising Trends in Social Web Spam Attacks.

Some of the trends Impermium outlines:

• Online ID signup fraud.
• "Sleeper cells" of social web abuse are a ticking time-bomb.
• Social media exploitation techniques are evolving fast.
• Uggs was the #1 most exploited brand.
• Porn got stripped.
• Mom & Pop are spammers.

Much of this isn't news to many, but it is validating to those of us who wonder if what we are experiencing is in line with current trends. I suggest reading the comments to see some of Impermium's responses to criticism — ok, really just read the comments for the criticism.

Patent Wars Sorta-Infographic

I'm giving in to the cool hip trend of infographics that has been popping up like pinkeye across blogging and tech sites lately. These infographics are typically nothing more than data points (sometimes just narrative) strewn about with mathematically suspect charts or somewhat-related design elements. But they seem to draw traffic, even when there isn't even data to graph (Browsers as Wrestlers "Infographic"). So I am using my lack of shame to power through this long weekend with three posts of three infographics from other sites.

In today's installment I am posting an infographic that has some (imprecise) charts and a couple process maps outlining the current state of patents called Patent Wars: A New Age of Competition. You can find the original image at Business Insurance Quotes site, where it has no accompanying explanation or background.

Related

• Frivolous Patents on the Web
• WebM, H.264 Debate Still Going
• More Frivolous Patents
• A Patent Trolling Primer
• Are Patents Killing HTML5 Video?

Browsers as Wrestlers "Infographic"

Earlier this week CBS News ran the above image on its site in the Tech Talk section (within the topic Wired for Women, which doesn't seem to have anything to do with women) under the article An infographic! If web browsers were wrestlers... As is common nowadays, any illustration with numbers and witty (or not-so-witty) accompanying images is being called an infographic, and this is no exception. I do think the title is a bit tongue-in-cheek and CBS knows that this image isn't exactly fact-based.

The firm CBS hired to develop the graphic ranked each browser by market share, innovation, flexibility and speed — all the important factors. I disagree, however, that these are the important factors. Innovation means different things to different users, for example. As a web developer, I might like new HTML5 support, but my dad might prefer bigger buttons and less clutter. I have a different set of factors that I think are far more important:

1. Performance: How well the browser can render a page without choking, whether by slowing down or introducing image artifacts, or just crashing.
2. Standards Support: With the constant revisions to the still-in-development CSS3 and HTML5 specifications, along with related specs, this is even more important given the moving targets.
3. Ease of Use: This includes accessibility and usability. Can my mom use the browser without having to call me? On top of that, how about a power user, how easy to use is it for that audience?
4. Install Base: This is more than just who has chosen to download it, but should include who is forced to use it by corporate policy, lack of technical knowledge, hardware limitations, or public access.

CBS gave each browser a chance to respond/defend itself, specifically Firefox, Chrome, Internet Explorer, Opera, Rockmelt, and Safari. Opera even took it a step further and wrote up a response on its blog, Speed, Innovation, and Flexibility in the Ring.

I found another image that I think more accurately reflects the state of the battle between browsers (it rightly ignores Rockmelt and portrays Internet Explorer appropriately):

Credit for the above image goes to Galit Weisberg, from The Shoze Blog. Now go to TechCrunch and tell MG Siegler that he stole the image.

Update August 25, 2011

Bit Rebels took an old illustration of browsers as celebrities, posted it, and claimed it as an infographic: If Web Browsers Were Celebrities [Infographic]. It may be time for a web-wide infographic intervention.