Mobile Design Pattern Gallery, 2nd Edition

Chapter 6. Charts

Patterns

Chart with Filters, Interactive Timeline, Data Point Details, Drill Down, Overview plus Data, Interactive Preview, Dashboard, Zoom, Sparklines, Integrated Legend, Thresholds, Pivot Table

Designing charts for the mobile form factor is a challenge. However, it also provides an opportunity to get to the very core of the best practices for data visualization. A chart should tell a story by depicting important relationships in data. If it isn’t doing that, it is just a waste of space.

In the first part of this chapter, I offer some tips to help you make sure the charts you design are clear and meaningful to your audience. Along the way, we’ll look at some good and bad examples to illustrate these tips. In the second part of the chapter, we’ll look at common chart design patterns. Finally, we’ll wrap up by looking at a couple of apps that pull everything together in exemplary fashion.

Tip 1: Learn the basics

Many of the guidelines and best practices for print and desktop chart design apply to mobile chart design as well. A great introductory book on this topic is The Wall Street Journal Guide to Information Graphics by Donna Wong (Norton, 2013). “Data Visualization Best Practices” (http://slidesha.re/1fFbP2W), a presentation on SlideShare by business information analyst Jen Underwood, is a very quick and easy way to learn the basics.

There are many chart ...