Dashboard Design Best Practices

1. Required Slide SESSION CODE: BIO204 Dashboard Design Best Practices Dan Bulos President Symmetry Corporation

2. Metaphors Go Only So Far Monitors a Continuous Process At a Glance Gauge Oriented

3. Reporting Spectrum Managed Analysis Dashboards Tables, Crosstabs, Charts, Graphs P r o d u c t i o n D i s c o v e r y Ease of Development & Usage Paramount Customization & Distribution Alternatives Depth & Quickness of Analytics Parameter Driven Interactive Navigation Highly Formatted Advanced Visualization Guided Analytics Line Developed Staff Developed Programmer Developed

4. Dashboard Definition Visual Display of the most important information needed to achieve one or more objectives which fits entirely on a single computer screen so it can be monitored at a glance Information Dashboard Design By Stephen Few

5. What Makes a Good Dashboard Some are Better Than Others

6. Definitions - MMK • Measures • Operating data • Atomic or Aggregated • Metrics • Measures compared • vs. Budget/Last Year/Sales/Average • Key Performance Indicators (KPI) • Measures/Metrics scored • What is good, bad, or acceptable • Business Process/Responsibility

7. Smart KPIs S Specific – Clear on what is being measured Measurable – Accurate and consistent Actionable– Influence to alter the outcome Relevant– Significance and leverage Timely – Appropriate intervals M A R T

8. Dashboard - Best Practices

9. General Design Considerations “Single Page” “Graphical” Displays Patterns Abstract Data Minimal Grids No Scrolling Nothing Hidden Linked Content Better Dashboard Design All Relevant Info One Place to Look Not Data Driven Domain Aware Leverages Knowledge “Disparate Data” “Guided Analytics”

10. Key Data/Metrics in Context • Key Data/Metrics • High level performance metrics • Generally tied to goals and bonuses • Focus on actionable data • Disparate sources • Context • The 3Ts = Target, Trend, Typical • Similar/Related Data/Metrics • Basis for interpretation

11. Dense, not Cluttered • Dense Information • All relevant data/metrics • Different perspectives • Not Cluttered – “At a Glance” • It is not how much, but how well • Easy to view, not an eye chart • Data-Ink Ratio ( ) • Non-essential ink should be removed • Supporting ink (axis lines) = low visual impact The Visual Display of Quantitative Information Edward R. Tufte

12. Zero Learning Curve • Dashboard viewing is not a person’s job • Oriented at casual users, line mgt, & execs • Little/No accumulated experience • Each viewing is the first time • Dashboards are not analytical tools • But they provide guided analytics • Targeted to a Person/Role/Problem Set

13. Exception Oriented • Outliers should POP out • Highlight Both • Problems • Opportunities • What is an Exception? • > 1 Std Dev, 2…. Five9s • When action needs be taken Visual Cues Color Size Shape Boldness Position Icons

14. Supporting Detail Dashboards are not an end unto themselves Associated Layers Guided Analytics Contextual Content Updates Update Dashboard Webparts Links to New Pages Hierarchical Drill-Down Root Cause Analysis Ad Hoc Analysis Detail Reports

15. Dashboard Components Diagrams Scorecards Grids Charts Gauges Maps Tree Map Decomp Tree And So Much More……

16. First a Word on Color • Use Color Sparingly – Generally Soft Colors • Highlighting – Bold Colors • Different Colors = Different Meaning • Try shades of grey • Use a Single Hue • Increase the intensity for low to high values • Remember - 7% of men are color blind A dashboard is not a painting Usefulness is Paramount

17. Grids • When to use: • Values are familiar • Need to lookup a value • Small differences are important • Mixed units of measure • Design Considerations • Try to keep square-ish • Comparisons are done by column • Limit length with Top/Bottom

18. Grid Embellishments • Highlights • Items of interest • Data Bars • Helpful to read magnitude • Color Scales/Icons • Can overwhelm the data • Arrows • Used for change over time Icons are best used to: Replace data to save space Show variance or score

19. Scorecards • Are a special type of grid • Created for KPIs and Objectives • Can be methodology oriented • Balanced Scorecard, 6 Sigma, … • Used as a navigation aid • A list with data Scorecards are less about data and more about process

20. Catalog Audited Accurate Approved Data Measures Scorecards Score End-To-End Business Logic Budget Plan Forecast Benchmarks Perspectives Tolerances Objectives Processes Derivation Initiatives Metrics KPIs Organize Navigation

21. Basic Charts • Lines Charts – Time Series oriented • Highlights trend, patterns or variability • Highlights relationships between series • Trend lines & projections can be added • Bar Chart – Comparison Oriented • Categorical comparisons within a dimension • Nominal comparisons across data (sales to cost) • Pie Charts – Part to Whole • Only works with small sets • Hard to visually quantify • A lot of space for not much data http://www.symcorp.com

22. Interlude: Form vs. Function If the dashboard is not visually appealing, people will not go to it 1 Page – 6#s If the dashboard is not effective and practical, people will not use it Pretty Yes! Useful? Use Carefully Bright Colors Animation Pie Charts Gauges 3D Charts What is fun the first time Might be boring the 100th time Too Dense?

23. Bar Charts • Horizontal • Long labels • Pattern comparisons • Long-ish lists • Vertical • Groups with in groups • Stacked and 100% Bars • Pareto Charts • Doesn’t work for large numbers of groups • Bars are easily drilled into

24. Hybrids – Charts in Grids Effective Mixing Of Charts & Values Great Data-Ink Ratio Trellis Charts Small Multiples Introduction of Sparklines & Bullet Graphs

25. Bullet Graphs A bullet graph is a variation of a bar graph developed by Stephen Few. Seemingly inspired by the traditional thermometer charts and progress bars found in many dashboards, the bullet graph serves as a replacement for dashboard gauges and meters Symmetry’s Variation Sales Costs Black Bar = Value Green/RedBar = Target Blue Pointer = Last Year

26. Maps Useful in showing regional components Maps are great for demographics Maps are highly specialized Impact grids can be effective Be careful of charts within a map

27. Gauges Flashy, Showy, Attention Getting When using a set of gauges expected value should be straight up Hard to set gauge scale for the general case Best for continuous process Poor Data-Ink Ratio

28. Diagrams Process Diagram Balanced Scorecard Strategy Map Diagrams are underutilized Graphical Representations Impact Diagram Root Cause/Fishbone Diagram

29. Graphical Excellence • Show the data • Focus on the substance of the numbers • Don’t distort the data • Present many numbers in a small space • Encourage comparisons • Show data in several perspectives The Visual Display of Quantitative Information Edward R. Tufte

30. Screen Layout • Number of Frames • Up to 4 is good, no more than 6 • Frame Proportions • Size = implied importance • Uniform otherwise • Location • Top left = primary focus • Bottom right = supporting detail • Off page = irrelevant • Printing • The dirty little secret

31. Frame Options • Different frame on same page • Must fit on the page • Can drill from here to new page • New page in same browser • Easy to get back • Full page available • New browser tab/window • Allows for comparisons • Users must close windows/tabs

32. Navigation Framework A tiered set of dashboards based on role or function A set of grids, graphs, or visualizations that examine a single metric A set of detailed reports or ad-hoc analytics http://www.symcorp.com

33. Navigation • Identify the key dimensions for the metric • Customer, product, department • Drill into one or more of these • Top 10 rankings • Identify the audience • Marketing manager – Drill to product • Sales Manager – Drill to customer

34. Navigation - What to Show

35. Microsoft Software Components • Reporting Services • Formal report view • Highly formatted • Performance Point Server • Analytical Charts and Graphs • Less control over format • Built in Slice and Dice • Excel Services • Shared user-created content • Fast changing

36. Summary • Choose the right visualization for the data • Simple is better • Conserve your screen real estate • Use color to highlight • Put focus on the data not the decoration

37. Resources • Show Me the Numbers: Designing Tables and Graphs to Enlighten • Stephen Few • Information Dashboard Design: The Effective Visual Communication of Data • Stephen Few • The Visual Display of Quantitative Information, 2nd edition • Edward R. Tufte • http://www.perceptualedge.com/ • http://dashboardspy.com/ • Symmetry Corp – www.symcorp.com

38. Questions?

39. Required Slide Resources Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers • http://microsoft.com/technet • http://microsoft.com/msdn

40. Required Slide Complete an evaluation on CommNet and enter to win!

41. Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st http://northamerica.msteched.com/registration You can also register at the North America 2011 kiosk located at registrationJoin us in Atlanta next year

42. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

43. Required Slide