at a glance monitors a continuous process gauge oriented
TRANSCRIPT
Dashboard Design Best PracticesDan BulosPresidentSymmetry Corporation
SESSION CODE: BIO204
Metaphors Go Only So Far
At a Glance
Monitors aContinuous
Process
GaugeOriented
Reporting Spectrum
Discovery
Production
ParameterDriven
AdvancedVisualization
HighlyFormatted
Tables, Crosstabs, Charts, Graphs
Managed AnalysisDashboards
Ease ofDevelopment
& Usage Paramount
Customization & DistributionAlternatives
Depth & Quickness
of Analytics
Guided Analytics
ProgrammerDeveloped
LineDeveloped
StaffDeveloped
InteractiveNavigation
Dashboard Definition
Visual Displayof 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 DesignBy Stephen Few
What Makes a Good DashboardSome are Better
Than Others
Definitions - MMKMeasures
Operating data Atomic or Aggregated
MetricsMeasures compared
vs. Budget/Last Year/Sales/Average
Key Performance Indicators (KPI)Measures/Metrics scored
What is good, bad, or acceptableBusiness Process/Responsibility
Smart KPIs
Specific – Clear on what is being measured
Measurable – Accurate and consistent
Actionable– Influence to alter the outcome
Relevant– Significance and leverage
Timely – Appropriate intervalsTRAMS
Dashboard - Best Practices
Single Page Graphically
Oriented
Key Data/Metrics
In Context
Zero Learning Curve
Highlight Exceptions
Access to Supporting
Details
Dense Information
Not Cluttered
General Design Considerations
Displays PatternsAbstract DataMinimal Grids
“Graphical”
No ScrollingNothing HiddenLinked Content
“Single Page”
Domain AwareLeverages
Knowledge
“Guided Analytics”
BetterDashboard
DesignAll Relevant InfoOne Place to LookNot Data Driven
“Disparate Data”
Key Data/Metrics in Context
Key Data/MetricsHigh level performance metricsGenerally tied to goals and bonusesFocus on actionable dataDisparate sources
ContextThe 3Ts = Target, Trend, TypicalSimilar/Related Data/MetricsBasis for interpretation
Dense, not ClutteredDense Information
All relevant data/metricsDifferent 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 removedSupporting ink (axis lines) = low visual impact
The Visual Display of Quantitative InformationEdward R. Tufte
Zero Learning CurveDashboard viewing is not a person’s job
Oriented at casual users, line mgt, & execsLittle/No accumulated experience
Each viewing is the first time
Dashboards are not analytical toolsBut they provide guided analytics
Targeted to a Person/Role/Problem Set
Exception OrientedOutliers should POP out
Highlight BothProblemsOpportunities
What is an Exception?> 1 Std Dev, 2…. Five9sWhen action needs be taken
Visual Cues
ColorSize
ShapeBoldnessPosition
Icons
Supporting Detail
Dashboards are not anend unto themselves
Guided Analytics
HierarchicalDrill-Down
ContextualContent Updates
AssociatedLayers
Root CauseAnalysis
Detail ReportsAd Hoc Analysis
Links toNew Pages
UpdateDashboardWebparts
Dashboard Components
Grids Charts
Diagrams
Maps
Scorecards
Tree Map
Gauges
Decomp Tree
And SoMuch More……
A dashboard is not a paintingUsefulness is Paramount
First a Word on ColorUse Color Sparingly – Generally Soft Colors
Highlighting – Bold ColorsDifferent Colors = Different Meaning
Try shades of greyUse a Single Hue
Increase the intensity for low to high valuesRemember - 7% of men are color blind
GridsWhen to use:
Values are familiar Need to lookup a valueSmall differences are importantMixed units of measure
Design ConsiderationsTry to keep square-ishComparisons are done by columnLimit length with Top/Bottom
Grid EmbellishmentsHighlights
Items of interestData Bars
Helpful to read magnitudeColor Scales/Icons
Can overwhelm the dataArrows
Used for change over timeIcons
are best used to:Replace
data to save spaceShow
variance or score
ScorecardsAre a special type of grid
Created for KPIs and ObjectivesCan 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
End-To-End Business Logic
Data
Scorecards
Measures
KPIs
Score
Metrics
Tolerances
Derivation
Navigation
BudgetPlanForecast
Benchmarks
Objectives
PerspectivesProcesses
Initiatives
Organize
CatalogAuditedAccurateApproved
Basic ChartsLines Charts – Time Series oriented
Highlights trend, patterns or variabilityHighlights relationships between seriesTrend lines & projections can be added
Bar Chart – Comparison OrientedCategorical comparisons within a dimensionNominal comparisons across data (sales to cost)
Pie Charts – Part to Whole Only works with small setsHard to visually quantifyA lot of space for not much data
http://www.symcorp.com
Interlude: Form vs. Function
Too Dense?
1 Page – 6#s
Pretty Yes! Useful?
Use CarefullyBright Colors
AnimationPie Charts
Gauges3D Charts
If the dashboard is not visually appealing,people will not go to it
If the dashboard is not effective and practical,people will not use it
What is fun the first time
Might be boring the 100th time
Bar ChartsHorizontal
Long labelsPattern comparisonsLong-ish lists
VerticalGroups with in groupsStacked and 100% BarsPareto Charts
Doesn’t work for large numbers of groupsBars are easily drilled into
Hybrids – Charts in Grids
Great Data-Ink
Ratio
EffectiveMixing OfCharts &Values
Introduction ofSparklines & Bullet Graphs
SmallMultiples
TrellisCharts
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
Black Bar = ValueGreen/Red Bar = TargetBlue Pointer = Last Year
Symmetry’s Variation
SalesCosts
Maps
Maps are highly specialized
Be careful of charts within a map
Maps are great for demographics
Useful in showing regional
components
Impact gridscan be effective
Gauges
FLASHY, SHOWY, ATTENTION GETTING
Best for continuous processPoor Data-Ink Ratio
Hard to set gauge scale for the general case
When using a set of gauges expected value should be straight up
DiagramsBalanced ScorecardStrategy Map
Root Cause/Fishbone DiagramImpact Diagram
Process Diagram
Diagrams are underutilized
Graphical Representations
Graphical Excellence
Show the dataFocus on the substance of the numbersDon’t distort the dataPresent many numbers in a small spaceEncourage comparisonsShow data in several perspectives
The Visual Display of Quantitative Information Edward R. Tufte
Screen LayoutNumber of Frames
Up to 4 is good, no more than 6Frame Proportions
Size = implied importanceUniform otherwise
LocationTop left = primary focusBottom right = supporting detailOff page = irrelevant
Printing The dirty little secret
Frame OptionsDifferent frame on same page
Must fit on the pageCan drill from here to new page
New page in same browserEasy to get backFull page available
New browser tab/windowAllows for comparisonsUsers must close windows/tabs
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
NavigationIdentify the key dimensions for the metric
Customer, product, departmentDrill into one or more of theseTop 10 rankings
Identify the audienceMarketing manager – Drill to productSales Manager – Drill to customer
Navigation - What to Show
Microsoft Software ComponentsReporting Services
Formal report viewHighly formatted
Performance Point ServerAnalytical Charts and GraphsLess control over formatBuilt in Slice and Dice
Excel ServicesShared user-created content Fast changing
SummaryChoose 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
ResourcesShow 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
Questions?
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
Complete an evaluation on CommNet and enter to win!
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
© 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.
