Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
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