What to consider when designing dashboards for mobile screens?

Creating a mobile version of a dashboard can take just as long as an initial desktop view, here are a few things to think about.

Reduced screen size

With less space available you need to prioritise the most important pieces of information. You also need to think about how objects on your dashboard will appear on a smaller screen. You’ll also need to consider the size and readability of text.

Different screen orientation

Most people hold their mobile devices in portrait orientation, this will significantly impact the layout of a mobile version of a dashboard. Try to stay with a single column layout for easier use.

Reduced interactive accuracy

Dashboards are generally designed to be interacted with, usually with a mouse. This is very accurate. A finger tap on a screen won't be quite as accurate so buttons, dropdowns, and similar objects will need to be larger.

Session length 

How long is someone going to use a dashboard on a mobile device vs a laptop? Potentially it’ll be a far shorter session on a mobile device, think about what’s most important for the user.

Device Specific Views

For each dashboard that’s built using Tableau desktop we can create four device specific views: Default, Desktop, Phone, and Tablet. Each one of these will have it’s own design considerations. Each one added can improve the value of a dashboard, but also significantly increase development time.

How to improve your dashboards for mobile?

For a bar chart like this, first consider what won’t work on mobile?

• It’s too wide for a smaller screen in portrait mode
• Bars are too narrow to select with a tap
• Any blocks of text need to be resized for the smaller screen

The first two points can be simplified with: There are too many data points for this chart type on this screen size.

So, how can you improve?

Staying with bar charts, these are some aspects we change which can help to improve the usability of this chart on a mobile device

• Reduce the number of bars
• Make the bars wider, and therefore easier to select with a tap
• Include a mobile friendly way to view more data

• We can improve this further by adding in an overview. We could include a second view of the same chart indicating the bars that have been selected. This would provide important contextual information for a user.

Improving dashboard designs for mobile in Tableau

To start with, here’s a basic bar chart in Tableau showing the sum of sales by week.

Let’s reduce the number of bars. I want this to ultimately be a dynamic chart that users can select exactly the bars they want to see. 

First we’ll be using the table calculation function LAST( ). In our bar chart I’ve placed this onto label on the marks card. This function will label the bars in descending order, starting at 208 and finishing at 0. For clarity I’ve just shown the first and last label, this will give us a unique value for all of the 209 marks in the view. This will help us to allow our end user to choose which data points they want to see in more detail.

Next we’ll create some parameters

Parameters

The first one we’ll create is called Last Column Number with the following settings. 

This parameter will store the current position of the main chart, which we can compare with the value of LAST(). The minimum value of 0 is important, this is so that a user can’t go beyond the end of the chart.

The second parameter will be used to display the number of columns in the view. We don’t want this value to be too high, or we’ll have the same issue with the number of data points as our original chart.

The third and final parameter will let our users move left and right along the chart, and allow them to view different sections of the bar chart.

Now we can write some calculated fields using these parameters.

Calculated fields

The first and most important is a calculation that we’ll use to filter the number of bars for our mobile view. It’ll return a boolean value and is in two parts.

The first half of the calculation looks like this and will find the last mark that we want to see and all the marks preceding it.

LAST() < [Last Column Number] + [Columns to display]

The second half looks like this and will find the first column that we want to see and all the marks after it.

LAST() >= [Last Column Number]

We can combine them into one calculation using AND to give this calculated field which we can call Selected Columns:

LAST() < [Last Column Number] + [Columns to display] AND

LAST() >= [Last Column Number]

Just to confirm this is working, I’m going to add the calculated field to colour on the marks card and we get this result. I’ve filtered this chart to only show 50 bars to make it easier to see the bar labels which are showing the result of LAST().

Finally, make sure to add the Selected Columns field to the filter pane, then select True, and click ok, and you will end up with a worksheet like the one below. I’ve named this worksheet Detail.

I also like to check that each aspect of the calculation is working as I intended, so I’ve built an additional chart using the measures and parameters involved in the calculation. This won’t be used in the final dashboard and is just for validation purposes.

In the first two rows you can see the individual sales per week, followed by the LAST() function decreasing from 50 to zero. 

Next are the two parameters Last Column Number, which I’ve set to 1 and Columns to Display which I’ve set to 6. Finally the two parameters are summed together. 

If we look again at the calculation we wrote
LAST() <  [Last Column Number] + [Columns to display] AND 

LAST() >= [Last Column Number]

We can rewrite it with the parameter values added in:

LAST() <  7 AND LAST() >= 1

Now we can see that our calculation is definitely working as intended, as we have column numbers less than seven, and greater than or equal to one highlighted in orange.

We now need to enable the user to change which columns they’re viewing.

We can do this with two simple calculations where we combine parameters, the first I’ve called  +1

[Last Column Number] + [Increment]

And the second field  is called  -1

[Last Column Number] - [Increment]

We’ll make use of these when we build the dashboard. For the moment, they each need to be added to their own worksheet. Place the calculated field +1 onto detail on the marks card (the aggregation doesn’t overly matter here, I personally set it to average). Change the mark type to shape, and choose an arrow pointing to the left.

Create another worksheet, this time place the calculated field -1 onto detail, change the mark type to shape, this time choose an arrow pointing to the right.

Dashboard Setup

Place the three worksheets onto your dashboard in the layout below. I’ve added a thin border to better show the relative proportions, you won’t want to include this border in your final layout.

Dashboard actions

The last step is to add in the dashboard actions, we’ll need two actions. The first will allow a user to move “left” along the Detail worksheet. We’ll be targeting the Last Column Number parameter, with each click of the left arrow, this will increase its value using the value stored in the field +1. Effectively it adds the value of the Increment parameter to the Last Column Number. 

This is the second dashboard action that allows the users to move “right” along the chart. This works in the same way, but in the opposite direction, by subtracting the Increment parameter from the Last Column Number.

And now our dashboard should be largely complete in terms of functionality. There are additional steps involved in removing the selection highlight when clicking on the arrows, but this is something for another blog post.

We can then build an overview chart by duplicating the Detail worksheet we’ve been working on, and removing Selected Columns from the filter pane.

Finishing touches

Allow the end users to access the parameters with a show/hide container, they can then choose the increment and the number of columns to display. After a few more tweaks, changing the arrow shapes, adding labels, adding titles, and some formatting, this is the final mobile dashboard on Tableau Public, feel free to download it.

What are the next steps?

Here are some ideas of what we can do with other charts to make them more accessible on a mobile device.

KPI

Something as simple as KPI can be left as it is. They are usually already a big enough number to be easily seen on a small screen, and there usually isn’t complex interactivity built in.

Line chart

We could do something similar to the bar charts, limit the number of data points visible in the main chart, and give the users the option to scroll along. However we have to be careful as this could change the apparent slope of the line.

Heat map

Letting users zoom in on a section of the heat map and scroll around, whilst also highlighting on a overview which section is being viewed.

Scatterplot

We could include a zoomed section of the scatter plot along with a box on a summary view indicating the area being viewed.

Treemap

As long as there aren’t too many sections, this could potentially remain as it is on the original dashboard with limited changes.

Final thoughts

It’s also worth looking into responsive design, while this is possible in Tableau, it does have limitations. I’ve explored how to do this in a Tableau dashboard here. This all works well with embedded analytics which gives you additional control, so you can more easily switch between device specific views on different screens.

All of the above examples are just suggestions, it does depends on your data and your specific use case. Designing for mobile requires careful consideration of how a user interacts with what’s on the screen, as well as the questions they’re asking of their data.