Reworking a New York Times Interactive Infographic

I’m currently enrolled in a massive online class taught by graphics and data visualization guru Alberto Cairo and hosted by the Knight Center for Journalism in the Americas.

As a former newsroom resident, I’ve long appreciated the power of infographic design, but I’ve never taken the opportunity to really study what makes an infographic great or not-so-great.

It’s been a fairly eye-opening course so far and we’re only into Week 2. Take this week, for instance, when we critiqued an interactive graphic by the New York Times. My reverence for the NYT runs deep so critiquing their work feels a bit sacrilegious, but I do what I’m told!

Here’s the graphic we were asked to rethink (click the image to get full functionality). The graphic shows readers how often certain words were spoken by each party during the Democratic and Republican National Conventions. Underneath the graphic, it also displays the parts of the transcripts where those words were mentioned.

I had a few minor nits about the graphic, but my major nit was the separation of data from context. Looking through the transcripts, it became clear that references to those words were not equal in value. You would only know that if you sifted through the transcripts which were easy to miss if you didn’t scroll down the page.

Here is my static re-imagining of the interactive graphic (click for full size)

Here, I make the transcript the primary visual component while placing the navigation within the bar chart. Doing this and placing the two components side-by-side essentially forces readers to interact with these two levels of data simultaneously.

How it would work interactively:

• I invision the user clicking the “previous” and “next” arrows underneath the quotes to reveal other quotes. Perhaps providing a link to all instances of the word within the transcript that could display underneath and jump the user to that part of the page.
• A short, unintrusive, but helpful NYT note about why the findings are significant displays under the quotes.
• Clicking on the words in the bar graph would change which word or phrase is displayed.
• The NYT editors could decide the 8-10 most editorially significant words or phrases to pre-populate the bar chart then allow users to either add to or replace with words of their choosing.
• Clicking on “see the complete list of words” would lengthen the bar chart significantly to compare all the words in this format. An option to again truncate the list would appear.
• Some usability improvements could definitely be made here to make the calls to action crystal clear.

It’s worth mentioning that I sketched this out before taking to the computer, a process we were encouraged to do so that we didn’t trap ourselves into a specific design, a trap I set for myself all too often when I’m designing for the web. My drawing skills are laughably awful, but it definitely helped with the process and made connections in my brain that I would have struggled to make had I started in Illustrator.