Dashboard Design

Why does dashboard design matter?

  • The fundamental premise of business dashboards is the simplification of information through data visualizations.
  • Dashboards are used in the context of business as a data management tool to track KPIs, metrics, and other key data points.
  • Effective communication means that at a glance users are able to comprehend current performance--information that otherwise would have been hidden under layers of complex data sets.

Dashboard Design has to be:

Clear. Meaningful. Consistent. Simple.

The most important questions to ask before building your dashboard

The most important questions to ask before building your dashboard banner
  • Who is the audience?
  • What information do they need?
  • What do they already know about the metrics?
  • What are their experiences with data?
  • What are their prejudices in terms of visualizations and colors?

Dashboard Design Best Practices

Dashboard Design Best Practices

Create Multiple Dashboards for Different Areas of Business

Create Multiple Dashboards for Different Areas of Business banner
  • Creating multiple dashboards ensures users will be able to quickly access the KPIs and metrics because they will be organized in relation to one another.
  • Strategically plan different dashboards for different departments, campaigns and projects.
Dashboard Design Best Practices

Add Comparison Values

Add comparison values banner
  • Comparison values are the values that add context to current numbers by comparing current numbers to either historical values or to targets.
  • Adding comparison values in visualizations is critical in that quick differentiation between good and bad performance
  • If it’s difficult to come up with a meaningful comparison value for a given metric, then it is unlikely that anyone will need to act on it if it changes - which means it doesn’t belong on your dashboard.
Dashboard Design Best Practices

Dashboard Layout

Dashboard layout banner

Dashboard Layout must follow the following design principles:

hierarchy icon

Hierarchy

  • Size: big
  • Shape: clarity
  • Placement
  • Colour: What stands out is read
Proximity icon

Proximity

  • Grouping: Says what belong together
  • Spacing: Enough so it doesn’t look cluttered, but not too much
Contrast icon

Contrast

  • Colour: To make something stand out
  • Size: Big to make something stand out
  • Weight: Bold to make something stand out
  • Texture
Alignment icon

Alignment

  • All text should be left aligned is best practice
  • All Klips should be in line with each other
Repetition icon

Repetition

  • Reuse of ideas and elements to create a theme
Dashboard Design Best Practices

Choosing the Right Visualizations

Choosing the right visualizations banner
line chart icon

Line Charts - Time Series Oriented

  • Highlights trend, patterns or variability
  • Highlights relationships between series
  • Trend lines & projections can be added
bar chart horizontal icon

Bar Chart Horizontal

  • Long labels
  • Pattern comparisons
  • Long-ish lists
bar chart vertical icon

Bar Chart Vertical

  • Goups with groups
  • Highlights relationships between series
bar chart hybrids icon

Bar Chart Hybrids - Charts and Tables

  • Great data-ink ratio
  • Pattern comparisons
  • Effective mixing of charts and values
pie chart icon

Pie Chart - Part to Whole

  • Only works with small sets
  • Hard to visually quantify
  • A lot of space for not much data
gauge icon

Gauges

  • Effective for setting targets
  • Best for continuous process
maps icon

Maps

  • Great for demographics
  • Useful in showing regional components
Dashboard Design Best Practices

Properly Using Colour

Properly using colour banner
  • Always use desaturated colours for visualizations
  • Use saturated colours to draw users attention to changes (i.e. indicators)
  • Be consistent with use of colour for the same item on different charts for categories that have an inherent sequence or relationship (time, risk levels, grade levels, lead progression etc.), you can make it easier for users by using the same hue (blue, for example) for all items, but varying the intensity of the hue (see example below).
  • Use traffic light colours (red, green, yellow) sparingly. Only major problems and opportunities in the data should be red or green, so that they pop out. Yellow typically means neither good or bad, meaning that it’s not that important to users. But using yellow will draw a lot of unwarranted attention and make the dashboard a lot busier.
Dashboard Design Best Practices

Easy-to-read Information

Easy-to-read information banner
  • Establish and implement a limited set of consistent symbols for easy reading.
  • Use a composite score: combines metrics that your end user associates with one another to come to an overarching conclusion.

Designing Dashboards for Different Displays

mobile and tablet display banner

Mobile and Tablet

  • Minimum text
  • Shortened Klip titles
  • Use menus and filters to simplify complex data sets
online browsers display banner

Online browsers

  • Fixed pixel width for Klips so they’re responsive
tv display banner

TV

  • Trim content to make it easy to view from afar
  • Save space:
    • Remove chart axis labels if they are implied or redundant
    • Shorten axis tick mark labels, and put them on a diagonal
  • Fixed pixel width for Klips so they’re responsive