Data Visualization & Dashboard Design Best Practices and Tips

Understanding the User is the Key to Designing User-Centric Analytical Dashboards

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. What is user-centric design?

What is the user s role? What decisions does the user make? What questions do they need answered?...work flow? In what context will the dashboard be viewed? What are the user s next steps after viewing the dashboard? Determines: How information should be structured to prioritize the most critical answers. Determines: How the dashboard will fit into a user s process. Understanding the User

Designing Focused, Thoughtful Dashboards

3 steps to design focused, thoughtful dashboards Format In what device or medium is the dashboard delivered or used? Structure How is the dashboard laid out to help users understand the big picture? Functionality What capabilities will help users understand and interact with the data? 3 steps to build focused, thoughtful dashboards

Format: How a Dashboard is Delivered Considerations for determining the format Step 1 Format

Format: How a Dashboard is Delivered Responsive design kills platform-specific design constraints Step 1 Format

Step 2 Identify the structure Design in the absence of content is not design, it s decoration.

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

Functionality: Helping Users Interact with Data Power 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. Step 3 Functionality

Dashboard Design & Data Visualization Best Practices & Quick Tips

Picking the right graph type Five questions to narrow down the options Do I want to compare values? 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 type Comparing one or many data sets Bar Graph Circular Area Graph Radar Graph Bullet Graph Picking the right graph type

Picking the right graph type Displaying the composition how individual parts make up a whole Pie Chart Stacked Bar Graph Waterfall Graph Stacked Area Graph Picking the right graph type

Picking the right graph type Understanding distribution identify outliers and range of values Box & Whisker Plot Scatter Chart Picking the right graph type

Picking the right graph type Analyzing trends how data changes over time Line Graph Dual-Axis Line & Bar Graph Picking the right graph type

Picking the right graph type Displaying relationships between data sets Bubble Chart Chord Graph Mosaic Graph Picking the right graph type

Typography

Typography Typography

Typography

Color Selection in Data Visualizations Sequential Values are ordered from low to high Diverging Two sequential color schemes extending out from a midpoint value Categorical Represents distinct groups, so use high contrast between adjacent colors Color

Stephen Few Edward Tufte Further reading