Data Visualization: Designing for Mobile Devices

By Mico Yuk, Stephanie Diamond

Until a few years ago, when a designer created a paper-based ad or brochure, she could plan exactly how it would look after it was printed. The designer knew the format and how customers would view it. However, the popularity of mobile devices has increased, and designers have had to face two new design issues:

  • Design of mobile device interfaces

  • Creation of apps for mobile devices

With the advent of the Internet, online designers used the few web browsers that were available to plan how their designs would look onscreen. The available tools were somewhat crude, but design was pretty straightforward. If he tested each web browser, a designer could determine what he needed to fix so the design would look right online.

Now designers have to design for a host of mobile devices, each of which has its own quirky needs. Consequently, the complexities of designing visualizations have grown.

Embracing responsive design

To deal with the issue of multiple screen sizes and operating systems, designers use the principle of responsive design (RD). RD refers to an interface or layout that can reconfigure itself based on where it’s being viewed. The term was coined by Ethan Marcotte in a 2010 article that recognized the need for designers to address the issue of multiple screen requirements.

A website design that’s responsive still looks good whether you view it on your desktop computer or on your smartphone. The rounded edges and icons that are common on smaller devices automatically fall into place.

In his article, Marcotte cited the three areas where RD can have the most effect in web design:

  • Fluid grids: The grid is the tool that designers use to lay out their designs, regardless of whether those designs will be viewed online or offline. In the following figure, a grid design has been transformed for three screen shapes.

    Grid design translated to different screens.

    Grid design translated to different screens.
  • Flexible images: When you have images in a blog post or on your website, you want to ensure that they’re not cut off or distorted. Making sure that your images can reformat themselves is important.

  • Media queries: When you enter a search term in a search engine such as Google or Bing, you want to be able to view the results on any of your screens. This is a key principle of RD. The content needs to be viewed on any mobile device a user might have. What makes viewing it on a variety of devices a challenge is that the designer has no way to know what the returned result will be.

These ideas apply to data visualizations as well. You want to make sure that your grid isn’t distorted when the data viz is viewed on a mobile device. The images must be clear and the aspect ratio (length to width) should be aligned regardless of the device the user is working with.

Following app design standards

Designers not only want an interface to look good, but also want it to do all sorts of tricks. As a result, app design has become a discipline unto itself.

You may wonder why you should care about app design. Everyone who has to visualize anything online is subject to the same standards as any app designer.

In his article “Apple’s 6 Simple Rules for Designing a Killer iOS App,” Pete Pachal describes what he had to do to get his news app Spun certified for Apple’s App Store. (At this writing, the app isn’t available in the U.S. App Store.) Pachal’s team had to work with Apple for five months to get everything perfected. During that time, Pachal codified six rules for his team, four of which apply to data viz design:

  • Simplicity is strength. This rule is probably the most important rule for data visualizations. The goal is to explain or uncover new information that can be used to develop insights. If you focus on too many data points, the story will be lost. If you’re creating a dashboard, this rule is particularly important because each piece of data needs to support the whole.

  • Don’t sacrifice quality for time. This rule is important for data visualization. If you slap together a visualization that’s hard to decipher or just plain sloppy, no one will want to use it. Take the time to develop something great, and continue to refine it over time.

  • Reward the user with every touch. Every menu item should do something useful. The print link should work, for example. Also, every click should provide information.

  • Details matter. Before the user clicks a link in a data visualization, it should be apparent where that link will take her or what type of data she’ll see.