Data Visualization & Dashboard Design Best Practices and Tips

Understanding the User is the Key to Designing User-Centric

Analytical Dashboards

What is user-centric design?

User-centric design is…Catered specifically to the needs and requirements of a user or a type of user.

Through requirement gathering and an understanding of the tasks and needs of a user, a design should be catered to the specific needs of the user.

What is user-centric design?

User-centric design is…Predictable, and consistent in its behavior and style.

This minimizes the learning requirement for users. Individual parts of the product are created as a system, not as separate “pages”

What is user-centric design?

User-centric design is…Simple and natural dialog, stripped down to the minimum essentials.

This reduces unnecessary effort by the user. Messages and instructions should use the vocabulary of the intended audience. Terminology, colors, etc., should be defined and always has the same meaning.

What is user-centric design?

User-centric design is…Accessible navigational systems that are easy to use.

Both vertical (ie: breadcrumbs, drilling, etc) and lateral navigation (ie: switching between sections) should be easy to understand, to prevent the user from getting lost.

Understanding the User

…role? ...work flow?

What decisions does the user make?

What questions do they need answered?

In what context will the dashboard be viewed?

What are the user’s next steps after viewing the dashboard?

What is the user’s…

Determines:How information should be structured to prioritize the

most critical answers.

Determines:How the dashboard will fit into a user’s process.

Designing Focused, Thoughtful Dashboards

3 steps to build focused, thoughtful dashboards

Format

Structure

Functionality

In what device or medium is the dashboard delivered or used?

How is the dashboard laid out to help users understand the big picture?

What capabilities will help users understand and interact with the data?

3 steps to design focused, thoughtful dashboards

Step 1 – Format

Format: How a Dashboard is DeliveredConsiderations for determining the format

Step 1 – Format

Format: How a Dashboard is DeliveredConsiderations for determining the format

Step 1 – Format

Format: How a Dashboard is DeliveredResponsive design kills platform-specific design constraints

Step 1 – Format

Format: How a Dashboard is DeliveredResponsive design kills platform-specific design constraints

Step 1 – Format

Format: How a Dashboard is DeliveredResponsive design kills platform-specific design constraints

Step 2 – Identify the structure

Design in the absence of content is not design, it’s decoration.

Step 2 – Structure

Structure: How a Dashboard is Laid Out

Gradual Reveal

The user is able to follow a logical progression of analysis, usually by first selecting a metric, and then by exploring additional context.

Contextual clues help guide the analysis via thresholding within the data.

Subsequent selections beyond the first metric selection will filter and narrow the data.

Step 2 – Structure

Structure: How a Dashboard is Laid Out

Relationship

Emphasizes the relationships between entities or measurements.

Relationships or connections may be mathematical, geographical, organizational, or functional.

Step 2 – Structure

Structure: How a Dashboard is Laid Out

Scorecard

Provides easiest “at a glance” indication of where problems are located, making it easy to identify the most critical path of analysis.

Provides an overview snapshot, keeping the interface simple, uncluttered and inviting. Each scorecard has the ability to link out to a separate page for additional detail and context.

Step 2 – Structure

Step 2 – Structure

Step 3 – Functionality

Functionality: Helping Users Interact with DataPower and control through meaningful micro-interactions

Filters Navigation Alerts Collaboration

Users can define the scope of the data displayed

within the dashboard. Can be organizational, geographical, time

parameter, etc.

Lateral navigation moves to different dashboards,

vertical navigation moves forward or backward within a singular path.

Information is highlighted based on pre-defined criteria or thresholds.

Encourages the user to share their findings –

export to Excel, share a PDF, or annotate directly

over a dashboard.

Dashboard Design & Data VisualizationBest Practices & Quick Tips

Picking the right graph type

Do I want to compare values?

Picking the right graph typeFive questions to narrow down the options

Am I showing composition?

Do I want to understand distribution?

Do I need to analyze trends?

Should I understand

relationships between sets?

Picking the right graph type

Picking the right graph typeComparing one or many data sets

Bar Graph Radar Graph Bullet GraphCircular Area Graph

Picking the right graph type

Picking the right graph typeDisplaying the composition – how individual parts make up a whole

Pie Chart Stacked Area GraphStacked Bar Graph

Waterfall Graph

Picking the right graph type

Picking the right graph typeUnderstanding distribution – identify outliers and range of values

Box & Whisker Plot Scatter Chart

Picking the right graph type

Picking the right graph typeAnalyzing trends – how data changes over time

Line Graph Dual-Axis Line & Bar Graph

Picking the right graph type

Picking the right graph typeDisplaying relationships between data sets

Bubble Chart Chord Graph Mosaic Graph

Typography

Typography

Typography

Typography

Color

Color Selection in Data Visualizations

SequentialValues are ordered

from low to high

DivergingTwo sequential color schemes

extending out from a midpoint value

CategoricalRepresents distinct groups, so use high contrast between adjacent colors

Color

Color

Color

Further reading

Stephen Few Edward Tufte