Tableau 10 Device Designer: Optimizing for Mobile & Getting Tableau to Fit

In the days of yore (or about a couple of weeks ago), designing for mobile meant an entirely different dashboard. There’s loads of great posts on this, especially around the thought process for it, but one thing comes through again and again: mobile gets adapted.

Device designer from Tableau 10 changes the game quite a bit. Now you can take 1 dashboard and adapt it yourself. (Or people who are out-of-this-world brilliant like Allan Walker make responsive designs, but Tableau Toddlers are too busy spilling Kool-aid and fighting for the green crayon – it’s MINE, kids!!!)

I played with it a bit in beta, but now that’s it’s real, I really had to dig in. Just knowing this dashboard was going across a number of platforms affected my design process from the get-go. I immediately started planning for smaller and keeping in mind that it would have to change drastically depending on device. And, be aware, device designer goes like this – desktop, tablet, and phone – not iPad versus Google Nexus 7. This makes a difference, kids.

Designed for Desktop

There’s a couple schools of thought with mobile. Some people (like certain family members of mine that shall remain nameless) just want the site like it is, so they can navigate mostly the same as before (including endless scrolling in all directions – it’s like Brick Breaker of yore or Flappy Bird, but better). Others (like me) prefer the mobile version if it means my fat fingers only have to navigate 1 way.

Which brings us to our mobile-friendly dashboard…

Cursors are beautiful things and most people that use a computer nowadays are pretty good at getting their cursor over things. Mac, knowing I’m not, makes the arrow REALLY BIG when I can’t find it (really, sadly, thank you). I blame the cat hair. Mobile touchscreens attempt to emulate this precision by magically calculating some radius of your finger based on warmth, pressure, and urgency, and choosing somewhere in the middle. I usually fail all 3 of these checks and who knows WHAT got pressed. I also, despite my stature of a whopping 5’4″ (thank you for that new inch), have massively large hands that basketball and guitar players envy. If only I played…

Massive cold hands of death aside, when I steal glances at my phone, I want quick information. Like the 2 second version. Mostly because I’m on my way somewhere quick and partially because I’m that person staring over my glasses with the phone practically touching my nose. I need some resemblance of composure and my height, hands, and eyes are not it. At least you know I’m not driving and looking at it.

Tableau dashboards are also different than webpages. You click on them, filter things, and – keeping true to the whole definition of ‘at a glance insight’ – need to see at least most of it.

So, I stole some mock data on non-profits from Tableau. Knowing this thing was going on mobile, I opted for darker as, for me, mobile screen in general seem wickedly bright and reflective, especially in pure white. Also, Jewel Bright needed used (congrats chica on getting your own NAMED palette in a version of Tabeau – seriously, how cool is that???)

Knowing this would go mobile, I started with it being iPad friendly. I guess this is my way of attempting to please everyone (and therefore no one) at the same time. To really muddy the tires, I also kept to mostly defaults on a number of things. See if you can spot them.

Tweaked for Tablet

Many dashboards translate fairly well to iPad. There’s the whole glare factor that coincides with the mystery finger location that happens, but I find tablets do a slightly better job on this than my phone. It could be brand…

Tablets also have the widest and most extreme variance. Take the following examples on an unmodified dashboard.

The key to remember with device designer is it’s per device type – desktop, tablet, or phone. Not iPad, Galaxy, or Nexus. And not landscape either (yet – crossing my fingers here).

With exception of the Nexus, setting this thing to fit all isn’t too bad, but I’ll likely go with a fixed height in case someone hits it with a Nexus. I do this from the paranoia of naming this site ‘TableauFit’ and getting searches around getting Tableau to fit. So, my Google Search friends on Nexuses: fixed height + device designer = sorry, you gotta scroll.

I also tried to make my bars on this dashboard a reasonable size. I may go back on some of the others and add some quick filters, depending on experience and prolonged testing.

Modified for Mobile

Phone is perhaps the most challenging. Sometimes, people are on the go and really need information. Other times, curiosity kills the cat.

If you hit default on the phone, you get a right mess, especially when starting with something that was, oh, 1000 pixels wide and now it’s squashed to 300.

While the bubbles look neat from an art perspective, they’re meaningless as a chart right now. Some reordering and text box changes gets a layout that looks like this:

Exploring this across different models gives you an idea of what works and what doesn’t.

With my luck, the person using this is rocking the Lumia.

So what does adaptive design look like in total?

Or see it live:

If this box is still tiny, go here.