It’s hard to think about life before cell phones. They function as wallets, music players, newspapers, work tools, GPS systems, and much more. Let’s not forget the instant gratification people expect from their phones. Today we want everything, instantly, in the palm of our hands.
That includes insights.
If you take the amount of data generated on a daily basis, add to it the move to mobile, and combine that with the need for instant gratification…data visualization for mobile has a lot of heavy lifting to do. And you need the right data visualization tools to make it all work. Presenting data inside a mobile device is a big challenge but if you follow a few simple rules, the experience can have a huge impact on your users.
1. Don’t Copy And Paste From Desktop
There’s a reason why websites and apps look much better (if designed well) on your phone versus on your desktop. A simple copy/paste of your desktop dashboard to your mobile app won’t cut it. The space you have to play with when working on desktop design is greatly limited on the small mobile screen. If you copy/paste, details will look very small, messy, and unreadable.
How can you make sure to avoid this when designing for mobile? Use big fonts (at least 14 point), large buttons (minimum of 42 px ), and readable charts with big bars or thick lines that the viewer will be able to see and understand. Below is an example of an easy to read pie chart with clear buttons and text.
2. Take Advantage of What Mobile Can Offer
Designing widgets for mobile might feel limited but, actually, there are a lot of cool and impactful ways you can capitalize on all that phones have to offer. For example, you can use GPS tracking and give your users more personalized data based on their location. You can also use landscape mode for presenting more data and capitalize on the notification and messaging systems for alerts.
In the example below, you can see a notification updating a user on how many people viewed a campaign landing page for the day. The user doesn’t need to manually look at a widget for updates on important KPIs they’re tracking. Instead, it’s sent straight to their phone automatically.
3. Don’t Overload
Try not to overload the widgets you’re designing. Small screens with too many lines and too much text tend to overlap and get very hard to read. Sometimes, this can even create a false data picture.
You should make sure not to show too many values or dimensions on one widget. In fact, sometimes it’s better to separate the data to more widgets than to overload one.
4. Pay Attention to Hierarchy
Mobile limits our design space. That means, in most cases, widgets will be shown one after another and not next to each other. Try thinking about the order of data you are showing and the story behind it. This includes what the user might be most interested in and what widget logically comes after another. It’s best to start from the big picture and then dive into the details.
In the example below, you can see the first widget a user sees is their total revenue. Following that we show a break by category, which gives finer detail to the total revenue. From there you can get as granular as you think is relevant to your users.
5. Keep it simple
Your mobile users, in most cases, want to understand their data in seconds. In order to achieve this, try to use short titles, big numbers, simple bar/line charts, or tables. Avoid long text if you can and try using familiar icons. For instance, a simple revenue widget can have a money, icon and a short title, “revenue”, for easy and fast understanding.
Mobile is Here to Stay
While it’s easy to think that designing for mobile is more difficult, I like to think of it as an opportunity to present data in new and interesting ways. Following the five tips above while designing will ensure you’re headed in the right direction. Besides, mobile phones aren’t going anywhere, which means we must give users what they need in the palm of their hands.
Have fun 🙂