Taking Tableau Mobile: Focus on your message
Fundamentally I believe we use desktop and mobile devices in very different ways. That’s not a groundbreaking claim, there’s the obvious difference of one we use stationary and the other we tend to use while walking, or in the case of the London Underground, stood in a very cramped space. If you’re writing text it’s fine to tweet or send a text message on your phone, but you’re not going to write a novel.
It Should Always Look Right
Similarly, we expect the services or apps we use to broadcast their information to us in ways which is appropriate to the device. The obvious change over the past 5 years or so has been in websites. Once upon a time reading websites while mobile required a lot of pinch zooming and panning left to right, top to bottom. But websites are fairly easy. The words and images I can consume on a desktop are just as easy to consume on a phone, the only difference needs to be layout and some formatting.
The difficulty in data visualisation is the information we consume needs to be not just formatted and laid out correctly, but also appropriate to the screen size and time we can afford to study it.
Present Appropriate Information
Take this example from pingdom, a website monitoring service:
It’s a fairly simple dashboard showing response times at the hourly level, some summary figures of uptime and downtime and finally a list of status changes in the table. Now let’s see how Pingdom presents the same information in its mobile app:
The obvious difference is the layout of the dashboard areas, with each one separated into a different ‘tab’ with the user swiping from outages, to uptime, to response times, etc. This is an example of modifying the layout of the dashboard and is easily achieved using the new Device Layout feature of Tableau v10. Using the web data connector for Pingdom (https://data.theinformationlab.co.uk/pingdom.html), let’s take a look at how we might modify the dashboard in Tableau.
First here’s a desktop version:
Now clearly we can’t just expect this dashboard to fit on a phone:
With a bit of tweaking using the device specific layout the way it’s designed to be used we end up with this:
Not a terrible result, it certainly works OK and is an improved modification of the original dashboard. The question I’d ask myself in this situation though might be “Is this a dashboard focussed on the questions I’ll be asking while mobile?” For instance if I’m walking when I look at this dashboard I’ll only be able to consume the downtime and uptime values. If the sunshine isn’t too bright, and to be fair in the UK & Seattle often that isn’t an issue, I’ll be able to just about make out a general picture of response times. I can see there was an issue at the start of the chart and then times settle down. That is if I already know it’s a chart of response times, the axis font is likely too small to quickly consume. And finally the table at the bottom was pointless and so I just removed it.
Going Back to the Question
How would I like to improve this dashboard? Well let’s go back to what questions I’d like to answer and more importantly what changes I can make based on the information. After all that’s what BI is all about.
When working on my desktop I’ll likely be making real changes to servers and code. I’ll want to study the data at a low level of detail to direct my efforts, understanding whether certain countries are getting poor response times, whether a particular script is causing issues, whether images need to be offloaded to a third party content delivery network, and so on. Essentially head down, music on, concentrated work.
When looking at the data on my phone however I’ll likely be making no changes at all! The best I can probably action while on the move is to restart a failed server, or maybe use the information to inform an impending call on the subject.
Mobile is More than Just a Layout
So what’s the issue? Well currently (as of v10.0), the device specific layout is only at the dashboard level. So yes we can change the layout, but not increase the font size of an axis. What’s more you can’t add a chart to the ‘Phone’ layout that isn’t present in the ‘Default’ layout.
There is a solution! And it builds on one of my favourite tricks ever, by Joshua Milligan…Going Off Grid – The secret way to hide something on a Tableau Dashboard. You see what I’d like to do is create a mobile dashboard that looks more like this:
This is something a lot more suited to a mobile view. I get a picture of everything I need in a format that’s easy to consume in just a few seconds. Most importantly I’m not relying on a tooltip as a substitute for small fonts.
So how was it created? Well first in the ‘Default’ view I used Joshua’s trick to push some mobile friendly charts off the grid so that they’re not shown on the desktop but they are available for selection in the ‘Phone’ layout. (Click to view the video)
Then simply substitute the desktop-orientated charts for the mobile ones. (Again click to view the video)
In summary the method works, but it’s not great. I’d like to see Tableau tackle it in the next iteration of their device specific dashboards…who knows, one for v10.2?
Top stuff