Two of the biggest trends in news today: the rise of mobile and the rise of data visualization.
The 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.