My top 5 mobile design tips

With the launch of Tableau 10, you can finally build mobile friendly vizzes in Tableau, huzzah! Here are my top 5 (non-Tableau specific) mobile design tips.

Tip 1 - Design for mobile first

It’s much easier to avoid object overload (a cluttered dashboard) if you first design the phone view of your viz. You can then add extra context to larger tablet and desktop views. While this seems like easy advice to follow, it's surprisingly hard to change your habits to start with the mobile view. 

Designing small to large dog-style

Designing small to large dog-style

 

Tip 2 - Design the way people hold their mobiles (vertically)

People hold their mobiles vertically - image form A List Apart

People hold their mobiles vertically - image form A List Apart

  • 85% of the time people hold their phone vertically in one hand
  • 14.9% of the time people hold their phone vertically using two hands
  • 0.1% of the time people hold their phone horizontally using two hands*

So design vertically!!!

Having to design vertically is actually a blessing in disguise: it means you only have to design for one orientation. (if you are designing for tablets, that people rotate a lot, you'll have to make sure your viz works both vertically and horizontally).

Also consider how people interact with their vertical phone, they don't want to click on things much, they just want to scroll. This means people are also less likely to click through your story points on the phones, so make long scroll-friendly vizzes instead.

*For details about these statistics please see this study by Steven Hoober

Tip 3 - No one will look at your tooltips

Don’t expect people to click for tooltips on mobile. Phone screens are small and people are unlikely to click on data points to see important information in the tooltips. If the information is important, use annotations or the title to call it out.

This tip is one of Archie Tse from the New York Times's brilliant talk about 'Why We Are Doing Fewer Interactives'.

Archie Tse - Mobile Design 2016 Rule 2

Archie Tse - Mobile Design 2016 Rule 2

Tip 4 - Remember 'mobile' covers a lot of different sizes

Commonly used mobile phones currently range from 320px x 480px to over 414px x 736px. That's quite a large variation that you need your mobile viz to look good across. Best way to do this? Build for the smallest screen within the mobile range you think most people will use (I go with iPhone 5), and then minus a few pixels for padding and design for that size. 

Tip 5 - Keep your viz 'lean'

No one wants a viz that takes ages to load, especially on the patchy wifi/3G that you users might have (I think of this every time I'm trying to load a page in the 10 seconds of reception I get on the Tube when it stops at a station!). This means tidying up your data set(s) or unused fields and unnecessary data joins.

Quick way to make your vizzes 'lean'?

  • Minimise the number of extra computationally heavy calculations you have.
  • Minimise the number of data points you use - that custom polygon map you have? Can you use a symbol map, or maybe no map at all? - maps get very squashed on small screens!

Pulling it all together

Here's a viz I built following these rules (although I still think I can improve its load-time).

Mobile design decisions

Mobile design in practice

Mobile design in practice

The live viz!