September 8th
February 22nd
This tutorial will explore Power BI dashboard design and the most common mistakes people make when creating their dashboards. We'll mix things up with a quick redesign to show how these lessons can be applied in practice. After you read this, you will never make these dashboard mistakes again. 😉
Note: This Power BI dashboard design tutorial is based on our 1-hour webinar on the same topic. If you prefer to watch the video, scroll to the bottom of this tutorial, enter your details and we'll send you the webinar recording and all PBIX examples to go along with it.
We believe dashboards design boils down to two words:
So these two goals would be my mission here. Let's take a look at a dashboard example.
At first glance, it looks good. It's very colorful with lots of information, so we can say it has good information density and shows a lot of detail. However, when you see something like this for the first time, you have no idea what to look for, where to click, or where to focus your attention. It's obviously some kind of a sales dashboard. Here in the left corner, there is some sales information and there is some profit information and new orders quantity.
But if you're looking at your sales performance and look at this dashboard each month, it doesn't answer the most obvious question: "Is my sales performance good or bad?"
That's a very, very simple question. But this picture doesn't tell you whether sales performance was good or bad. Is this information for one month or a particular period. Are you hitting your sales targets or not? There's no way to tell, even though these are trivial questions in a business.
But even if you find the answer, the next question arises. How good? How bad? Are we underperforming? Is it critical? Do we need to take action right now? Or is everything just awesome and business, as usual, so we can move on? Again, this dashboard does not give us an answer.
If the situation is bad or critical, the next obvious question is why. What happened? What went wrong and what went right? The dashboard shows the structure of sales by product and by product category. It has a breakdown by customer segments. and shows profit by month and product category. In the end, however, it's really hard to say: is this good or bad?
This means it's not actionable. This dashboard may be nice. You may like it. It may look beautiful. However, it's not actionable. The number one issue here is that the dashboard has absolutely no comparisons. We are not seeing comparisons to the plan or the previous year or anything at all.
Instead, we have breakdowns by different categories and dimensions where every breakdown is presented with a different visual. There are regular column charts, a tree map, a nice little colorful doughnut and even an attempt at geographic presentation. This is not helping, it's not actionable and it's not even understandable. So it fails on both counts: a dashboard must be understandable and actionable. Here's how to choose the right chart and achieve prior mentioned goals.
Let's take a look at the next dashboard.
This one is a little bit more interesting because it does have certain variances calculated. We see the revenue percentage variance in their relation to the budget. There's also a comparison to budget. If you focus really hard to try and understand all of this you might glean some information.
Again, it's really difficult to see whether the performance is good or bad? That's something that should be obvious in a few seconds. You should be able to see whether performance is good or bad and how good or how bad. Are we looking at one percent below the plan? Or is the performance 50% below the plan? This is something that should be obvious. What was the thing that contributed in a positive or negative way? It's only when you understand what happened that you're able to take action.
That means actionable.
Here's another dashboard with a similar problem.
The stacked chart is the worst culprit here.
Understanding the scope and the volume of every data category here is just completely impossible unless you take the time and hover with your mouse over every little section to read the numbers. Maybe then you'll understand what's going on. But you can't expect that from your end-users. They won't spend unlimited time just trying to understand the data, clicking and waiting for tooltips to show up. They won't examine every little pixel on your dashboards, so it should be much easier to understand.
Here's another dashboard that's not actionable.
There's a lot of green color here, but this green does not always represent the same thing. Sometimes it represents the sales amount, sometimes it's a count of status, sometimes it's a blank product category and so on. This is not helpful.
Here is a dashboard designed using a completely different approach.
This time, here's a dashboard that again shows multiple KPIs. For example, below is a bar that highlights sales versus budget. The sales were 22.1 million and there's a red section on the bar showing we were 1.1 million below the budget. A single glance shows us that we are 1.1 million below target.
We can immediately start to look for reasons for this underperformance. This is a retail operation, so you can look at the split by store chains. Some product categories are sold in two different store chains. A simple visual comparison allows you to understand that the problem is in the category of woman's clothing, especially in the Fashions Direct chain. This is clearly highlighted with red color.
Women's clothing category is also under-performing in the other chain but to a lesser extent. You can easily understand not only what is good or bad, but exactly how bad it is. It's obvious that we must focus on women's clothing product category and take action.
In a good dashboard, you should be able to click on this row to expand it and observe the details. Another option is to right-click data and drill through to another page that contains more detailed information about all stores or categories that explains what is going on.
So this is how your dashboards should be constructed. Only after you apply thoughtful and focused design will they become understandable and actionable.
First, let's look at the seven worst mistakes in Power BI dashboard design and provide some recommendations on how to avoid them. These are the mistakes that stand in the way of your dashboards becoming understandable and actionable. Here's a quick list:
As we work through them, I'll also provide some tips on best practices. It's actually not hard to create great-looking and actionable dashboards, once you've got the fundamentals right.
Let's start.
The number one mistake is a poor choice of charts. Selecting the right chart is an art as much as a science. Mostly, people fail for three reasons here: number one is wrong chart orientation. The second reason is the choice of a wrong chart type, while the third reason is the lack or failure to use some of the advanced charts designed to present variances and other important data categories.
My number one rule is that if you see the labels that are displayed diagonally, something is wrong with the chart.
The problem is that the labels are long and they are displayed diagonally, otherwise they would be completely trimmed and you couldn't even read them. But if you want to read the labels like this, you need to tilt your head and your neck starts to hurt. If you hate your boss, it's okay, but it's considered a bad practice.
Why does this happen? The reason in this case and in 80% of cases is that the charts are oriented in the wrong way. So, you should simply take this chart and turn it around by 90 degrees. You will end up with a chart that has a vertical axis and has all the labels displayed nicely and horizontally so people can read them.
This is the issue with almost every poorly designed dashboard. If you Google the word dashboard, you'll see this problem everywhere. Whenever you have diagonal labels, there's a chance that you simply need to flip the chart around. You'll solve 50% of the problems right away.
Most charts either have a horizontal axis or a vertical axis. When should you turn the chart around and use the vertical axis? The rule is very simple. If you're presenting time, like days, weeks, months, quarters, annual time series and so on, just use charts with a horizontal axis. Time goes left to right, and that's it. For everything else, like countries, products, sales channels, profit centers, and so on, always rotate the chart and use charts with a vertical axis.
This is a very, very simple rule that can fix so many of your problems.
Below is a typical example of a chart that would benefit greatly from this quick fix. It's a project dashboard showing planned baseline work versus actual baseline work. It's showing the remaining work by project and not time. In this situation, you should just rotate the chart around and sort from the most important to the least important.
It's really hard to get the number of labels in your dashboards right because you can overdo it or you can fail at presenting the numbers. Take a look at the chart below. It has practically no labels.
Many of the labels are missing and the pie charts are completely without labels or even a legend. We basically have no idea what we're looking at.
You need some labels, otherwise, people will have to hover their cursor all over the dashboard to view each label. Even worse, if somebody prints this or creates a PDF or a PowerPoint presentation all the details of the numbers will be lost. This means you need to get the label density right to keep the dashboard legible in different scenarios.
Let's look at the next example.
Some of the charts have labels while others do not. It's hard to see the reason behind it.
However, there is such a thing as too many labels, where communication is hampered by too much information. Let's look at another example.
This report obviously has way too many labels and they are overlapping, which is something that should never happen. This is a very problematic dashboard that would take a lot to redesign. It tries to compare direct hours to scheduled hours. There is some sort of comparison over time, but the problem is that this is chart is combining a column chart with a line chart on top. This means that every series in this chart has labels that will always overlap.
The next problem that is very common, especially in Power BI, is the time labels.
In this example, the labels are tilted. And this time, we're working with a time series chart showing monthly values but the labels are tilted because they are too long. This chart could be useful but the labels are simply too long.
The solution here is very, very simple. Just use three or four-letter month abbreviations. Simply use Jan, Feb, Mar and so on instead of January, February or March. This will make the problem go away and you will have short labels and present them in a readable, legible way that everybody can read.
Of course, this means that you have to do something in your Power BI model or you have to make sure that your data contains a time dimension. And this time dimension uses abbreviated month names. You need to make sure that you have this in Power BI or all of your charts will look like this. The tilted labels are obviously not okay and it's worth spending 15 minutes or half an hour and fix your time dimension in the model.
Typically, we see this with long month names which is why you shouldn't use them. It also happens when people just put the time and the date-time field into their axes' labels. Some people even use the whole date, for example, 1 January 2018. These are also really long labels that shouldn't be used.
The third mistake is the excessive use of slicers. It's very tempting to use slicers and to overuse them. Let's take a look at a report.
I have seen many dashboards where slicers take almost half of the page. In this case, you're expecting from your users to tick every check-box. It's as if you were blind and tried to see something and in the end after you've clicked everything, something will change on this chart. That is not how dashboards should be designed.
You want to make sure to design for this interaction in a proper way and slicers are not always a good choice, especially if they have a lot of elements. If you have up to five options, it's okay to use a slicer. But if you have more choices, then use a drop down menu, put it somewhere at the top of the dashboard. You should use one drop down menu for each data field or each data dimension.
Alternatively, you can use the space taken up by slicers to display a chart. Instead of having a slicer that lists every state, for example, you can turn the list of states into a chart. People can then use the chart to filter the main chart. The thing is that in Power BI, the chart has almost the same function as a filter. You can click on individual data categories in a chart to filter the whole page. Instead of wasting space on slicers, you can use it to display useful information.
Let's move to mistake number four: Inconsistent use of colors. Color is a difficult topic but having 30 different colors in a report, or even in just one chart is way too much. With so many colors, it will be impossible to read. This is the reason why visuals, such as treemaps or stacked column charts, are very tricky and should only be used with great caution. If possible, replace them with simple bar charts that contain a comparison.
Too many colors is an issue you see in Power BI reports all the time. The dashboards with multiple colors may look really nice. Look at the below example, which actually uses a nice color scheme with slightly de-saturated and balanced colors.
But again, there is too much color here even though there are fewer colors than before. The second problem is that the same color represents completely different things between different charts.
For example, sales is represented by the color blue and on another chart, the same color is used to represent the data category of business flight tickets. On the third chart, the blue color represents yet another data category. This happens if you're assigning colors to every chart completely independently of all the other charts that you have on a dashboard. This usually happens when you are using a color theme and Power BI just applies the colors automatically with no consideration for the context.
The idea behind dashboard design is to achieve consistency in using color. This means that every time a color is used it means the same thing. So how should you go about that?
The first step is to remove pie charts from your dashboard. Then you will not need all of those colors. By switching to a bar chart you will easily get rid of six colors and can just use one.
Colors should be used to tell a story. They should not be applied randomly from a theme.
This chart shows the budget remaining by time. The point here is that if this is budget remaining it actually shows a variance in millions of dollars. Where the results are below the budget, why not use red, and then use green when the results exceed the budget? When you do this, you have a concept behind color usage - green for positive, red for negative.
Let's take a look at an example of this in practice.
Start with some neutral completely de-saturated colors for normal comparisons and then use saturated colors for the variances. This will ensure that the variance is emphasized as the most important part of your dashboards. When you want to show whether things are changing or not and whether they are changing for the better or worse, you use simple and intuitive colors.
In this example, we only used three, maybe four colors: light gray, black or dark gray and red and green for positive and negative variances. It's very simple.
In this chart, the leftmost bar showing the plan is light gray and the dark gray bar is the actual. However, I'm not using a different color for that. Instead, we used a slightly different shape with this outline. Because a plan is like an outline that you steer and then you fill it up with your actuals as you sell your products.
If you follow this principle, your reports will be much clearer. The reader's attention is focused and guided by the color that is applied to the variances. In the example below, your attention is drawn to the chart with a lot of red color, where there is a big variance from the plan. When you see something is performing 33% below the plan, you know something is not okay. So that is where your attention should go.
The same thing holds true for financial statements like income statements. There is no need for too many colors. You can work with a lot of data categories and simply use one or maybe two colors.
Just using a slightly lighter or darker color you can show the difference between the actual year and the previous year. Variance is also very simple to show - just use two colors - green for positive, red for negative values.
And since we're on the topic of variances - in my opinion, mistake number five is the most important. The biggest failure of dashboards that we see is people not showing variances. Skipping variances is simply not OK.
Remember the sales dashboard we looked at at the start of the post? Take another look at it.
There's absolutely no comparison to plan here. There's no plan in this dashboard, and there's no comparison to previous years. While you might be able to discern some kind of a trend here or see some seasonality, you have no idea whether the actual results are good or bad. The main issue here is that you have no way of telling how your business is actually doing.
Let's look at the next attempt.
There is actually some kind of a comparison here, a forecast, baseline costs and actual cost. However, they are displayed in completely separate charts, making it really difficult to compare all these data categories. The main issue is that they are in pie charts making it impossible to understand the scale of individual categories. It's just not a good idea to create your dashboards like this.
This dashboard actually shows a comparison between sales and sales for the previous year or target sales, which the user can change. This is actually a nice concept. However, it fails in terms of visualization. When people compare actuals to budget or actuals to the previous year, they just put them into a side by side chart. This means that you will always see a lot of blue and yellow color. However, what you are actually interested in is the gap between the two.
People turn to different things to go about this. Look at this example:
One way of doing it is to use the traffic lights, shown here on the left. You get red and green, and maybe also yellow. It looks nice but has its own problems. You will always end up with a lot of red, and green and yellow bubbles. The problem is, which one is really important right now? You might apply a simple rule saying that when a value is above the budget, it's green and it's red when it's below the budget. In this case, a category might be marked red if it's just half a percent or just a few euros or dollars below the plan.
This means you don't see the size of the variance and its importance. You could switch to a display where the size of the colored bar shows its importance.
Do not use the gauges or odometers as they are completely overused. They take so much space for just one simple comparison.
You could use the half-circle chart on the right but that still takes up a lot of space. The problem with this visualization is again that it does not visualize the gap. In this example, we are interested in the gap and see that the actual sales were below budget. That gap below the budget line should be in red.
The chart shows that our plan was 200k in sales and should guide your attention there. Visualization should alert you to this.
Let's look at a native visual in Power BI which people use it a lot.
The problem here is that this whole visual is green or red, no matter what the variance is. For example, this is a sales amount and it's accumulated showing year-to-date data. The problem is that if this is a sales versus target chart, there's the target hidden inside but not visible.
Confusing page layouts come in at number six. Just look at this dashboard that is too common in the business world.
There is no way of knowing what you should look at. Too many elements mean you are unable to communicate clearly. While there are some good decisions - interactive elements are on the top, KPIs are on the left - everything else is simply a mess. There is no sense in the order and placement of charts. It feels like the designer just wanted to mash all possible charts onto a single page.
I'd like to give you an idea of a more sensible dashboard.
The number one rule you should follow when designing dashboards is that people read from left to right, and from top to bottom. This means you should always put your most important visualizations and most important KPIs to the left and at the top. In my example, the KPIs are at the top left and details are shown below or to the right.
Particularly if you are designing for senior management, you don't need to include all of these charts. In some cases, they just need short written comments and that's also something that is often missing from dashboards and reports.
This dashboard now brings me to the last dashboard mistake. If you look carefully here you can see that we are using multiple charts of different sizes: one chart for EBITDA, one chart for EBIT, one chart for free cash flow and one chart for net earnings. The interesting thing here is that all of these charts are scaled. This means that the maximum of all the Y axis on all the charts is the same. This is called small multiples and it's a concept of scaling, which is something that is almost completely missing from all Power BI dashboards.
I probably haven't seen any dashboards in Power BI that use proper scaling with multiple charts. In some cases, you need to synchronize the axes and take your dashboards to the next level. That's why we chose the lack of scaling as my last entry on the list of mistakes.
You need scaling every time you put separate visuals on a page or a dashboard. Power BI will always scale them to the maximum amount. Let's take a look at why this is an issue:
You can probably see why this is problematic. Each category is the same size as all the others, even though some display categories are 10 times as large as the others. One chart shows a million, while another shows just 49,000. However, when there is a gap between the actuals and the plan in a category that generates millions it is much more concerning than a gap in a category that generates thousands.
Look at an example made with Zebra BI. All the KPIs are in the same visual. This is only possible in Power BI if you put it in one visual. Unfortunately, the native visuals in Power BI don't have this capability so we used Zebra BI visuals here. With our visual you can simply drag and drop all your accounts onto the dashboard to have all your KPIs displayed and rendered to the same maximum value.
If you want to go from intermediate level Power BI dashboard design to professional, you need to take care of scaling.
To apply what we've learned, we will take dashboard and redesign it into something that's more understandable and easier to read. If you want to learn more, check out the most effective Power BI Dashboard tips and tricks.
We will apply the rules we've set out so far. The first chart is showing store names and the numbers they're achieving. First of all, this chart should not run left to right and we'll switch it around to make it more readable.
I will rearrange the charts - put the two charts showing monthly data can together and make sure their widths match. We are working with two charts - the first one showing sales versus previous year and the second showing the variance in percentage. It would be really nice to have a better way of showing the variance.
Now let's look at the slicer. First, decide whether this dashboard is designed for each district manager. Each manager will just review this dashboard on his own by selecting his name and viewing the data. If this is the case, just turn the slicer into a dropdown menu. This will give you a simple slicer that people will be able to use easily.
Another option is to create a comparison between the district managers. To do this, turn the slicer into a chart by adding sales values for each manager. The next step would be to determine whether these guys are hitting their targets or not. This means it's time for variances.
At this stage of the redesign, we'll break out Zebra BI visuals. We will add a Power Tables visual. Initially it looks the same but now comes the interesting part. We need to see whether these managers are achieving their plan or not. To achieve this, we will add Goal data field to make the dashboard actionable. As soon as we do this, we see all of these guys are below their plan as shown by the red section in their bars.
Next up is store data. Normally, people would use two bars for each store to show actual and budget values. However, in Zebra BI visuals, the variance is calculated and shown either in absolute values or percentages. You should use the labels that are the most intuitive to the end user. In this case, a small chart works with the variance shown in percentage.
The next step is to redesign the third chart. It already has this year's sales compared to last year's. First, we should switch it to a Zebra BI visual to get a completely different chart - a waterfall chart. Once you start visualizing variances, you have many, many options but we recommend you use the waterfall chart. For the first time, this chart shows total sales from January to August and the percentage of variance.
You could also use other options, such as column charts or an area chart which was used originally. To make things even clearer, you could take another chart that shows percentage variance and add it on top. We take the existing visual and switch it to Zebra BI visual and set it to only display the relative variance. You do this by opening the Format panel and selecting Relative variance layout under the Chart Settings menu. On top of that, here's how you can insert a difference highlight with one click.
However, the truth is that using two charts is a bit of a trick. The best approach would be to use the waterfall chart here. This waterfall chart can already present the relative variance in a Zebra BI visual, because it's completely responsive, and it will calculate the relative variance as you expand the chart. Eager to learn more? Dive deeper and master variance reports in Power BI.
The last challenge is really difficult. We're talking about the bubble chart that shows sales variance and other things. We believe that it is probably too much for a regular user. When you design a dashboard, you should always keep your user in mind. In our case, this dashboard already has a lot of information on one page, but we are working with what was on it.
The first step is to reduce the color of the bar of this bubble chart. We recommend that you try to use completely neutral colors. In my case, the bubbles are now light grey and we have added a reference line here showing the sales variance in percent. So, now everything to the left from this is under-performing categories and everything to the right is good. Now you have at least some reference point that you can compare against and understand these bubbles a little bit better. This minimalist approach works shows data better.
Here is the end result of this quick redesign that fixed common dashboard mistakes.
When designing your dashboards, put yourself in the shoes of your users. While fancy colors and charts might look impressive, they do not always convey the most actionable and understandable information. Focus on getting the basics right: labels, colors. chart selection, variances and scaling. This will help you get the best results every time.
To conclude, the principles we were trying to demonstrate as going through all the dashboards are compiled in an international standard that is called IBCS (International Business Communication Standards). IBCS is a really, really nice collection of best practices in data visualization for business data visualization, for finance, sales dashboards, marketing dashboards and others.
Thanks for checking out our blog post! I’m part of the Zebra BI team, and I just wanted to jump in and share something. If you’re looking to start making actionable reports, we’d love for you to try our product for free (Free Zebra BI version)!
And here’s a little something extra: use this link to get a special 10% discount if you sign up.