Touchscreen Toils and Troubles: Optimizing Tableau Designs for Tablets and Other Mobile Devices

It’s just a smaller screen, right?

Except, you go to click on something and a funny thing happens…something entirely different activates. Now, you know and I know you meant to hit the other button, but for some wild reason, it’s like your finger landed in a totally different spot.

Chances are, though, you’re curled up comfy somewhere with the phone above, or the tablet on the knees. You were close, so close, to hitting that button.

Touchscreen devices are absolutely amazing, until the screen cracks or we progressively realize maybe, just maybe, our fingers are fatter than we think they are.

But let’s look at this. Here’s a chart and a lot of cursor clicks. You can thank an astigmatism for some of the misses. At least, we’ll call it that today.

For the most part, it’s easy to hit with precision that narrow band of the bar I was aiming for. Let’s repeat this test with a Surface touchscreen and some fat fingers.

Here, we can begin to see where touch starts to break down. For starters, touch isn’t rewarded with any feedback beyond the screen, so it’s a lot harder to course correct. The band is much wider and the dots aren’t really dots.

Now, in theory, these bars are big enough I should be able to hit them most of the time. Let’s look at something smaller…

This line chart has little circular halos to hopefully help us touch the smaller dot and get to that data point. We’ll start with the cursor and aim for the smaller dot as much as possible.

Take a closer look at how this test panned out:

While not as precise as we thought, all of these dots hit in one of the key zones. In this case, the data will filter, the tooltip will show, and hopefully, our users will be happy.

Let’s try it with the tablet.

The misses here are far more obvious. But, let’s really look at this one.

This has a higher chance of being my signature than an effective experience toggling this data point. Some of the lines have ended up being hit, but more importantly, 60+% of all touches came in contact with nothing but empty space. That’s a lot of frustration.

Touch: the real challenge with mobile

Often times, when we discuss mobile design, we think about the eyes and users, but not the hands, interacting with our designs. We might add in things we think are large enough, only to find out that small row is impossible to reach.

Why, oh why, is this so hard? Let’s looks at those interactions again.

We can see the literal representation on the right and an abstracted form on the left. With a cursor, we can reliably hit within the black circle range, representing our idea of interactive precision. This assumes a cursor, with a point that explicitly tells you were it’s going to land.

Now, look at your finger. Ideally, it’s not pointed. Humans, unlike cursors, are typically soft. Now, if you want to have fun, clean a window or mirror (or plexiglass if you want to have fun). Make a dot with a dry erase marker. Now, get ready…touch it lightly. (If you’re using plexiglass, go ahead and doodle on your finger first.) Ideally, you can see your fingerprint and there’s probably a range. If you used marker, you might even get an idea of what points touched first.

But hey, you say, I was a lot more accurate than your test! And, you probably were.

Except, touchscreens don’t entirely work like dots on a mirror. Your dot was on the mirror. Your data is usually under a screen protector and a glass screen. They add complexity and a little refraction if you’re not 100% staring at it directly. And, let’s not forget the touch algorithm that decides how your touch was interpreted and what item was decided as selected. (Or, if you’re me, that you somehow swiped enough to archive that message you wanted to read…)

Refraction and touch algorithms factor in to that orange offset zone. Finger angle is another, which is why most iPads make you touch the home button a thousand times and still fail.

Designing for touch interaction

Here’s a dashboard that’s a bit deceptive. The line chart looks risky, right?

Hidden with a dual axis, a large touch zone helps capture more of the line. Consider where it makes sense to position these. The tooltip is minimal and provides the count of published papers.

Selecting a paper reveals a button, which pulls up the PDF below. In addition to the white space on the side, a hidden blank makes it easier to scroll down. This allows you to maximize screen real estate while ensuring functional space to scroll.

It’s a slower interaction than one designed for desktop. It helps ensure we wanted to touch the item and gives a feedback loop for committing.

Take it with you

Designing for touch?

1. Recognize fingers are way fatter than cursors.
2. It’s not just size, it’s algorithm. Cursors come in all shapes and sizes. Algorithms vary greatly, but you can’t see the decisions being made.
3. Gestures aren’t supported (yet). I keep hoping they will be. Imagine swiping with a Tableau dashboard. With animation, this could be a game-changer for mobile design.
4. Design it like an app. Large spaces, but also focus on a task.
5. Hide in guardrails.
6. Have fun and test it.