7/21/2019 Dashboard Design Best Practices

1/43

7/21/2019 Dashboard Design Best Practices

2/43

At a

Glance

Monitors a

Continuous

Process

Gauge

Oriente

http://upload.wikimedia.org/wikipedia/commons/3/3d/Bell_X-1B_cockpit_2_USAF.jpg

7/21/2019 Dashboard Design Best Practices

3/43

Production

ParameterDriven

AdvancedVisualization

Highly

Formatted

Tables, Crosstabs, Charts, Graphs

Managed AnalysisDashboards

Ease ofDevelopment

& UsageParamount

Customization& DistributionAlternatives

Depth &Quickness

of Analytics

Guided Analytics

ProgrammerDeveloped

LineDeveloped

StaffDeveloped

InteractiveNavigation

7/21/2019 Dashboard Design Best Practices

4/43

Visual Display

most important information

objectives

single computer screen

monitored at a glance

Information Dashboa

By Stephen Few

7/21/2019 Dashboard Design Best Practices

5/43

Some are Better

Than Others

7/21/2019 Dashboard Design Best Practices

6/43

7/21/2019 Dashboard Design Best Practices

7/43

SpecificClear on what is being measured

MeasurableAccurate and consistent

ActionableInfluence to alter the outcome

RelevantSignificance and leverage

TimelyAppropriate intervals

7/21/2019 Dashboard Design Best Practices

8/43

Single PageGraphicallyOriented

KeyData/Metrics

In Context

Zero LearningCurve

HighlightExceptions

Access toSupporting

Details

DenseInformation

Not Cluttered

7/21/2019 Dashboard Design Best Practices

9/43

Displays AbstracMinima

Graphical

No ScrollingNothing HiddenLinked Content

Single Page

DomaiLeve

Know

Guided Analytics

BetterDashboard

DesignAll Relevant Info

One Place to LookNot Data Driven

Disparate Data

7/21/2019 Dashboard Design Best Practices

10/43

7/21/2019 Dashboard Design Best Practices

11/43

All relevant data/metrics

Different perspectives

It is not how much, but how well

Easy to view, not an eye chart

Non-essential ink should be removed

Supporting ink (axis lines) = low visual impact

The Visual Display of Quantitative Information

Edward R. Tufte

7/21/2019 Dashboard Design Best Practices

12/43

7/21/2019 Dashboard Design Best Practices

13/43

POP

Visual Cues

Color

Size

Shape

BoldnessPosition

Icons

7/21/2019 Dashboard Design Best Practices

14/43

Dashboards are not an

end unto themselves

Guided

Analytics

Hierarchical

Drill-Down

Contextual

Content Updates

Asso

La

Root Cause

Analysis

DetAd Hoc Analysis

Links to

New Pages

U

Das

We

7/21/2019 Dashboard Design Best Practices

15/43

Grids Charts

Diagrams

Maps

Scorecards

Tree Map

Gauges

Decomp Tree

And So

Much More

7/21/2019 Dashboard Design Best Practices

16/43

A dashboard is not a painting

Usefulness is Paramount

Color

http://www.google.com/imgres?imgurl=http://www.llnsciencepark.be/en2/images/caution.jpg&imgrefurl=http://www.llnsciencepark.be/en2/index.php?option=com_content&task=view&id=21&Itemid=37&h=450&w=450&sz=33&tbnid=VZSsFCl2m3JKhM:&tbnh=127&tbnw=127&prev=/images?q=caution&hl=en&usg=__-cmbYsvE_QcP0KtlPJ6d3Izoo3M=&ei=FrYlSqDeDY_otQP1kLzMAQ&sa=X&oi=image_result&resnum=1&ct=image

7/21/2019 Dashboard Design Best Practices

17/43

7/21/2019 Dashboard Design Best Practices

18/43

Icons

are best used to:

Replace

data to save space

Show

variance or score

7/21/2019 Dashboard Design Best Practices

19/43

Scorecards

are less about data

and more about process

7/21/2019 Dashboard Design Best Practices

20/43

Data

Scorecards

Measures

KPIs

Score

Metrics

Tolerances

Budget

Plan

Forecast

Benchmarks

Perspectives

Initiativ

Organize

CatalogAuditedAccurate

Approved

7/21/2019 Dashboard Design Best Practices

21/43

Time Series oriented

Comparison Oriented

Part to Whole

http://w

7/21/2019 Dashboard Design Best Practices

22/43

Too Dense?

1 Page6#s

Pretty Yes! Usef

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 100thtime

http://support.sas.com/kb/26133http://support.sas.com/kb/26105

7/21/2019 Dashboard Design Best Practices

23/43

7/21/2019 Dashboard Design Best Practices

24/43

GreatData-Ink

Ratio

EffectiveMixing Of

Charts &

Values

Introduction of

Sparklines & Bullet Graphs

Sma

Multip

Trellis

Charts

7/21/2019 Dashboard Design Best Practices

25/43

A bullet graphis 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 = Value

Green/RedBar = Ta

Blue Pointer = Last

Symmetry

Variation

Sales

Costs

http://en.wikipedia.org/w/index.php?title=Stephen_Few&action=edit&redlink=1http://en.wikipedia.org/w/index.php?title=Stephen_Few&action=edit&redlink=1http://en.wikipedia.org/wiki/File:Bullet_graph_labeled.png

7/21/2019 Dashboard Design Best Practices

26/43

Be careful of charts

within a map

Maps are great for

demographics

Useful in

showing regional

components

Impactcan be effe

http://supportanalytics.com/blog/wp-content/uploads/2009/02/europe-chart.jpg

7/21/2019 Dashboard Design Best Practices

27/43

Best for continuous process

Poor Data-Ink Ratio

Hard to set gauge scale

for the general case

When using a set of

gauges expected value

should be straight up

7/21/2019 Dashboard Design Best Practices

28/43

Balanced Scorecard

Strategy Map

Root Cause/Fishbone DiImpact Diagram

Process Di

Diagrams are

underutilized

Graphical Representations

7/21/2019 Dashboard Design Best Practices

29/43

The Visual Display of Quantitative Information

Edward R. Tufte

7/21/2019 Dashboard Design Best Practices

30/43

7/21/2019 Dashboard Design Best Practices

31/43

7/21/2019 Dashboard Design Best Practices

32/43

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

analyticshttp://w

http://blogs.msdn.com/blogfiles/fasttrackreview/WindowsLiveWriter/MCGConsultingexploreReportingServicesBus_13B9F/image_6.pnghttp://images.google.com/imgres?imgurl=http://dashboardspy.com/img/executive-advisor-dashboard.gif&imgrefurl=http://dashboardguy.blogspot.com/2007/05/executive-dashboard-for-wireless.html&usg=__Qmckltdvq3RJGBXcd3TfVS2jk0I=&h=404&w=690&sz=84&hl=en&start=3&um=1&tbnid=y3FG1ofa-gTxeM:&tbnh=81&tbnw=139&prev=/images?q=executive+dashboard&hl=en&rls=com.microsoft:en-us:IE-SearchBox&um=1

7/21/2019 Dashboard Design Best Practices

33/43

7/21/2019 Dashboard Design Best Practices

34/43

7/21/2019 Dashboard Design Best Practices

35/43

7/21/2019 Dashboard Design Best Practices

36/43

7/21/2019 Dashboard Design Best Practices

37/43

Show Me the Numbers: Designing Tables and Graphs to Enlighten

Information Dashboard Design: The Effective Visual Communication of Data

The Visual Display of Quantitative Information, 2nd edition

http://www.perceptualedge.com/

http://dashboardspy.com/

www.symcorp.com

http://www.amazon.com/Show-Me-Numbers-Designing-Enlighten/dp/0970601999/ref=sr_1_3?ie=UTF8&s=books&qid=1244083316&sr=1-3http://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167/ref=sr_1_2?ie=UTF8&s=books&qid=1244083316&sr=1-2http://www.amazon.com/Visual-Display-Quantitative-Information-2nd/dp/0961392142/ref=sr_1_7?ie=UTF8&s=books&qid=1244083316&sr=1-7http://www.perceptualedge.com/http://www.perceptualedge.com/http://dashboardspy.com/http://dashboardspy.com/http://www.symcorp.com/http://dashboardspy.com/http://www.amazon.com/Visual-Display-Quantitative-Information-2nd/dp/0961392142/ref=pd_bxgy_b_img_ahttp://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167/ref=pd_bxgy_b_img_ahttp://www.amazon.com/gp/product/images/0970601999/sr=1-3/qid=1244083316/ref=dp_image_0?ie=UTF8&n=283155&s=books&qid=1244083316&sr=1-3http://www.symcorp.com/http://dashboardspy.com/http://dashboardspy.com/http://dashboardspy.com/http://www.perceptualedge.com/http://www.perceptualedge.com/http://www.amazon.com/Visual-Display-Quantitative-Information-2nd/dp/0961392142/ref=sr_1_7?ie=UTF8&s=books&qid=1244083316&sr=1-7http://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167/ref=sr_1_2?ie=UTF8&s=books&qid=1244083316&sr=1-2http://www.amazon.com/Show-Me-Numbers-Designing-Enlighten/dp/0970601999/ref=sr_1_3?ie=UTF8&s=books&qid=1244083316&sr=1-3

7/21/2019 Dashboard Design Best Practices

38/43

Questions?

7/21/2019 Dashboard Design Best Practices

39/43

www.microsoft.com/teched www.microsoft.com/le

http://microsoft.com/technet http://microsoft.com/

http://www.microsoft.com/techedhttp://www.microsoft.com/learninghttp://microsoft.com/technethttp://microsoft.com/msdnhttp://microsoft.com/msdnhttp://microsoft.com/technethttp://www.microsoft.com/learninghttp://www.microsoft.com/teched

7/21/2019 Dashboard Design Best Practices

40/43

Sign up for TechEd 2011 and save $50

7/21/2019 Dashboard Design Best Practices

41/43

Sign up for Tech Ed 2011 and save $50

starting June 8June 31st

http://northamerica.msteched.com/regist

You can also register at the

North America 2011 kiosk located at registratio

Join us in Atlanta next year

https://mail.microsoft.com/owa/redir.aspx?C=adc4276acedf447ab646d268f1dab1a0&URL=http://northamerica.msteched.com/registrationhttps://mail.microsoft.com/owa/redir.aspx?C=adc4276acedf447ab646d268f1dab1a0&URL=http://northamerica.msteched.com/registrationhttps://mail.microsoft.com/owa/redir.aspx?C=adc4276acedf447ab646d268f1dab1a0&URL=http://northamerica.msteched.com/registration

7/21/2019 Dashboard Design Best Practices

42/43

7/21/2019 Dashboard Design Best Practices

43/43