Designing and building data visualisations have long been a core part of the creative team’s offering at Distilled. As technology continues to develop, the way we work must also develop and adapt with it. Coming up with a good execution for a data vis piece can often be a tricky task in itself, without someone throwing in the inevitable “How does it look on mobile?” question into the mix. But of course, this is a very valid question to ask, considering SimilarWeb’s State of Mobile Web US 2015 report found that roughly 56% of consumer traffic to leading US websites is now conducted from mobile devices. With this stat in mind, ensuring that your visualisation is as effective on mobile as it is on desktop is becoming more and more essential.
There are methods of visualising information that lend themselves very well to being responsive in adapting to screens both big and small – horizontal bar charts, for example. Then, there are others that can cause no end of frustration to the designer and developer – maps being one of them – and thus this blog post was born.
Maps can be a very effective tool of visual communication. Done well they have the ability to draw you in; perhaps more so than other more typical graphs, as the shapes of landmasses provide familiar backdrops for information to be overlaid on. However, when space is a premium on mobile devices, how can we scale down a map of the world to a mere 375px width and allow users to still see the story behind the data?
1. Show and tell
When we pitched the idea of our What Powers The World? campaign, it was pretty much a guarantee that we had to base our visualisation on some form or variation of a world map. We had little doubt that this would work well on desktop, so the challenge lay in providing an equally satisfying experience for users on a mobile device (especially if they, like myself, prefer to browse one-handed in portrait mode). Although not an extensive study, UXMatter’s article does touch upon an “overwhelming use of devices in their vertical orientation, or portrait mode”
By deciding early on that we would represent our data with the metaphor of lights turning off, this was the first step in the direction of making it more mobile-friendly. This meant there was only one parameter to tell our story, and therefore only one parameter the user had to focus on. We had grand visions for the stunning visual impact that would come from seeing the world practically plunge into darkness when switching off the fossil fuels supply, but this alone couldn’t be our whole offering. As with all our creative work, we strongly believe in delivering information without having to make our audience work for it.
On desktop, there is the added functionality of on-hover tooltips showing the stats for each country, but allowing this complete freedom to explore the map on mobile was out of the question for the budget and time we had. Our solution was, therefore, to pull out the key stories (indicated by the pulsing orange dots) so users, in particular on mobile, can easily get an overview of where the areas of interest are. This is an example of the combined benefit of showing and telling the audience what to take away from a piece while keeping the effort minimal on their part.
Not every piece can follow this pattern, though. For example, if there are more than just a select few stories to tell, then perhaps the success does hinge on the ability for people to delve in and explore. If this is the case, the following point is crucial to bear in mind…
2. Design for fingers, not cursors.
Cursors were designed to have close to pixel-perfect sensitivity. Unfortunately, the same can’t be said for the evolutionary path of our fingers. There are two ways in which we can optimise for this. The first, and preferable, method is to make all the interactive tap areas a decent size so they can’t be missed even with the stubbiest of digits. For example, when dealing with a map of the U.S. whilst we don’t have control over the geographical size of each state, we can, however, control how they are visually represented.
In Is it Illegal…? we used the tile grid method of mapping. This means that District of Columbia, the smallest state by area, occupies the same on-screen space as Alaska, the largest state by area. The added advantage of this treatment is that not only does this make small states easily selectable, it also gives them the same visual significance, and on the whole makes the map more scannable. This method isn’t reserved to the States alone, the same principle can be applied to any landmass; for example, London as demonstrated by After The Flood’s London Squared project.
What’s the other option though if you want to stay true to a country’s geography?
The second method that can optimise the user experience of displaying maps on mobile concerns the way a piece is built and coded, as opposed to the design. By applying a tap-and-drag functionality, we can mimic the way you would move your cursor around the screen to bring up hover information. This proved useful in our Great British Bakes of Instagram piece. From an aesthetic point of view, we wanted to maintain the true shape of the U.K. and not rely on a tile grid version. However, some areas occupied a frustratingly small area, Bristol in particular being the smallest.
Here are two things to consider though if using this method:
Make sure the tooltip that appears is positioned far enough away from the click-point so your finger won’t actually obscure the information.
Don’t let the tap and drag functionality be confused with a scroll event (if your page requires scrolling), otherwise, this may be doing more harm than good and amount to a frustrating experience for the user.
3. Be selective; impose restrictions.
The KISS Principle, otherwise known as “Keep it simple, stupid”, is something I’ve previously referred to in my talk at BrightonSEO (see Ten Lessons in Designing Content for Mobile). This essentially means that in our design, we should strive for simplicity and avoid complexity. I strongly feel this is very important to remember when optimising maps for mobile since space is such a premium. With this in mind, we always have to be sure of what we want to show; and in some cases be selective, and even restrictive.
The Upshot’s The Best and Worst Places to Grow Up is a good example of this. Instead of showing you the whole map of the U.S., it sets NYC and its neighbouring counties as the default position of interest; most importantly though is that this appears as a static image. While the desktop view allows you to zoom in/out, pan around the country, and hover over county, the mobile view imposes restrictions in exchange for a smoother, faster-loading experience. Remember: a user will never actually know what they’re missing out on! In this case, if they do want to see the stats for a different area, this is taken care of outside of the map view through the means of an intuitive search bar. You’ll also notice that there’s an option underneath to display data based on your location. Automatically positioning maps based on a user’s phone location is a feature that might well be worth pursuing if this is relevant to the story you’re trying to tell.
…when creating mobile-optimised map visualisations, one of the first things to do is whittling your offering down to its bare bones – what are the essentials and what are the nice-to-haves? Secondly, consider whether or not it would be useful to guide them through the data or story. Don’t make the user work – should you combine visually showing and verbally telling them the story? If exploration is a must, then make it as easy as possible – think large, unambiguous click areas or build in functionality to tap and drag.
Before going off and putting all this into practice though, there is one more question I want to pose: Does it actually need to be mapped? Maps may seem like the natural solution if your data involves countries or places and you have location data. However if geographical location isn’t pertinent to the story, then you should probably think twice. Visualising in a map-based format may in fact be superfluous – both in obscuring your story and also creating the unnecessary obstacle of designing and building the map itself. When to use maps in data visualisation: a great big guide is a good starting point to learn more about this. In the meantime, if you have any questions or comments, I’d love to hear from you, just leave a comment in the section below.
How to Use Maps in Data Visualisation – For those interested in visualising data using maps, whether for desktop or mobile, but need some advice on how to get started. In particular this article is a great introduction to which type of map to use for different datasets.
Let’s Tesselate: Hexagons For Tile Grid Maps – A useful article about the virtues of using hexagons instead of squares for tile grid maps.