3 Steps to Designing Vizzes For Phones

Phone is after all the primary computing device for everyone. It's so pervasive.

Although Tableau's mobile device layout options have been available for a while, I haven't found a satisfactory use case for them. A few tries are simple and yet far from being practical.

Today, I found an approach that I think will make my yearning for phone viz design a bit more realistic. Here are three main components of designing a phone viz.

1.Landscape Orientation
Always design for the landscape orientation. The portrait orientation on a phone is quite limited in width, which is not good for chart views. Human eyes are positioned better to view horizontally. A wider view is always more pleasing, just like wider screen for movies or desktop computers.

(The above image is from tableau.com.)

2.Vertical Card-based layout
Card-based layout makes design look organized. A card should be more or less the same to a phone screen. In Tableau, the size should be around 667x375 for a landscape card.

In the viz, we just need to stack up vertically equal-sized cards, so that the user can simply scroll up and down. Tableau has a great option for making the sizes evenly distributed in a vertical container.

Each card is one slide or one story point. Make it simple. Instead of stuffing too much in a single card, you can always opt for multiple cards. Do not use the default title for each card. Instead, you can use annotations or floating text objects.

Yes, vertically-stacked card layout is the equivalent to story point or power point on phone.

3.Image button
A camera button is placed at the top left corner which allows user to go to the image version of the viz.

The viz on a phone is not as interactive as on a desktop. There are some inherent technical problems for that, such as screen size, fat fingers, bandwidth, memory etc.

A viz is itself a plugin that takes time to render on a phone. The user experience is kind of way more volatile on a phone than on a desktop computer.

In summary, a picture is worth a thousand words. We should make an image option as easily available as we can. Tableau allows us to export an image of the viz. But the navigation on a phone is not so easy. Thus I added an image button at the top left corner. One touch and you will get the viz in a image.

And the image is suitable for viewing both in landscape and in portrait orientations.

How to do it? Here it is. If your viz URL is like:
https://public.tableau.com/views/MexicoIntentionalHomicideRate2010-2017/MexicosIntentionalHomicideRate2010-2017

Attach this to it: .png?:showVizHome=no Then the new URL becomes:
https://public.tableau.com/views/MexicoIntentionalHomicideRate2010-2017/MexicosIntentionalHomicideRate2010-2017.png?:showVizHome=no
This points to a PNG image that is exported from the viz. Use an image object to create this button with the image URL.

Voila, that's what I found an interesting approach for designing a phone viz. Below is an example design. Click the image to go to the interactive viz and give it a try.