Data Visualization & Dashboard Design Best Practices and Tips

Transcription

1 Data Visualization & Dashboard Design Best Practices and Tips

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

3 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?

4 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?

5 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?

6 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?

7 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

8 Designing Focused, Thoughtful Dashboards

9 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

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

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

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

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

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

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

16 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

17 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

18 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

19 Step 2 Structure

20 Step 2 Structure

21 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

22 Dashboard Design & Data Visualization Best Practices & Quick Tips

23 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

24 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

25 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

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

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

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

29 Typography

30 Typography Typography

31 Typography

32 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

33 Color

34 Color

35 Color

36 Stephen Few Edward Tufte Further reading