Nieman Foundation at Harvard
HOME
          
LATEST STORY
Building a j-school from scratch: How The New School aims to bring journalism and design together
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.
Building a j-school from scratch: How The New School aims to bring journalism and design together
“I’m not so much interested in specific skills as dispositions. Are we helping people be able to learn really fast, so when things do change they can move with it without completely freaking out?”
Tweeting across borders: With a new mobile app, Meedan is working to improve social media translation
The app, named Bridge, is meant to solve “a problem that’s a flaw with the way Facebook and Twitter currently operate.”
Serial meets The X-Files in Limetown, a fictional podcast drawing raves after just one episode
“Serial had to stay nonfictional. At the end of the show, it didn’t necessarily mean that it had a conclusion. That’s the biggest advantage we have: We’re making it up. So we can give you an ending.”
What to read next
2555
tweets
The New York Times built a Slack bot to help decide which stories to post to social media
The bot, named Blossom, helps predict how stories will do on social and also suggests which stories editors should promote.
1287Jo Ellen Green Kaiser: Do independent news outlets have a blind spot when it comes to ethnic media?
The head of the Media Consortium argues that, by defining themselves in opposition to mainstream media, independent progressive outlets miss out on the power of ethnic and community journalism.
1029Newsonomics: 10 numbers on The New York Times’ 1 million digital-subscriber milestone
Digital subscribers are proving to be the bedrock of the Times’ business model going forward. How much more room is there for growth — and at what price points?
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 ➚
St. Louis Globe-Democrat
Politico
Baristanet
IRE/NICAR
Crosscut
Outside.in
MinnPost
GlobalPost
The Awl
Davis Wiki
Patch
Franklin Center