Make Your Dashboard Mobile-Friendly

And that includes tablets, smaller monitors, and minimized windows

My first mini-series of 2021 is “5 Data Viz Resolutions to Make in 2021.”

This is #4: always make sure the mobile view looks good

Dashboard designers from around the world are sharing their beautiful work, most of it done on Tableau and similar dashboarding tools. Dashboards done within these tools are growing increasingly advanced, beautiful, and interactive. Linkedin is a great source, and I also love to peruse the Tableau Public Gallery and recognized Authors for new inspiration. But with more and more dashboards being published and shared, I’ve noticed more and more of these don’t translate very well to mobile. It’s a real thorn for me because 99% of the time, I’m trying to view their work on my mobile phone.

In the spirit of sweating the details, this is another relatively simple act that I’ve found has a high User Brownie Points-to-Level of Effort ratio: making sure that the mobile or tablet views of the dashboard look good and display correctly, even if the dashboard is not designed or intended to be viewed on anything besides a desktop. This may mean that the non-desktop version has its own view entirely, or “disabling” the mobile view and directing a user to instead view on desktop (which I prefer less, but mobile may not be an option for many of these very complex and large dashboards).

There is a time and a place for mobile versions, but it should still always be top-of-mind.

A mobile view would simply not do justice to some of the works of dashboard art that I’ve seen lately. Other dashboard applications are simply too complex or nuanced to scrunch into a mobile screen without impacting the usability or user experience. Others among us are creating dashboards for our internal business stakeholders who won’t be accessing it on anything but the company PC.

Even if you’re in one of the buckets above, you should still consider how your design looks on mobile and head it off at the pass — even if its never intended to be viewed that way. And if you’re not in one of the buckets above, then you should always test how your design shows on mobile through the different delivery methods your dashboard might be shared. Using Tableau as an example, that would include:

• embedded in a browser webpage,
• directly from the Tableau Public or Tableau Server application,
• within the Tableau app,
• in an application window that is not maximized,
• on a phone, tablet, or monitor dimension other than widescreen

An example of my own doing:

This is a simple survey summary that displays nicely on a Desktop. There are some design elements that can be cleaned up and improved upon, but all of the numbers are clear, data labels are showing consistently, and nothing is misaligned.

But viewing this dashboard on the Phone layout was dicey. Tableau, for instance, created a “default” Phone view that essentially just smashes everything into a smaller window. The images below show the default layout Before, and After I created a custom Phone layout for the survey results.

The Before picture below is the “default” mobile view that Tableau generated before I created a custom Phone view for it. Even in this small slice of the dashboard’s contents, a title text box was cut off, some text is completely truncated (the notorious “###” when the text is too large for the frame), and data labels are displaying differently for bars in the graph that are long enough to house the data label inside the bar versus those that aren’t.

You can see in the After picture how these same elements looked after I manually modified the Phone view. This included resizing worksheets, lengthening the total height (which makes for more scrolling but less scrunching), and evenly spaced blocks.

Tableau’s Phone layout option is neat because you can have different sheets and content on the Phone layout than the Desktop view entirely. In the past, to make a presentable mobile view, I’ve also removed some sheets completely (like data-intensive tables). I’ve also been known to remove all sheets from the Phone view and replace them with a single text block that said something like “A mobile view is not available. Please revisit from a desktop.” This way, when it detects that someone hit the page from mobile and displays the Phone view, it shows this simple text box rather than all the dashboard sheets on the Desktop view. Many articles have been written on how to adjust for different device layouts.

Don’t forget about tablets and non-widescreen monitors.

While the focus of this is mostly viewing from a “mobile” phone, all of the same principles apply to tablets and even computer monitors that are not standard dimensions — that even includes minimized application windows.

Don’t take “Automatic” layout for granted.

I’ve used the “Automatic” layout in the past to auto-adjust the layout, but that can create some of the same problems mentioned above (like the “##s”). We should still test, test, test.

People are paying more and more attention.

In fact, when you publish a new workbook to Tableau Server, it now pushes the option to preview it on 3 different devices upon publishing.

When in doubt, make it mobile.

Yes, it takes a bit more time to develop— but if it increases long-term adoption and viewer perception, it’s worth it.

As always, different use cases call for different approaches. But with today’s world becoming more and more mobile, with devices of all shapes and sizes entering the market to accommodate varying user preferences, and with more and more data being published and shared, this is something that is not only an issue to be cognizant of now, but one that will only grow — or in this case, “shrink” — with time.

Stefany Goradia has spent her career on the front lines of healthcare analytics and writes about how to interpret healthcare data, communicate to stakeholders, and to support informed decision making.

Originally published at https://stefanygoradia.bio on January 23, 2021.