In this post, we explain the demands of designing graphs, charts and maps for smartphones, and explore best practices.
The amount of data available to us has never been greater and yet we are now working with watch sized interfaces. This paradoxical challenge is one of the trickiest ones for UX Designers to tackle. In this post, we explain the demands of designing graphs, charts and maps for smartphones, and explore best practices.
This is probably the most flagrant pitfall. Don’t try to shoehorn desktop designs into mobile screen sizes. Just don’t. It doesn’t work. Graphs get overloaded, maps unnavigable, tables shrivelled, etc. Size is not the only issue. Nothing is more infuriating than the reproduction of a typical desktop pattern on a touchpad screen, like rollover tooltips or drop-down menus.
Example
This chart showcased by sketchpixy.com uses mobile friendly dragging motions to explore trends over different periods of time.
A good way to start creating a mobile-friendly data experience is to take advantage of features such as geolocation. For example, if you’re dealing with maps, you can provide your users with some local data first, then let them zoom out if they need to.
Example
When presenting data about L.A.-area aging water pipes, The Los Angeles Times decided readers would most want to know about the leaks that were closest to them.
All these considerations bring us to the primary point of prioritising your content based on user needs. Who is the audience? Why do they seek this data? What’s the message and how can it be best delivered? Good UX practice, utilising tools like persona and storyboard development, will help you to understand the information and tasks which are most critical for your users.
Example
Google Analytics 360 mobile app finds critical insights among the thousands of metrics reported in a user’s Google Analytics account. The user can see in a few minutes what might have taken hours to discover previously.
Device capabilities and your understanding of user needs may help you to tell a very different story with your data. As suggested in the Google Analytics example above, you could start with a tightly-focussed snapshot with a few key insights, instead of trying to lay everything out in one view. Mobile data visualisation pushes for clarity and information breakdown. A clear label with a well focused chart can achieve a much better outcome than a long series of disconnected, irrelevant data views which are of no significance to the user.
Example
This BBC News interactive called “How equal are you” delivers information about the gender gap in a very clever way. The readers are asked to enter their gender and nationality, then the app responds with a scrollable set of graphics and stats. Nothing mindblowing, but the result feels clear and engaging.
A myriad of devices, limited data plans, a potentially slow connection … Designing for mobile means working with constraints. Learn about the context of use, be conscious about potential performance limitations and always keep an eye on load times and data consumption. Whenever it’s possible, opt for the simplest visualisations and the lightest media files. Make use of layout and styling techniques such as white space, font size, grid placement or colour, to communicate the information clearly.
Example
This page on the National Geographic website gives the reader an overview of the migration rates. Given the amount of information available, the way it is laid out is a model of clarity.
Animated graphics are great for data comparison, or to show shifts and trends over time without requiring too many user interactions. Animations can also be used to help focus attention on an important stat or on a special part of a graph.
Example
The Guardian analysed patterns to reveal how Brexit created four new political factions. It’s a great example of a meaningful and well-executed animation.
There are plenty of tools out there to build responsive charts for multiple devices, software versions, and screen sizes. At Xwerx, we like to use angularJS and d3.js as our javascript frameworks, and Bootstrap or Foundation for responsive CSS. Don’t forget to test a lot to keep your design usable and looking good no matter where and how it’s viewed.
Example
The Elite Admin – Responsive Web App Kit includes a large choice of graphs and charts that seamlessly adapt to different screen sizes.
Elite Admin
In October 2016, Internet usage on mobile devices exceeded desktop for the first time worldwide (51.3% vs. 48.7%, according to StatCounter monitoring firm). Although expected, this impressive stat shows that bringing the “power of data” to mobile users has never been so crucial. It requires understanding of both content, user and context. It requires the mastering of UX methods, visual techniques and technical constraints.
But above all, it requires making choices.
Amanda Cox, graphics editor at the New York Times, has some words of wisdom about this: “Data isn’t like your kids, you don’t have to pretend to love them equally.” With mobile data visualisation, be prepared for some tough decisions.
Waterfall vs. Agile, continuous learning vs. irregular release dates, cross-team collaboration vs. siloed departments.
View Article