Nieman Foundation at Harvard
HOME
          
LATEST STORY
How AJ+ embraces Facebook, autoplay, and comments to make its videos stand out
ABOUT                    SUBSCRIBE
July 18, 2014, 10:58 a.m.
Mobile & Apps
LINK: mobilev.is  ➚   |   Posted by: Joshua Benton   |   July 18, 2014

Two of the biggest trends in news today: the rise of mobile and the rise of data visualization.

mobilevisThe unfortunate reality is that they’re often in conflict. Too many beautiful data visualizations are designed with a big desktop browser window in mind, not the smaller screen of an iPhone or an Android phone. Text becomes unreadable, interactions become untappable, and a lovely experience becomes unusable.

If you want to do better, check out MobileVis, a site built by Bocoup data viz whiz Irene Ros to assemble good examples of data visualizations that work well on mobile devices. (It’s funded by a Knight Prototype Fund grant.) There are lots of screenshots, illustrations of pages in motion, and notes about what makes them compelling. Ros also pulls out a set of best practices for doing visualizations for mobile:

Vertical Bar Charts: When using bar charts in portrait mode, stack your bar chart bars vertically.

Use Vertical Scrolling: When creating interfaces that don’t fit in their entirety on the screen, enable vertical scrolling instead of horizontal scrolling.

Stack Table Cells: When needing to display tables that have more than a couple of columns consider stacking cells vertically within each row.

Carousel Instead of Tabs: When allowing users to switch between different displays, instead of using tabs (which require a lot of horizontal space,) consider using a carousel with next and previous buttons.

Fix Tooltips to Area of Screen: When displaying information on touch, designate an area on screen that will update accordingly.

Use Touch Zones: When displaying a lot of data points that are hoverable/touchable, consider using defined touch zones instead.

Show tags Show comments / Leave a comment
 
Join the 15,000 who get the freshest future-of-journalism news in our daily email.
How AJ+ embraces Facebook, autoplay, and comments to make its videos stand out
“We think a lot about whether a video works with the sound off. Do we have to subtitle it to keep the audience retention high? Do we need to use big fonts?”
“It’s like seeing your grandpa in a nightclub”: The New York Times’ challenge in building a digital brand
“Relevance is the Times’ big problem, not awareness. Plenty of people know about The New York Times. But most of them think we’re not for them.”
How The Washington Post built — and will be building on — its “Knowledge Map” feature
The Post is looking to create a database of “supplements” — categorized pieces of text and graphics that help give context around complicated news topics — and add it as a contextual layer across lots of different Post stories.
What to read next
1119
tweets
New Pew data: More Americans are getting news on Facebook and Twitter
A new study from the Pew Research Center and Knight Foundation finds that more Americans of all ages, races, genders, education levels, and incomes are using Twitter and Facebook to consume news.
797Newsonomics: The halving of America’s daily newsrooms
If you’re lucky enough to have the right deep-pocketed owner buy your paper and steady it, you’ve won the lottery. If you’re in a town whose paper is owned by the better chains, or committed local ownership, your loss will probably be mitigated. Otherwise, you’re out of luck.
698How 7 news organizations are using Slack to work better and differently
Here’s how Fusion, Vox, Quartz, Slate, the AP, The Times of London, and Thought Catalog are using Slack for workflow — and which features they wish the platform would add.
These stories are our most popular on Twitter over the past 30 days.
See all our most recent pieces ➚
Encyclo is our encyclopedia of the future of news, chronicling the key players in journalism’s evolution.
Here are a few of the entries you’ll find in Encyclo.   Get the full Encyclo ➚
Semana
The Miami Herald
The Washington Post
Iowa Center for Public Affairs Journalism
Animal Político
ReadWrite
The Awl
Facebook
CBS News
Foursquare
Reuters
The Dish