March 9, 2021
Dhruv Popat, BI Analyst
“Design used to be the seasoning you’d sprinkle on for taste; now it’s the flour you need at the start of the recipe.” - John Maeda, Designer and Technologist.
Good design is essential to attract and retain viewers to dashboards. It should be easy to read and intuitive in all ways, which would in turn, bring users back to explore and derive insights every time. Nowadays, the line separating design of dashboards and apps/websites is beginning to blur, with well-built modern dashboards looking more and more like websites and apps. At Blend360, we continue exploring the latest designs and techniques that make our work stand out.
In this blog I will discuss six different tips you can use to elevate both the functionality and the look of your business dashboards. While the examples I show come from Tableau, these same lessons can be applied to PowerBI, Sisense, or your BI tool of choice. Throughout this post you will see me taking inspiration from various websites I use and implement their design ideas in my work.
On any business dashboard, how you display your KPIs sets the tone for the dashboard as they represent the numbers your audience cares about the most. At a bare minimum, KPIs include the metric and its label, but to convey the information in a more intuitive and user-friendly way, consider using infographic icons:
To pack more information into your key performance indicators, you can also integrate subtle trend charts behind the KPIs themselves to give context to their year-over-year performance. This not only provides more information, but saves space!
For complex dashboards that have numerous filters or additional front-end steps, usage of collapsible containers can greatly help in reducing clutter on your dashboard and maintaining its visual appeal.
In the example below, a floating container is toggleable by a “Show/Hide” button and reveals additional filters that are important, but may not be needed in all cases or by all users.
Collapsible containers can also be used to hold a list of definitions, trend lines, filters, basically anything that you want to hide to avoid cluttering:
If your dashboard is successful, it will be shared with a wide audience and not all of them may be familiar with the specifics of the data you are presenting. For that reason, adding in footnotes, tool tips, or even a full guide within a collapsible container can help ensure there will be less misinterpretation of your dashboard. Below is an example of full user-guide, toggleable by clicking on the info button in the top right corner.
If your client requires that their dashboard be printable or shareable as an image, you may have to include definitions, timeframes, and caveats about the data as footnotes in the dashboard itself. These text boxes can be dynamically driven by the data so that they automatically update to reflect the filter values or date ranges selected:
It can be tempting to occupy the entire canvas space when building a dashboard, but it isn’t the best practice in most cases. Introducing whitespaces would allow for a more focused reading of your visuals while making the grouping intuitive. This is again a rule of thumb from web design that I have tried to incorporate in my dashboards. In fact, Human Factors International conducted a research to show that using whitespace to enhance elements could improve user comprehension by almost 20%. (Read the article here).
As an example, here is a copy of a cluttered, data-heavy dashboard:
(https://www.matillion.com/resources/blog/dashboard-examples-the-good-the-bad-and-the-ugly)
Difficult to read, right? In contrast, in the dashboard below, I have used whitespace to separate the modes of transport and give an overlapping effect at the same time. This was very convenient for my data story! Implementing these changes would give your dashboards the facelift they need.
Modern dashboards often include tiles that appear to float over the dashboard. This 3-D effect that you see in Tableau is called Neumorphism. It adds life to the canvas and allows clean separation between your KPIs, filters, or whatever else you are placing inside. I usually go with PowerPoint to create my shapes, but you can also use Photoshop or Figma, or even light grey outlines around the tiled sheets.
This is a common practice in most modern apps. As an example, see the screen shot below from the Robinhood UI which shows key stocks on 3-D cards.
Let’s see business dashboards with this feature now:
Having the ability to switch between light and dark themes ensures your dashboard will look best and provide comfort of use at night or during the day. You can see this applied in the dashboard above where the toggle button allows you to switch between two contrasting dashboards. This way your users have the option to choose whatever view they want depending on their preferences.
Beyond personal preference, there are health benefits as well. According to the Nielsen-Norman, group “People with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia.” Find out more here:https://www.nngroup.com/articles/dark-mode/.
Along with this, there is another color mode that is becoming increasingly common for the right reasons: Colorblind Mode! Checkout this article where Jeffrey Shaffer sheds light on how to go about implementing colorblind friendly versions.
To summarize, good design and valuable insights go hand in hand while building modern business dashboards. Implementing these would both lift the appeal as well as functionality of your dashboards! For any questions and suggestions reach out to me on Linkedin or at dhruv.popat@blend360.com.
