4. Why? Journalistic and
technical reasons
● Point out the key pieces of data right away
● Search engines <3 fast-loading pages
● Swiping and scrolling > dropdowns and
buttons on a mobile device
5. What are we
moving toward?
● More linear, explanatory stories rather
than open-ended exploratory ones
6.
7.
8.
9.
10.
11.
12. Resources
● Stories in this presentation:
○ The Guardian’s How did Theresa May’s election gamble fail?
○ WSJ’s How to Make a Call in 2017
○ WSJ’s Cassini’s Last Dance With Saturn
● More on the conversation about interactivity in graphics:
○ The death of interactive infographics?
○ In Defense of Interactive Graphics
○ Seven Trends in Data Visualization
● Storytelling tools to explore:
○ journalismtools.io
○ SPJ’s Journalist’s Toolbox
Hi, I’m Colleen McEnaney, and I’m a graphics editor at the Wall Street Journal based here in London. I’m a visual journalist and developer who works directly with reporters and editors to tell stories visually. My job involves a mix of data viz, analysis, design and reporting.
I’m going to talk a bit about our shift away from interactivity toward more explanatory data visualizations on mobile, and show some examples of formats that I find particularly compelling.
There’s been a shift away from strictly “exploratory graphics” - ones that let the reader sift through a dataset using dropdowns, search bars and buttons - to more “explanatory graphics” that guide the reader through the key takeaways.
As journalists, our job is to make sense of information and distill it in a way readers can quickly understand. We should point out what’s interesting in the data. Why should they care? How does the data fit into the larger narrative we’re explaining?
Search engines are increasingly prioritizing pages with faster load times. More interactivity doesn’t always mean slower page load, but it does mean more time planning and testing to keep performance in check.
Dropdowns and buttons can be a pain on a phone. Readers are much more comfortable with an extra swipe or a little more scrolling than an extra button to press or menu item to select.
Linear narratives that make use of swiping, scrolling and other gestures.
Here are a few examples of projects that I think do this really well:
The story is set up as a series of “calls” from Joanna Stern, WSJ’s tech columnist. The graphic cleverly uses swiping and menus that look a bit like those of the iPhone to make it feel like the reader is using a phone as they move through the story.
Joanna’s audio is played back in HD voice as she explains HD voice and so on, so the reader is given a clear example of each kind of call. Importantly, the option to continue without sound is also given at the beginning.
The navigation is subtle, but clear - just swipe left, then up as the arrows indicate.
The graphics take center stage and make full use of the limited space available.
There are plenty of annotations to point out what part of the graphics are relevant to the text above.
The graphic guides the reader through the Cassini probe’s key discoveries during its 13-year orbit of Saturn.
The background is one fluid animation that illustrates the text as the reader scrolls through.
Like the Guardian example, there’s one graphic that makes full use of the space available and is annotated in various ways as the story progresses.