Data driven storytelling
My favorite examples of interactive data journalism and how they inspire me as a designer
At a recent offsite for our design team, a few of us shared with our team some examples of products, designers, websites and applications that inspire us as designers. Topics were as varied as Japanese architecture, fashion designers and the design systems of Mexico city’s metro system. We all came away from the offsite with lots of food for thought and a newfound appreciation for many diverse subjects!
I talked about some examples of interactive journalism pieces and how they have inspired me as a designer. In the last few years, data driven interactive journalism has really taken off. NYTimes, WSJ graphics, Periscopic, and countless independent creative technologists have done a great job at taking complex data, presenting it in an engaging way and driving clarity.
I’m going to go through 3 specific types of journalistic articles, and talk about how each of them has inspired my design philosophy. These 3 exemplify one each of Aristotle’s methods of persuasion - appeal to the brain, to the heart or to the ego.
Appeal to the brain
Inviting your audience to think critically on matters of nuance
Some amazing examples of the first type come from NYTimes, and on topics as diverse as the federal budget and drug overdoses. The one example I have picked is the “You Draw It” series. It is exactly what it sounds like - there’s a partially drawn chart, and you’re invited to draw the rest of it. Let’s take a look at this chart about deaths from drug overdoses. Try it out now!
Knowing that it is a post about drug overdoses, I drew what I thought was a fairly upward trending line:
Boy, was I off! When I saw the actual graph overlaid with my guess, it drove home the point in a way that just seeing the graph by itself wouldn’t have. I had taken the time to think about it and commit my opinion to paper (or screen!), and the impact of the numbers on me was now much higher.
Another amazing example in this same series is about Obama’s presidency. We read so much in the media and think we have a decent idea about topics like healthcare and unemployment. NYTimes does a great job at inviting you to think critically about these topics and address your preconceived notions.
How this influences my design
So what are my learnings from these examples? I think the most important is that you don’t need any fancy charts or jazzy graphics. A simple line chart executed well can be very powerful.
The other important takeaway I had was about involving the user upfront. A well known design principle is not to make your user think. But there are times when you don’t want to lose the nuance, and want your user to think critically and make a decision. NYTimes has some amazing examples of how to achieve this without alienating the user.
The third, of course, is something we all know well - gamifying anything will often get your user a lot more involved! After reading these articles in NYTimes, I immediately shared them with my friends, and one factor motivating me was definitely seeing how well they did compared to me!
Appeal to the heart
Take your user along and build an emotional connect
Two of my favorite examples of the second type are Hans Rosling’s TED talkabout statistics, and Neil Halloran’s interactive documentary “The Fallen of World War II”.
The one I’m focusing on is the world war II documentary, which shows the human cost of the second world war. This data visualization uses cinematic storytelling techniques along with data visualizations to create an emotional impact on viewers.
An excellent example of how the documentary humanizes the data is by showing that the bar graphs are made up of a row of soldier figures. Before seeing any charts, we see that each of this figures represents a 1000 casualties + more than a thousand soldiers injured. The data visualization transition beautifully to zoom out of this ‘row of soldiers’ view to bar charts, making the data easy to understand but maintaining the context of how much human cost those bars truly represent.
One of the most powerful moments in the documentary for me personally was looking at the bar chart showing Russia’s casualties (the eastern front). In a beautiful combination of video choreography and data visualization, the camera keeps panning up a seemingly never-ending row of Russian soldiers who died during world war 2.
The documentary also pauses in between to let you explore the data freely. Something cool I learnt was how Neil Halloran used a custom software written in JavaScript and WebGL to create the data visualization sequences in the film rather than more traditional video tools.
Influence on my design
I design software to manage data centers, and on the face of it, that seems as far removed from emotionally connecting with your users as possible! However, the important design principle this documentary reinforced for me was the importance of always being empathetic to your users’ state of mind. All applications and products have a personality, and it is up to you as the designer whether it is intentional and well crafted or unintentional and causing your users pain and frustration. For example, injecting some personality with witty messages is great, bt don’t do it in the disaster recovery section of your UI! We have recently started an exercise at Nutanix, to define what personality we want our product to convey. The next step is always making sure we do so cohesively through the language, visual design, behavior, illustrations and animation.
The second takeaway that we all know, but it’s always good to be reminded of — show, don’t tell! The documentary does a beautiful job of creating an impact by showing what the numbers truly represent.
The third takeaway for me was the importance of always taking your user along. In my day-to-day life, the way I think of this is making sure the user’s on-boarding experience, discovery of a new feature, or any complex wizard really needs to be well thought-through. The documentary always uses excellent transitions and animations to move between different views of the data, always maintaining context and moving the story along.
Appeal to the ego
First, do no evil! Use ethical design to create social awareness
According to Aristotle’s methods of persuasion, ethos involves the speaker inspiring trust in his audience. This comes from your moral competence, but also includes your expertise and knowledge. As designers or a creative technologists today, we have a lot of power to persuade our audience — and it is important to always be aware of whether our products showcase utmost ethical design.
Taking the case of charts, there are so many bad examples out there — which mislead their audience intentionally or unintentionally. One particularly egregious example is this (now deleted!) tweet from NRO, and quartz does a great job walking through exactly how terrible it is:
This is an example of a rather juvenile attempt to convince the audience that global warming is not real, by plotting temperature on an axis spanning 0 to 110F! As quartz shows us, this is a very much like plotting body temperature on a scale of 0 to 110F and berating Bob for complaining about his fever!
The right way to do it, of course, is to use reasonable values for the y-axis, that showcase the real trends in the data:
While this might seem like a particularly obvious example, it is very common to see charts that more subtly misrepresent data. The main culprits are incorrect use of axes, bar charts not using a 0 baseline, and cherry picking data.
As a designer, the main takeaway from such charts is to not do evil, of course, but also to practice rigor in design to make sure you’re not inadvertently misleading your users or lying by omission. Building trust with your users is always the right choice, and always more beneficial in the long term.
Going beyond the obvious of “don’t mislead”, design can also be a powerful tool for bringing about social good by creating awareness about important topics. Periscopic focuses on this by partnering with NGOs to create easy to understand engaging data visualizations. NYTimes also does a great job at this by driving clarity about important and relevant topics, always backed by rigorously researched data. One of my favorite examples from NYTimes is the recent article about “punishing reach of racism”
The articles starts off by drawing the user in with a beautiful animation that shows how we as a society are failing black boys you can see how more of the blue squares are literally falling down the income ladder despite of growing up rich.
The article goes into further details about the study, talking about various aspects like incarceration rate, income levels, marriage and how these are affected by race.
One example I really liked for its simplicity and powerful impact is this chart showing incarceration rates:
This is a very well written article based on a long running study, and well worth a read. It is, in my opinion, one of the best examples from NYTimes that showcases how design and technology can be used to generate social awareness!
