at a glance monitors a continuous process gauge oriented

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.