Dashboard design

Dashboard Design Concepts

Olga Scrivner, PhD

President, Scrivner Solutions Inc

Why design is important?

 

  • Company: NASDAQ
  • Needs: communicate every day's market to the average investor
  • Solution: a real-time single value display at Times Square

 

Why trend lines are not the best solution?

 

stock exchange

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
Dashboard Design Concepts

Why design is important?

 

  • Company: NASDAQ
  • Needs: communicate every day's market to the average investor
  • Solution: a real-time single value display at Times Square

 

Why trend lines are not the best solution?

 

stock exchange

 

Historical insights versus real-time indicators

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
Dashboard Design Concepts

Design components

                Audience

  • Who will be using this dashboard?
  • What are their needs?
  • What format is suitable for the audience?
  • How often will it be accessed?

  audience

                        Components

  • Purpose: exploratory versus explanatory
  • Format: horizontal versus vertical
  • Layout: grid versus flex
  • Visuals: values, dimensions, shapes

 

components

Dashboard Design Concepts

Dashboard purpose

              Exploratory dashboard

exploratory dashboard

An exploratory dashboard allows users to explore data.

                    Explanatory dashboard

explanatory dashboard

An explanatory dashboard provides users with predefined insights.

Dashboard Design Concepts

Exploratory dashboard

 

exploratory dashboard

 

 

  • Filters for custom data segmentation
1 Baucke, Spencer. (2022). Dashboard design essentials.
Dashboard Design Concepts

Exploratory dashboard

 

exploratory dashboard

 

 

  • Filters for custom data segmentation
  • Customizable navigation panels
1 Baucke, Spencer. (2022). Dashboard design essentials.
Dashboard Design Concepts

Exploratory dashboard

 

exploratory dashboard

 

 

  • Filters for custom data segmentation
  • Customizable navigation panels
  • Drill-down for more granular view
1 Baucke, Spencer. (2022). Dashboard design essentials.
Dashboard Design Concepts

Exploratory dashboard

 

exploratory dashboard

 

 

  • Filters for custom data segmentation
  • Customizable navigation panels
  • Drill-down for more granular view
  • Interactive visuals (hover-over, tooltips)
1 Baucke, Spencer. (2022). Dashboard design essentials.
Dashboard Design Concepts

Explanatory dashboard

 

explanatory dashboard

 

 

  • Data is often already filtered
  • Predefined storyline
  • Presentation to executives
  • A call for action
1 Baucke, Spencer. (2022). Dashboard design essentials.
Dashboard Design Concepts

Dashboard size

                      Physical space

  • Monitor size - a diagonal screen distance

      Desktop, laptop, tablet, mobile devices

monitor size

Dashboard Design Concepts

Dashboard size

                      Physical space

  • Monitor size - a diagonal screen distance
  • Screen resolution - the number of pixels and their density (width x height)

                          Format

  • Standard format - a rectangular dashboard

    • Ratio - 16:9 ratio
    • All components visible on a screen
    • No scrolling

  • Long format - horizontal or vertical

      Desktop, laptop, tablet, mobile devices

monitor size

                Horizontal (timeline style) long format

Dashboard Design Concepts

Dashboard size

                      Physical space

  • Monitor size - a diagonal screen distance
  • Screen resolution - the number of pixels and their density (width x height)

                          Format

  • Standard format - a rectangular dashboard

    • Ratio - 16:9 ratio
    • All components visible on a screen
    • No scrolling

  • Long format - horizontal or vertical

      Desktop, laptop, tablet, mobile devices

monitor size

                Vertical (newspaper column style) vertical format

Dashboard Design Concepts

Dashboard layout

                  Grid system grid system

  • Two-dimensional matrix
  • Balanced and symmetrical
  • Simple navigation
  • Big Aggregate Numbers (BAN) - top row

                                Focus

F focus

F focus

1 Baucke, Spencer. (2022). Dashboard design essentials.
Dashboard Design Concepts

Let's practice!

Dashboard Design Concepts

Preparing Video For Download...