3 ways to make data visualisations and interactives work on mobile

Speaking at newsrewired in London yesterday (8 February), Martin Stabe, head of interactive news at The Financial Times, and Colleen McEnaney, graphics editor at The Wall Street Journal, shared some advice for making sure data visualisations work on mobile.

Less is more

• Make sure all information is available so that the narrative makes sense.

• The point of the visualisation has to be clearly illustrated. If you start to feel your visualisation is becoming too cluttered, check if you are adding labels that don’t need to be there or perhaps consider multiple simple charts instead.

• Make sure the key information stands out. If it’s not easily visible, you will lose the reader.

• Follow the story. If your visualisation does not need additional data, don’t put time into it just for the sake of it.

• Sometimes a simple, nicely-styled JPEG does the trick, instead of a visualisation, and is not limited by slow internet and older web or mobile browsers.

Think vertically

“Horizontal space is a precious resource,” McEnaney said. A data journalist has to be conscious of the horizontal display of information. If you are creating a bar chart with more than four or five categories, go vertical, she advised.

Scrolling is a native movement on mobile, so “it’s ok for [charts] to be taller,’ she added.

Making Data Visualisations and Interactives Work on Mobile @colleenmcenaney @martinstabe @mrjohncrowley #newsrw pic.twitter.com/9Z2s6d3e8C

— Dr Andrew Salerno-Garthwaite (@ASGtypes) February 8, 2017

Scrolling has even become a new kind of rhetorical device which helps tell the story, McEnaney explained, such as the 'Depth of the problem' example from the Washington Post.

Last but not least, she noted that for interactive charts, the buttons should be at the bottom of the viewport, so they are near where the users' hands are.

Choose responsiveness over interactivity

“I want an interactive with that” is not the right approach, argued Stabe. Interactivity is an extra layer for visualisations, that will make them more complex and therefore more time-consuming.

The cost of making it all work properly must be taken into account when considering a data visualisation, he added.

At The Financial Times, he said, “we are now at the point where we try to avoid using interactivity where possible, because it is more important to make something responsive than adding that extra layer of complexity.

“The value lies in the speed of delivery rather than ‘ooh, I can click on this’.”

Stabe also pointed out the new possibilities that mobile offers. For example, thanks to geolocation, you can personalise graphs without interactivity.

“By making an educated guess about the area a person is interested in based on the geolocation of their phone, we can offer them the content they’re looking for.”

Mobile charting tools to get started

McEnaney’s recommendations for tools to experiment with mobile-friendly data visualisations are Quartz’s Chartbuilder, ChartBlocks, Datawrapper, Plot.ly, Charted, and Silk.

Free daily newsletter

If you like our news and feature articles, you can sign up to receive our free daily (Mon-Fri) email newsletter (mobile friendly).