This blog post is Human-Centered Content: Written by humans for humans.
Ever wonder what the pros and cons of dark mode versus light mode dashboards in Tableau might be?
I think ultimately, it boils to personal preference. That’s exactly my point. Stay with me as I discuss why users might prefer one over the other.
First, a dark mode dashboard in Tableau is a dashboard with a dark background and light text… in its most simplistic “devoid of light” Merriam Webster definition.
I would refer to a light mode dashboard as the more “standard” dashboard where background colors are light, or even more specifically white/light gray, allowing brand colors or colors in general to help show important details and shine a light on data stories.
So, how do you create a dashboard that supports end users who may prefer one over the other? I’ll give you eight steps to making that happen (and honestly, it’s only going to take you a few minutes to accomplish this once your standard dashboard is in place).
Ultimately, I think that once an end user has an option for one mode or the other, you’d be surprised how many may respond positively to a dark mode dashboard than a light mode one. I don’t know if it will be a 50/50 split, but even just 1 user who prefers it means that you developed with the end user in mind.
Above: An example of a dark mode dashboard.
Remember that when we as developers are creating dashboards, we’re keeping the end-user in mind not only while we’re building, but also prior to building our dashboards, too. Additionally, you want to have dashboards that are continuously tailoring to end users’ needs over time, so you’ll probably want to get regular feedback on how the dashboard is helping them get answers to the data questions they might have.
All this in an effort to ensure we’re serving the end users’ needs with our dashboards, and they are able to get to the desired data insights, or can clearly see data trends, patterns, outliers and general performance of key metrics to help with data-driven decision making.
Speed to insights equal speed to action.
Thus, for many, the dark mode dashboard can help enhance focus to see those insights more clearly, especially if working in low-light conditions or in general just working at night.
I get it — not everyone is working in the Svalbard archipelago where darkness settles in for up to six months at a time. But I do have colleagues that feel most productive working at night, either because they do their best work at night due to reduced distractions, or they could have an extreme light sensitivity.
And I want my dashboards to be accessible by all, so I would hate being a barrier to someone’s ability to read and understand the data visualizations in my dashboards fully.
Go here to learn more about data visualization and best practices in handling accessibility.
In summary, standard light mode dashboards will be the way for most to have the best end-user experience as far as readability and clarity. But if you want to serve all users, consider an option that gives end-users the ability to choose their preferred option, ultimately giving everyone the best individual performance possible.
8 Steps to Creating a Dark Mode Dashboard from your Standard Light Mode Version
Step 1: Duplicate your first dashboard once it’s locked and ready for publication:
Step 2: Duplicate all of your original sheets used with the primary dashboard, so that you’ve got a mirror copy of all of the visualizations you are using:
Step 3: Replace all of the sheets from your duplicate dashboard with all of the duplicated sheets, so they fit right where the originals are:
Tip: Having intentionally created containers will provide added structure to help ensure you get pixel perfect copies of the sheets in the same place/location as the originals.
Step 4: Make the background for outermost dashboard container black (#000000):
Step 5: Make the background for the individual sheets/shading objects black (#000000). For the maps sheet, you can use the “Dark” option under Maps >> Background Maps:
Step 6: Make the background for the sheet titles black (#000000). This will most likely lead to step 7:
Step 7: Format sheet titles so that they are white (#FFFFFF) and visible, now that they sit in an all-black background:
Step 8: Add a Navigation button as a floating object to the primary and secondary dashboards in the upper-right hand corner as space allows, where the text for primary dashboard navigation text says, “Click for Dark Mode” and the text on the secondary says, “Click for Light Mode” like so:
The Result: Our standard dashboard takes us to an optional dark mode dashboard:
Now, you have a frame of reference when someone says, “Why did you create two versions of the dashboard?” Well, because not everyone is the same, and giving flexibility in dashboards helps to ensure all end users are supported in whatever mode benefits their visual analysis experience the most.