Device Designer, Tableau Mobile and Users – Considerations for the Phone

I first started using Tableau for mobile devices back in 2010. Yes, you read that right…we used Adobe Muse to deploy dashboards so we could get to it via smart(ish)-phone and tablets. In 2010, Blackberry was still comfortably making phones, including slide and flip versions with full keyboards. iPhone 3S was king, with the 4 coming in the summer. I’m pretty sure I broke down and bought the original Droid in 2010 and finally kicked the Sidekick habit. The work Blackberry may have also been there, mostly for Brickbreaker.

Since that point, a lot has changed. For starters, Tableau introduced device designer, so now, the server can sort out what type of device I’m using. We’ve also seen what dashboards could be on the phone with this brilliant post from Kelly Martin. Go read it if you’ve somehow missed it. I’ll wait.

Over the years, our relationship with the phone has changed. I can remember people at one time sharing a mobile phone, you know, like a landline. At some point, it became attached to us, individually, only to be shared with children under 6. At 6, they become literate and can read our Google search history, Twitter feeds, and whatever else is buried in there (note to self: take garbage out – recycling goes next week). The phone has become our second brain by proxy. For some people, it never makes it more than 3 feet away and we have a hard time as a society doing basic things (walking, driving, sleeping, toileting) without it.

The phones themselves have also changed. They’ve continuously gotten brighter and brighter. So bright, I have to tamp mine down not just in settings, but with a color filter. I know I’m not alone. Most, if not all, rely on some type of touchscreen technology.

So, gone are the days when we just looked at these things for a brief update. If anything, the phone itself is an appendage and one we’re thinking should be able to do just about anything. That seems to include mobile dashboards. So, how do we design with all this in mind?

Beware the blue light special

Screens are probably one of the key offenders in the blue light war. It used to be the sun. With always-on set-to-the-max-brightness screens that are near-constant, we’re setting our retinas up to fail. White in particular loves to amplify this effect, which is why some of the nicer phones offer a night-mode and blue light filter.

Is one of these easier on your eyes? Try taking it into the dark. Make sure any color filters are off on your phone. Side note: It is VERY possible to inflame your retinas. Do not stare too long at the light…

When we soften colors, it helps. Both of these are still fairly bright for a dark room, so you won’t make any spouses or significant others happy if you’re doing your late night phone check in the bedroom. In most cases, the yellow will wear down your eyes much less than the blue. Even if we like blue.

Embrace big fingers and small screens

Nothing ups the ante more than the challenge of shrinking a screen and removing precision. Smaller screens not only mean less real estate, but reconsidering the how the data itself is presented due to an entirely different shape – most people interact with their phone upright. Some of us (look elsewhere) lock it so it doesn’t move (thank you for looking elsewhere).

We also have less precision on a phone. We’ve learned (and anyone who remembers the 1980’s or ’90’s knows it was learned) to use mice as inputs. Our fingers are instinctual, but the lack of texture and minimal feedback is not.

When we know in advance that our dashboards will roll to phone, we can design for this. We can select large bar charts as filters, add intentional noise to line charts, limit our uses of scatterplots (pick a point, I dare ya!), and feature KPIs (or BANs or Numbers that Spark Joy). We may limit filters and use items that allow compare and contrast to avoid certain mental loads (remembering shapes before and after). We can also be friendly to retinas.

There’s not a lot on this and the conversion was fairly straightforward. I’ve altered some of the dotted lines to create ‘finger safe zones’ in the mobile. The border is also a landing spot for dragging.

This is all well and good when we know in advance. What happens when our people ask about legacy dashboards that were designed fully for desktop?

As of 2019.1, Device Designer attempts to create automatic phone layouts. Current iterations strip all use of containers and follows a z-reading pattern by using the top left corner.

For this dashboard, which visually cues a down then over pattern, we need to make modifications.

Translate intent

The small screen forces us to reconsider what’s important. The dashboard above looks great on desktop and parts of it seem destined for mobile. Then, there’s other parts…

When we look at these 2 charts side by side, we get an idea of how much smaller mobile truly is. On the left, we have a large screen. On the right, I want you to imagine hitting a point with your finger. Are you frustrated yet? Do we intend our users to visually observe patterns or interact? How important are those points?

By changing the experience, we’ve made it quasi-reasonable to interact with the points. We could further optimize this with filters, as needed or some flips to bar charts and even tables.

Bonus: Device Designer Hacks

Here’s some hidden features you should know.

You can set sheets transparent. To do this, right click in your chart and format. Go to the cute paint bucket and set to none.

You can also color worksheets and all other items within the dashboard layout area. Here’s why this matters: it gets set per device-specific layout. Oh, yes, you can conditionally format per device! Make sure worksheet formatting is set to none.

You can add text, blanks, and images to mobile dashboards without going through default. Charts, unfortunately, must flow through default, so you can take those off the grid, hide them in back, or explicitly set all 3 layouts.

The new device designer also takes everything to tiled. If you’re like me and your dashboard is this complex, make sure to hit the clear all button. Resize to something reasonable – I aim for no more than a whole scroll (about 1200 px give or take 100.

Build as normal from this point.

Lastly, consider tooltips. These make for great supplemental information on desktop dashboards, but often add complexity to touch-centric experiences. Move to actions so you can control their location, or consider – dare I say it – a screen jump for items that need greater clarity. New button experiences make this easier.

Dashboards to go: Take it with you

So, as you start to think about designing for the phone, what should you consider?

1. Plan for the worst – your dashboard will be used in a toilet, in a dark bedroom, or in a car (with someone else driving). Reduce the brightness of the background and review all your interactions. Your driver will thank you.
2. Defeat distraction – make it easy to navigate your dashboard. Design matters. Use icons to help people navigate or remember certain concepts.
3. Translate to the form as much as possible. Someday, I’m hoping Tableau will include more phone-native gestures, such as swiping, stretching (2 finger expand), and dragging (you can try this, but it won’t work as planned). Until then, consider your charts. Do you need to add some mobile-specific ones?
4. Use some of the new features. Sheet transparency makes it so much easier to swap backgrounds. Also, if you format at the dashboard level using the layout pane, you can conditionally change colors. Throw a blank or textbox in the back if you’re floating.
5. Create ‘finger safe’ landing zones. In some examples, I’ve called it out explicitly while in others, it’s a bit more hidden.
6. Think of it as an app. Look at some of the apps on your phone that you use daily. Compare them – if possible – to their desktop counterparts. What have they changed about the interaction? Look at the colors they use. Bring this to your dashboard.

To mobilizing your dashboards – cheers! I’m going to lock my phone in the trunk and go for a ride.