When is an infographic a duck?

Yes­ter­day, Jeff Bul­las posted an arti­cle about Twit­ter stats. I have a great deal of respect for Bullas’s writ­ing, and he’s an undis­puted leader in the Social Media world, espe­cially in regard to build­ing share­able con­tent. But the info­graphic attached to the arti­cle was—how do I put this politely?—bad.

Good data visu­al­iza­tion makes sense of data, mak­ing the viewer think about the sub­stance of it rather than any­thing else. It should be trans­par­ent and intu­itive, like any good UX, with the form com­ing out of the func­tion. In one of Edward Tufte’s wit­tier moments, he says that “when the over­all design [of a data rep­re­sen­ta­tion] pur­veys Graph­i­cal Style rather than quan­ti­ta­tive infor­ma­tion, then that graphic may be called a duck in honor of the duck-form store, “Big Duck.”

In The dif­fer­ence between data visu­al­iza­tion and info­graph­ics, I dis­cuss how my response to Bullas’s info­graphic made me think, and actu­ally fig­ure out why it made me angry. But what makes it “bad”? I mean, how can you tell a good info­graphic from a “duck”?

Let’s take a look:

A piece of bad data viz

There are a lot of fish in the sea, and a lot of con­fu­sion in this infographic

The design elements

To start off with, WHAT IS WITH THE NAUTICAL THEME? It makes no sense. Twitter’s logo color is blue, which is the clos­est thing to an oceanic link that I can see. (?)

It. Makes. No. Sense.

There are a lot of fish in the sea” as the sec­tion title for Twitter’s over­all num­bers? “Your Canoe” to describe trend­ing tools?!? Canoes, sea, fish­ing, ocean, and sailors—it’s cutesy kitsch, and it actively detracts from any under­stand­ing of the data. Appar­ently in the “Good Ways to Drown” sec­tion, some­one ran out of pithy nau­ti­cal terms, because the designer abruptly and jar­ringly changes to “Don’t sell at the wed­ding” and “Wink­ing in the dark.” Ugh.

Also, the dec­o­ra­tive font they used is ungainly and not very easy to read. Cou­pled with the busy (BUSY!) graph­i­cal ele­ments like the diag­o­nal pin­stripes, the mas­sive navy ban­ners, the cen­tered high­lights in every­thing hor­i­zon­tal, it’s a big blue mess. There are places where things aren’t cap­i­tal­ized that should be, text is cramped and badly kerned, and ref­er­ence data is given sim­i­lar weight and place­ment as descrip­tions. It’s just… not good.

This info­graphic looks like a duck.

The data elements

Where to begin? Prob­a­bly the worst thing about this graphic is that it doesn’t have any real pur­pose: what under­stand­ing are the “num­bers behind Twit­ter” sup­posed to give me? Is the tar­get audi­ence a mar­keter who needs to know why Twit­ter is impor­tant or how to use it? If they don’t already know, they should be fired ASAP. Is it sup­posed to help a new­bie learn the ropes about build­ing a per­sonal fol­low­ing? Then, why would they care about the most pop­u­lar re-tweets, who has the most fol­low­ers? Or, is this sup­posed to sim­ply be a state-of-the-Twitter address? If that’s the case, the help­ful tips about poten­tial reach are unnec­es­sary and distracting.

And speak­ing of poten­tial reach: they define it as

the num­ber of fol­low­ers of peo­ple who used the fol­low­ing hashtags

Um… what? Who came up with that? How can it pos­si­bly be con­sid­ered a poten­tial reach for Jane User? Because it’s not—just because some­one (famous or not) has used a hash­tag doesn’t mean that even one of their users give a damn about you using it. Here’s an exam­ple: Katy Perry recently tweeted: “#Throw­back­thurs­day in my Sailor Moon dress” with a link to a pic­ture. Do any of her fol­low­ers care about your old mid­dle school pic­ture? No. They don’t. Com­i­cally, Perry’s fol­low­ers alone are more than the “poten­tial reach” of the #tbt hash­tags in this graphic (the data was col­lected in Sep­tem­ber, Perry’s tweet was 16 Decem­ber). If only it were so easy.

Sure enough, this info­graphic walks like a duck.

Graph­i­cal data representation

The painful “Sailor’s Code” sec­tion of the graphic:

more bad data viz

I always asso­ciate Sailors with impor­tant social issues…

I’ll leave aside the ques­tion of why “social change” hash­tags are included here, because I’ve given up try­ing to make sense of what data they’re giv­ing me and why I should care about it.

One of the first rules of mak­ing data under­stand­able visu­ally is the prin­ci­ple of rel­a­tive size. Namely, the size of some­thing rel­a­tive to the other items in the same graphic need to be the same as the rela­tion in the data, or else you give the viewer a false (in)equivalency. You can see that Syria is about half as big as the heart that rep­re­sents #Love here, but 240 is 2/3 of 360. The font sizes used also con­tribute to the over­all skew­ing of one’s per­cep­tion: #Syria and #Love are pretty much equally sized, but the size of other three appear to be dic­tated by what looks good in the avail­able space, not by what makes sense of the data.

And again: hash­tags do NOT equal poten­tial reach. Does any­one really think that any of the 360 mil­lion peo­ple who used #love in a tweet that day is fol­low­ing that hash­tag? Of course they’re not—most are com­ment­ing on the state of their life, and how won­der­ful their mom/partner/kid/favorite topic is. Even the other terms on this list, which are far more likely to be searched for, still have way more peo­ple talk­ing than they do listening.

Quack-quack (this is me, say­ing that this info­graphic sounds like a duck. Get it?)

So, what’s the point?

Yeah, that’s what I’d like to know… But seri­ously, there doesn’t appear to be a point to this graphic. From what I can tell it is sim­ply a pic­ture that was designed to go on a post, to make it more sharable. It regur­gi­tates some data in a way that’s the­matic and kitschy, and doesn’t make the reader any bet­ter off than when they started.

So, a duck:

The Big Duck

If it looks like this, and it walks like this, and it quacks like this…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>