Putting it All together: Dashboard Design Tips

#baddesign #dataviz #uidesign

A complete guide that will help BI developers create Powerful dashboards.
At the top, we can see KPI cards, pie chart and slicers in tile form are scattered around. It seems that elements with different purposes are visually together on the same level and we perceive them together ,which can be confusing.
The table seems to be placed there at the last moment, roughly compressing the column chart whose labels become rotated and dispro-portionately compressing the line chart showing sales dynamics.
The visuals have different proportions,backgrounds and borders, with uneven spacing between them thus creating a sense of chaos.
The Visuals also shows lack of organization, a failure to separate elements into logical blocks.
To Fix this we will get a version where the same visualization are arranged in a logical structure from general to specific look at the image below. It is quite sufficient for corporate reporting.

Making the same dashboard more attractive.

Change the standard cards to new ones with category labels at the top and align all elements to the left edge.
Add the planned value to the first card.
Apply conditional formatting to the deviation indicator in the card.
Apply the same font style to all the charts and the table.
While working with the table: the header in the previous version(the table header is not the same as the title).
Applied the conditional formatting to the cell background for the average price indicator to highlight the highest prices; formatting minimum values with a different background color.
Set the background of the main part or set it to the background color of the block.
Also add a separator line for the header row and totals.
Align all the totals in all the columns exactly below the values (performed in the specific column setting for each indicator separately)
Finally the set the background for the page.
Place a block shape below the header row to highlight it against the background.
After Finalizing on those we get this dashboard

The dashboard is divided into several zones, each designated for specific purposes and charts.

a. Header(level zero)

This includes the title, navigation buttons and individual slicers( or a button to invoke the slicer panel)
The header can also contain the company logo, report generation date, and other common elements related to the entire dashboard.

b. The first level -KPIS

Here the cards are placed. The rule is that we always start the dashboard with card at the top and only cards.
Remember that the uses will need to pay attention to the most important information(main KPIs) first and add details to the KPIs

c. The Second level- Visulaized subtotals,trends

Below the cards on the upper half of the working area.The high level visualizations, categorized by items such as regions and timelines.These visuals also serve as filters and clicking on a column reveals details about it on the next level.

d. The Third level - Details

In this section we present more granular data usually in tables with conditional formatting.

Below is a dashboard information level scheme that guides on how to create a good dashboard.

It may seem obvious but not everyone adheres to it. I recommend placing no more than six cards at the top as they are key indicators. Do not overload the section , like the image below shows.

Instead have the KPIs follow the rule below ...

The workspace refers to the page area below the cards, where the tables and charts do sit.The grid is the division of the workspace into blocks(modules) where we place visual elements.
A symmetric grid should be achieved. The Image below

The most second popular grid for a dashboard consists of six modules which we call the 3X2 meaning three columns plus two rows.The image below shows the grid layouts

The image below shows an example of a 3X2 grid.The visual shows three visual elements in its workspace but the chart on the left the sales plan execution chart. The chart is well stretched vertically and occupies two modules while the sales dynamic chart and the table on the right are stretched horizontally and each occupy two modules.
The KPIs cards are also well postioned and grouped into three blocks, they are positioned according to the modular grid and aligned relative to the charts below them.

Under the View tab you will find the various premade color theme options. When you click one of them, all the visuals elements on all the report pages will automaticlly adjust to match the selected theme.
Remember the company/corporate colors(brand book) are often used as the working palette.

I conclude the dashboard assembly.