Infographic Design Rules

Late­ly, I’ve come across quite a few arti­cles about info­graph­ic design — deter­min­ing whether or not it is overused and dis­cussing prop­er usage. Here are two arti­cles and my favorite take­aways:

The Do’s And Don’ts Of Info­graph­ic Design from Smash­ing Mag­a­zine.

• Show, Don’t Tell — A rule of cin­e­ma is to show, don’t tell. The same holds true for info­graph­ic design. The foun­da­tion of any good info­graph­ic is data viz.
• If the Client Want­ed an Excel Chart, They Wouldn’t Need You — It might sound harsh, but it’s true. If info­graph­ics were as sim­ple as lay­ing out a bunch of stan­dard charts and graphs on a page, then clients would not need to search out great design­ers.
• Typog­ra­phy Should Not Be a Crutch — Typog­ra­phy can make or break a design, but it should not be the solu­tion to a data viz prob­lem.
• Tell a Sto­ry — All good sto­ries have a begin­ning, mid­dle and end. Info­graph­ics deserve the same treat­ment. At the begin­ning of the info­graph­ic, intro­duce the prob­lem or the­sis. From there, back it up with data. Final­ly, end the info­graph­ic with a con­clu­sion.
• Visu­al­ize the Hook — Every good info­graph­ic has a hook or pri­ma­ry take­away that makes the view­er say “A-ha!” As a design­er, you should make this hook the focal point of the design if at all pos­si­ble. Plac­ing the hook at either the cen­ter or very end of the info­graph­ic is usu­al­ly best, so that it grabs more atten­tion.

Quit it With All the Info­graph­ics Already from HOW Inter­ac­tive Design.

• Most info­graph­ics aren’t acces­si­ble for the visu­al­ly impaired. The point is to con­vey infor­ma­tion suc­cinct­ly, right? That info is lost on peo­ple who use screen read­ers if all the text is with­in an image or if your info­graph­ic is Flash-based. If your info­graph­ic is read­able by low-vision assis­tance soft­ware, does the sequence of the con­tent makes sense to some­one who can’t see the graph­ic?
• Most info­graph­ics aren’t search-engine opti­mized. Like­wise, search engines won’t know the con­tent of your flashy chart if it’s all just an image. Mal­colm Coles sug­gests break­ing down info­graph­ics into HTML and using text or ALT tags for both SEO and acces­si­bil­i­ty.
• Those super-long info­graph­ics are prac­ti­cal­ly use­less on a mobile device. I don’t know who start­ed that trend of mak­ing info­graph­ics approx­i­mate­ly 400px wide by 45000px high, but it isn’t a great user expe­ri­ence on an iPhone, and it must stop.
• Of all online info­graph­ics, 89% con­tain sta­tis­tics of dubi­ous verac­i­ty. This is a joke. But with the speed that info­graph­ics are appear­ing online—often about an unquan­tifi­able sub­ject mat­ter and/or pro­duced by an enti­ty try­ing to make a point—the era of reli­able, vet­ted info­graph­ics seems to be over. Peo­ple might not care if the infor­ma­tion in a graph­ic is cor­rect, but you should.
• Many info­graph­ics are just plain bad. I don’t want to name names. But some­times I just don’t know what peo­ple were thinking—some sit­u­a­tions just don’t call for info­graph­ics. (How­ev­er info­graph­ics that are inten­tion­al­ly mean­ing­less can be quite awe­some.)
• IF YOU MUST DO IT, DO IT WELL. It’s cer­tain­ly pos­si­ble to make info­graph­ics that are use­ful, beau­ti­ful and acces­si­ble, espe­cial­ly with HTML5.

Here is where you can find some GOOD info­graph­ics.

After ini­tial­ly writ­ing this post, I also came across this great video on the sub­ject:

The Val­ue of Data Visu­al­iza­tion from Col­umn Five on Vimeo.