š© Donuts are the worst
Dashboards are here to stay
Dashboards are information management tools that provide a visual representation of data and key performance indicators (KPIs) in a consolidated and easily digestible format. They are powerful tools for data presentation, analysis, and decision-making. They offer a consolidated view of data, enhance data-driven decision-making, and help users monitor performance and trends in real-time.
Dashboards are found in almost every piece of software that requires the user to have an overview of data, but where they fall short often is in the fullfillment of their promise:
To shorten the distance between showing data and acting on a decision based on the data.
It is not enough to put effort into typography, iconography and negative spacing to produce an eye pleasing layout if the visualisation itself is difficult to grasp, or worse, misleading. šµāš«
Donuts are tasty, but the worst for you
What has spurred me to write this article is that I am tired of either building or being asked to visually design dashboards when every single chart is a donut or pie chart. One of my favourite books on the subject is Storytelling with Data by by Cole Nussbaumer Knaflic.
Arguably, donut and pie charts are among the most ineffective.
How much longer does it take for you to first read the data, and then make a decision when presented with a chart like this?
Donuts and pie charts rely on icons and lines to assist the user to grasp the data in a non-linear way. Did you find your eyes doing this circular or zigzag motion while reading it?
And now the same data given these methods of visualising?
Here you can see that these forms of charts allow of larger text and more linear reading. There's no need for icons to help the user understand what the data is. The data should be able to tell the story on it's own. These will also subsequently translate over to mobile screen sizes more effectively.
This is because donuts and pies are best suited for showing parts of a whole but are not effective for comparing multiple data categories or values. It can be challenging to discern small differences in the size of pie slices, especially when there are many categories. Furthermore, they are less accessible to individuals with visual impairments.
Tell the story of the data
When we go for pies and donuts, we believe the proportional relationships are the most important analysis, when often it's really not. It is an easy metric to grasp, but we need to make design choices for the real goal, and that is to take action on the data.
Is the proportion analysis really actionable?
Or
Is one value of the whole the main determinant of action needed?
Let's look closer at parts of the dashboards and their alternatives.
This is one way we can convert a donut chart. Here, we have a horizontal bar chart that leverages the entire amount of available space to show proportion, value and labels in a more accessible format. We can also choose to configure the most actionable value to be the first on the left (or right depending on regional reading mode). Not only that, but this format also provides additional space to for additional value interpretation such as percentage, where the donut chart with the pointers and small text would be troublesome, especially with more values.
Another way to more efficiently show data analysis is the traditional bar chat, but in a vertical format. Here we can select the most important part of the data that the user might need to take action on to always be at the top, where with a circular chart the user will have to scan longer to find that data point. Again, the vertical bar chart also allows for more space utilisation, larger and more accessible text.
This is one of my favourite and most underrated alternatives to show proportion, the waffle chart. Waffles are awesome because it's an easy way to show proportion and allow for possibilities to drill down with each grid square. It maximises the space available and highly legible. I do think that waffle charts start to lose their efficacy after three or four values, then it is probably best to go with one of the bar chart versions shown above.
Good selection of chart types is only the beginning
In summary, the purpose of a dashboard is to shorten the journey between presenting data and taking action. Let's make design and technical choices on layout and visualisation that focus on fulfilling that objective for users. To take it further, we should assess what metrics should we really show and if they can be directly tied with most important decisions and actions the users need and want to make. Just because it can be analysed and shown, doesn't necessarily mean it is value added and could just clutter up the workflow.
Interested in implementing these charts in your dashboard?
I decided to publish open-source zero-dependency React components for both the vertical, horizontal and waffle charts. You can find them here:
Feedback and PRs are most welcome! ā¤ļø
