Dashboard Design Best Practices

1 Grouping Information
White Space Borders Alignment

Use white space to group elements Use borders to group elements Use alignment to group elements

Dashboard Dashboard Dashboard Dashboard Dashboard Dashboard

Progessive Disclosure Visual Cues

2 3
Disclose information in chunks across Clickable elements must feature on- Do buttons look like buttons and not
multiple pages. hover formatting like regular text?

Page1

Title BUTTON BUTTON

Filtering
4
Page1

Title

Page 2 Filters must be placed in the same area Is it made clear when a filter is
Title across different pages active?
Page 3

Title

Page1 Page1

Page 2 Page 2

Mental Models Page 3 Page 3

5
Structure task flows in your design to
mirror users' real-world processes.

If your users follow a specific is the filter pane visible when opening Did you limit the filter options by
sequence of steps in their daily the dashboard? filtering upstream
tasks, align your design accordingly
to reduce cognitive load.

Align your layout and structure with Title Title

previous dashboards FILTER PANE HIDDEN

CLICK BUTTON TO OPEN FILTER PANE
DEFAULT OPEN
CAN HIDE ON COMMAND

Process Dashboard

PAGE1
ACTIVITY 1
Page Navigation
6
PAGE 2
Page navigation pane should be located Keep the navigation pane visible and
in the same spot across pages make the user's location clear
ACTIVITY 2

Page1
Page1

Title
Title
PAGE 3
Page 2
Page 2

ACTIVITY 3 Title Title

Page 3
Page 3

Title Title

Load Time & Scrolling

7 Ensure no scrolling is Page navigation pane should always be Page names on navigation pane
needed to view info visible when the user opens the dashboard should match the page title
on one page
SALES OVERVIEW
Dashboard
NAV. PANE HIDDEN
>5s <5s CLICK BUTTON TO OPEN NAV. PANE
DEFAULT OPEN

Follow @Kobe Wastiels for more Data Visualization content

 Dashboard Design Best Practices
8 Color Eliminating Unnecessary Pixels
9
Did you use grey or saturation to create a visual hierarchy? Did you eliminate decorative Did you remove unnecessary
graphics? special FX?
Dashboard Dashboard

Sales Sales

Dashboard Dashboard

Have you used color consistently? Did you take color blindness Did you merge axis where possible? Did you get rid of unnecessary
Within and across different pages and contrast into account? borders and backgrounds?

Page 1 Page 1 1 2 3 4 5 7 8 1 2 3 4 5 7 8
Sales Costs Sales Costs
Sales Sales
Page 2 Page 2

Costs Sales Sales Costs

1 2 3 4 5 7 8

Contrast Contrast

Organizing Charts and Pages

10
Did you respect the 3-30-300 rule? Did you follow the Z-shape pattern?
Same Dashboard Page
Understand the main message in 3 seconds The Z-pattern guides eyes efficiently, prioritizing
Get a deeper understanding of the data in 30 seconds important data on the top left, less important elements
Show me the detailed data 300 seconds Across Dashboard Pages bottom right

Same Dashboard Page

Detail - 300 General - 3 Less important Important
Detail - 300 General - 3
30 30
30 30
General - 3 Detailed - 300
General - 3 Detail - 300
Important Less Important

Dashboard Functionalities
11
Did you configure tooltip information where needed or If in depth exploration is needed, did you Do drill down/up functionalities lead to
enhance the tooltip with tooltip pages? use a drill through page? relevant information for the consumer?
Does not override
information on the same
page that is supposed to A deeper level of
be consumed at the granularity of data is
same time as the required.
information on the Additional charts on more granular
tooltip information
The information should not be
Tables and visuals should not be consumed simultaneously with other
Information is used for quick consumption. consumed simultaneously with the levels of granularity of the same visual
Text & Numbers are readable information from the page where the
Extra granularity is in line with the
No scrolling needed to see all information drill through has been performed.
dashboard goal

12 Instructions for Dashboard Functionalities 13 Visual Font Hierarchy

Have information buttons and annotations been added? Is the importance of text made clear through size or saturation?

Left-click to filter Explain how to use

chart functionalities Title Title
Title
Subtitle Subtitle
Title Annotation
Title
Annotation

Title
Subtitle
Right-click to drill Hover over for additional Sub Title Sub Title
Annotation
Subtitle
Annotation

Title Title
through information Annotation Annotation
Subtitle
Annotation
Subtitle
Annotation

Follow @Kobe Wastiels for more Data Visualization content

 Chart Design Best Practices
1 Color Eliminating Unnecessary Pixels
2
Did you respect the company’s Did you use grey to push Did you get rid of unnecessary Did you remove unnecessary
color symbolism? back elements? borders and backgrounds? special FX?

4k 4k
3k 3k
2k 2k
1k 1k
Good Bad Good Bad

Did you limit the number of colors Did you take color blindness Did you eliminate or push back Did you erase unnecessary
used? into account? gridlines? detail?

1.385.687 1.4M

Did you use more saturated colors Did you take contrast into Did you eliminate or push back Did you remove repeating text,
for more important categories? account? gridlines? values and axis titles?
in case you can’t reduce the numbers of colors Axis titles should be clear from title

Revenue by category Revenue by category

Revenue $
Title Title 3 4 3 4 4000$ 4k
2 2 3000$ 3k
1 1
2000$ 2k
1000$ 1k
Category

Emphasizing Important Datapoints Simplify Grouping Series & Splitting Charts

3 4 Totals, series and margin Totals + Margin Grouped Series
Color Added Marks Shape or Size Enclosure

Labels & Tooltips Text

5 Options Formatting 6
Axis Only Axis + few All On Avoid Axis Rotation Cut-off Title
Datapoints Datapoints demand and all labels
4 4 4 2
Sub Title
3 2 3 1 One 1 Twenty... 21
1 1
2
1
2 Annotation
Two 2 Twenty... 22
Twenty... 23
e

o
On
Tw

Shape is important Shape is important Shape is important Shape is the only There is no need to Switching from a Title
Individual Values Only a few individual All individual values priority. show both axis and vertical bar chart to Twenty-one 21
less Important values are important. are important. Tooltips provide all labels. a horizontal bar Sub Title
Can be combined Can be combined with Often the default individual values, but Choose one of the chart can help you Twenty-two 22 Annotation
with tooltips tooltips for missing approach are no priority. previous options achieve this result.
labels Twenty-three 23

Creating Context Measure Short Term Memory Optimization

7 8 9 Labeling Using Colors
Time Benchmark Goal/Statistics
Comparison
2 2% Series Directly in Title
1 1%
Revenue of 2022 vs 2023

Time 1 Time 2 You Them Actual Measure A A

Does your user need:
Year over Year Industry Budget B
Quarter over Quarter Competition Forecast C B
percentages
Month over Month Business unit Average integers
Compared to previous External VS internal Median both C
Year/Month/Quarter

Sorting & Ordering Avoiding Misleading Visuals

10 Nominal Ordinal,
11 Truncating Irregular Intervals Excess Scale Cumulative to show Cherry picking Correlation
Axis Trend
interval or Ratio 4 100
4 4 Causation
3 3
2 2
1 1 3 0
1 3 8 7 8
4 20
Sort: Small to Large Scale decides order of
variables 0 0
1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

Follow @Kobe Wastiels for more Data Visualization content