This is one of a series of blog posts from the fourth ONA class of MJ Bear Fellows, three journalists under 30 who are expanding the boundaries of digital news. Fellow Aaron Williams is data visualization editor at the San Francisco Chronicle. You can watch for our forthcoming announcement about the next round of fellows here.
Photo by Flickr user Japanexperterna.se
Designing interactive graphics for desktop and mobile is tough work. A designer can sometimes change the graphic’s scale to fit on mobile. Other times, it’s better to create a separate graphic for mobile viewing. What’s the best path?
A group of us tried to answer this question at the SRCCON (Source-con) conference last month.
I co-facilitated Data Viz for All: Help Us Make Interactives More Usable for Mobile with Youyou Zhou and Julia Smith. In the session, we tackled accessibility and usability of interactive graphics on mobile.
Here’s a quick rundown of what we found.
Tooltips and hover states
The Problem
Hovering is a common way to show readers different data points on a graphic. Yet, on mobile, many of these techniques need to be rethought. For example, tapping on a point or button can be difficult if the element is small or close to text.
Possible Solutions
- Put your hover content in a fixed area instead to keep information organized.
- Change the design to use cards of information. Let the reader swipe to learn more.
- Target natural behavior like swiping, tapping and zooming for information discovery.
- Walk the reader through the data in a stepper-like fashion.
Incessant screen sizes and devices
The Problem
Making a graphic responsive helps with different screen sizes. But it’s not a panacea for data visualization on mobile. Devices and their screens are idiosyncratic and dynamic, which makes a one-size-fits-all visualization difficult.
Possible Solutions
- Consider how mobile readers load your graphic. Just because you hide the graphic with CSS doesn’t mean it isn’t downloaded. Consider how the size of your interactive affects page load and reader experience.
- Use a tool like Modernizr to check for specific browser quirks and features. You can also detect if your reader is on a touch screen and much more. Browserstack is also worth a look. But remember, these tools do not replace testing your graphic on a specific device.
- Emphasize the copy on your graphic. Text is easy to render.
Maps
The Problem
Maps are fantastic for large screens because they can display a ton of data at once. Yet, showing all the data is often harder on mobile. Interactions, like hover states, won’t work and detailed datasets become harder to read.
Possible Solutions
- Don’t force interaction on your maps. Instead, use images to show slices of geography. This lowers the burden of making the map interactive on mobile.
- Place map controls outside of the map, e.g., underneath. This gives the map the largest view available.
Charts
The Problem
Interactive charts sometimes have too much data to display well on mobile and also might have dynamic data based on a reader’s input or location. Or, you may just want to maintain some level of interactivity.
Possible Solutions
- Start with a simplified initial view. Take a slice or a key finding from the data and turn that into an image. Then show the full data visualization when a reader taps on the chart …
- … perhaps by including a table. Add data below the chart in a table or list to show the individual data points.
- Add tooltip-like data to a fixed location onscreen.
Wrap-up
This post only provides a taste of the knowledge kicked in this session. Make sure to read all the notes from the session here. Julia also created a stellar guide to mobile and accessible interactives. Consider these steps the next time your newsroom creates an interactive graphic.
Fellow Aaron Williams is data visualization editor at the San Francisco Chronicle, specializing in front-end development, data collection and online graphics. He previously worked as a news applications developer for the Center for Investigative Reporting, as well as The Los Angeles Times entertainment desk as a Web producer where he built tools to optimize and enhance the team workflow. Aaron graduated from San Francisco State University with a bachelor’s degree in journalism.