Transcript Dashboards without Barriers Part 1: Concepts and Vision

Dashboards without Barriers
Part 1: Concepts and Vision
Dan Carotenuto
Technical Director
Copyright 2007, Information Builders. Slide 1
Dashboards Without Barriers: Concepts and Vision
Agenda
 Business Intelligence Dashboards
 Creating Useful Dashboards
 Demonstrations
 Appendix A – Visual Perception
 Appendix B – Gestalt Principles of Visual Perception
 Appendix C – Solutions
 Appendix D – References and Recommended Reading
Copyright 2007, Information Builders. Slide 2
Business Intelligence Dashboards
Copyright 2007, Information Builders. Slide 3
Business Intelligence Dashboards
What is a Dashboard?
A dashboard is a visual display of the most important
information needed to achieve one or more objectives;
consolidated and arranged on a single screen so the
information can be monitored at a glance
Stephen Few, “Dashboard Confusion,” Intelligent
Enterprise, March 20, 2004
Copyright 2007, Information Builders. Slide 4
Business Intelligence Dashboards
What is a Dashboard?
A dashboard (or cockpit) is a reporting mechanism that
aggregates and displays metrics and key performance
indicators (KPIs), enabling them to be examined at a
glance before further exploration via additional BI tools.
Dashboards are useful KPI and metric-reporting
mechanisms that enable users to quickly monitor and
track performance via an esthetic user interface. They
employ visualization components, such as gauges,
thermometers, dials and traffic lights.
“Q&A: Important Integration Considerations for Scorecards,
Dashboards and Portals,” Gartner, Publication Date: 9 July
2007
Copyright 2007, Information Builders. Slide 5
Business Intelligence Dashboards
Key Points
 Visual displays
 They are highly graphical
Why? Because they are nice to look at?
 Display information needed to achieve specific objectives
 Fit on a single computer screen (no scrolling)
 Used to monitor information at a glance
 Customized
Copyright 2007, Information Builders. Slide 6
4
Does your dashboard take up too
much space?
Copyright 2007, Information Builders. Slide 7
Business Intelligence Dashboards
Categorization
 Roles
 Strategic
 Analytical
 Operational
Copyright 2007, Information Builders. Slide 8
Business Intelligence Dashboards
Strategic
 Provide quick overview that decision makers need for
monitoring the health and opportunities of the business
 Are typically static snapshots of data
 Focus on high-level measures of performance
 Benefit from contextual information
 Comparisons to targets
 Brief histories
 Performance evaluators (good, bad)
Copyright 2007, Information Builders. Slide 9
Business Intelligence Dashboards
Analytical
 For supporting data analysis
 Need for greater context
 Rich comparisons
 More extensive history
 Subtler performance evaluators
 Support interactions with the data such as drilling down into
underlying details
 Used to not only see what is going on, but to examine the
causes
Copyright 2007, Information Builders. Slide 10
Business Intelligence Dashboards
Operational
 For monitoring operations
 Real time
 The display media must be very simple
 Emergency events must be easily and quickly recognized
and understood in order to ensure correct response
 Often displays more specific information
Copyright 2007, Information Builders. Slide 11
Strategic Dashboards
Learning by Example
Copyright 2007, Information Builders. Slide 12
Strategic Dashboards
Learning by Example
 Is there anything wrong with this dashboard?
What information does
this graphic provide?
Copyright 2007, Information Builders. Slide 13
Strategic Dashboards
Learning by Example
 The gauge and text box both tell us that Vendor Payables are
$160,250
 What value do the dial and tic marks in the gauge provide?
 Does the text box provide the same information?
 Does the text box provide any less information?
 Which takes up less space, the gauge or the text box?
Graphic
Text
Vendor Payables: $160,250
Don’t waste space
Copyright 2007, Information Builders. Slide 14
Strategic Dashboards
Learning by Example
 Is there anything wrong with this dashboard?
What does this
map tell us?
What do these
gauges really tell us?
Copyright 2007, Information Builders. Slide 15
Strategic Dashboards
Learning by Example
 The labels help us determine what value the needles point to
 But what do the position of the needles tell us about the
qualitative value of the data?
 Are the arrows pointing in good ranges? Bad ranges?
 Supply adequate
context for the data
 Don’t waste space
Copyright 2007, Information Builders. Slide 16
Strategic Dashboards
Learning by Example
 The map displays flight loads to and from Munich
 Each route is color-coded to reflect a qualitative range
 Other than a geography lesson what value does the map
provide?
 Could this information have been displayed in a different way?
Don’t waste space
Copyright 2007, Information Builders. Slide 17
Strategic Dashboards
Learning by Example
 Is there anything wrong with this dashboard?
Is the graphic surrounding the bar
chart really necessary?
 Do not clutter the display
with useless decoration
 Don’t waste space
Copyright 2007, Information Builders. Slide 18
Business Intelligence Dashboards
Visual Displays: Display Mediums
 Principles for selecting dashboard display mediums
 They should be aesthetically pleasing
 Should be the best means to display a particular type of


information
Use small, concise, clear and intuitive mechanisms
Should be able to serve its purpose even when sized to fit
into a small space
Minimize use of non-data pixels
 Do these pixels have anything to do with the data?
 Do these pixels add any value to understanding the
data?
Copyright 2007, Information Builders. Slide 19
Business Intelligence Dashboards
Visual Displays: Display Mediums
 Types
 Graphs
 Images (photos, illustrations, maps)
 Icons
 Drawing objects (org chart, process flows)
 Text
 Organizers (tables, spatial maps, small multiples)
Copyright 2007, Information Builders. Slide 20
Business Intelligence Dashboards
Display Mediums: Icons
 Simple images that communicate a clear and simple meaning
 Only need a few on a dashboard
 Types
 Alerts
 Up/down
 On/off
*  x
 Can take advantage of preattentive processing
Copyright 2007, Information Builders. Slide 21
Business Intelligence Dashboards
Display Mediums: Graphs
 Display quantitative data in the form of a 2-D graph with X and
Y axes.
 Z-axis is used for 3-D charts
 How useful are 3-D charts?
They suffer from occlusion
 Can take advantage of preattentive processing
Copyright 2007, Information Builders. Slide 22
Business Intelligence Dashboards
Display Mediums: Graphs
 Types
 Bullet graphs
 Bar graphs (horizontal and vertical)
 Stacked bar graphs (horizontal and vertical)
 Combination bar and line graphs
 Line graphs
 Sparklines
 Scatter plots
 Box plots
 Treemaps
Copyright 2007, Information Builders. Slide 23
Business Intelligence Dashboards
Display Mediums
 Which display mediums are the best to use?
 Depends on what must be monitored in the dashboard
Copyright 2007, Information Builders. Slide 24
Business Intelligence Dashboards
Display Mediums
 When should you use one graph type over another?
 Use the understanding of human visual perception to drive
which display mediums you should use and how they are used
Colors
Copyright 2007, Information Builders. Slide 25
Business Intelligence Dashboards
Display Mediums: When and Why Example
 Task: Show sales for each quarter over the past year
 Which display medium should I use?
 Bar chart?
 Line chart?
Copyright 2007, Information Builders. Slide 26
Business Intelligence Dashboards
Display Mediums: When and Why
 Task: Show sales for each quarter over the past year
 Create a line chart
 Why?
 A line chart gives shape and context to your data
 If you created a bar chart, you would unconsciously try to
trace the path of the data to give it shape
 Gestalt principle of continuity
Continuity
Copyright 2007, Information Builders. Slide 27
Business Intelligence Dashboards
Display Mediums: When and Why
 Non-data pixels
 Do the bar’s shaded fill color and bar’s border add any
value to understanding the chart?
Copyright 2007, Information Builders. Slide 28
Creating Useful Dashboards with WebFOCUS
Copyright 2007, Information Builders. Slide 29
Overview
What are Inline Graphics?
 A method for solving dashboard “real estate” problems
 Display information in a small, concise and intuitive manner
 For display in an organizer display medium
 Matrix style layout made up of rows and columns
 Each graphic is directly tied to elements in its own row
Copyright 2007, Information Builders. Slide 30
Bullet Graphs
What is a Bullet Graph?
 Stephen Few’s answer to
 “the problems exhibited by most of the gauges and meters
that have become synonymous with dashboards”
- Stephen Few, Information Dashboard Design (O’Reilly, 2006)
Copyright 2007, Information Builders. Slide 31
Bullet Graphs
Components of a Bullet Graph
Qualitative Ranges
Background fill colors like
“bad, satisfactory, and good”
Revenue 2005 YTD
(U.S $ in thousands
0
50
100
Text Label
Quantitative Scale
Performance Measure
Symbol Marker
Encodes the
comparative
measure
Copyright 2007, Information Builders. Slide 32
Bullet Graphs
Components of a Bullet Graph
 Qualitative Ranges: Fill Colors
 Should be variables of color intensity—not hue
 Use subtle colors
Dark gray
Light gray
Medium gray
This example uses shades of gray to
distinguish between qualitative ranges
Copyright 2007, Information Builders. Slide 33
Bullet Graphs
Components of a Bullet Graph
 Qualitative Ranges: Fill Color Design
Rating
Good
Poor
Good
Poor
Good
Poor
Good
Poor
Why?
Solution found in Appendix C
Copyright 2007, Information Builders. Slide 34
Bullet Graphs
What is a Sparkline?
 Created by Edward R. Tufte
 Provides a bare-bones and space-efficient time-series context
for measures.
 Data-intense, design-simple, word-size graphics
 Where is the quantitative scale?
 Sparklines are not meant to provide quantitative precision
of a normal line graph
 Provides a quick sense of historical context to enrich the
meaning of the measure
Copyright 2007, Information Builders. Slide 35
Cell-based Graphics
Useful Cell-based Graphics
 Bullet Graph
 Sparkline
Preattentive Attributes
Preattentive Attributes
Enclosure (fill colors)
Line length
Intensity
2-D location
Shapes/Marks (cross)
Line length
2-D location (marker)
Copyright 2007, Information Builders. Slide 36
Dashboards without Barriers
Sample Dashboard
Copyright 2007, Information Builders. Slide 37
Demonstrations
Copyright 2007, Information Builders. Slide 38
Appendix A
Visual Perception
Copyright 2007, Information Builders. Slide 39
Visual Perception
If we can understand how perception works,
our knowledge can be translated into rules for
displaying information.
Colin Ware, Information Visualization: Perception
for Design, Second Edition (San Francisco, Morgan
Kauffman, 2004), xxi
Copyright 2007, Information Builders. Slide 40
Visual Perception
 Short-term visual memory
 Preattentive Processing and Attributes
 Gestalt principles of visual perception
Who do you see?
Girl
Old lady
Solution found in Appendix C
Copyright 2007, Information Builders. Slide 41
Visual Perception
Memory
 Iconic memory
 Short-term memory
 Long-term memory
Copyright 2007, Information Builders. Slide 42
Visual Perception
Iconic Memory
Copyright 2007, Information Builders. Slide 43
Visual Perception
Iconic Memory
What did you see?
Copyright 2007, Information Builders. Slide 44
Visual Perception
Iconic Memory
 The visual sensory register
 Fragile
 Decay rapidly
 Unable to be actively maintained
 Where preattentive processing occurs
Copyright 2007, Information Builders. Slide 45
Visual Perception
Short-term Memory
 Working memory
 Last over many seconds
 Where information resides during conscious processing
 Temporary
 A portion is dedicated to visual information
Copyright 2007, Information Builders. Slide 46
Visual Perception
Short-term Memory
 Limited storage capacity
 Can only store three to nine chunks of visual information at

a time in short-term memory
After it is filled, for something new to be stored, the current
contents must be moved to long-term memory or discarded
1
3 4
7
13
24
Long- term
memory
26
8
Copyright 2007, Information Builders. Slide 47
Visual Perception
Preattentive Processing
 What is Preattentive proccessing?
 The early stage of visual perception that rapidly occurs


below the level of consciousness
Tuned to detect a specific set of visual attributes
Attentive processing is sequential—slower
Copyright 2007, Information Builders. Slide 48
Visual Perception
Preattentive Processing
 How many times does the number 5 appear in the following
list?
6853843134524384313643843513843
2143413813574381341384324381354
6879794567863431843763878341834
8138733138797984983138236798413
Solution found in Appendix C
Copyright 2007, Information Builders. Slide 49
Visual Perception
Preattentive Attributes
Category
Attribute
Quantitative
Color
Hue
No
Intensity
Yes, but limited
Position
2-D position
Yes
Form
Orientation
No
Line length
Yes
Line width
Yes, but limited
Size
Yes, but limited
Shape
No
Added marks
No
Enclosure
No
Flicker
Yes, based on speed, but limited
Motion
Copyright 2007, Information Builders. Slide 50
Visual Perception
Preattentive Attributes - Color
Mere colour, unspoiled by meaning, and
unallied with definite form, can speak to the
soul in a thousand different ways.
Oscar Wilde, 1856-1900, British Author
Copyright 2007, Information Builders. Slide 51
Visual Perception
Preattentive Attributes - Hue
 Hue – a more precise term for what we normally think of as
color (red, green, blue, purple, etc)
Are any of these circles the same hue?
Someone with normal
color vision see this
Someone that is color-blind
sees this
Copyright 2007, Information Builders. Slide 52
Visual Perception
Preattentive Attributes - Hue
 How many people are color-blind?
 ____% males
 ____% of females
Someone with normal
color vision see this
___% of males and ___%
of females see this
Solution found in Appendix C
Copyright 2007, Information Builders. Slide 53
Visual Perception
Preattentive Attributes - Intensity
 Intensity
 Refers to both saturation and lightness
 Should be used to differentiate colors on a dashboard
Darker
Lighter
This circle differs
only in intensity
Copyright 2007, Information Builders. Slide 54
Visual Perception
Preattentive Attributes – Hue and Intensity
Hue
Intensity
Copyright 2007, Information Builders. Slide 55
Visual Perception
Preattentive Attributes - Position
 2-D Location
 Primary means that we use to encode quantitative data in

graphs
 For example, the position of data points in relation to a
quantitative scale
Differences in 2-D position are the easiest and most
accurate to perceive
2-D location
Copyright 2007, Information Builders. Slide 56
Visual Perception
Preattentive Attributes - Form
 Line Length
 Most useful for encoding
quantitative values as
bars in a bar graph
 Line Width
 Useful for highlighting

purposes
Thickness or stroke
weight of a line
Copyright 2007, Information Builders. Slide 57
Visual Perception
Preattentive Attributes - Form
 Line Width
 Can be used to encourage perception of one thing as

greater than, equal to, or less than another
But cannot perceive differences with any degree of precision
How much bigger is the larger
circle?
?
1
Which has the highest costs?
Costs
Revenue
Solution found in Appendix C
Copyright 2007, Information Builders. Slide 58
Visual Perception
Preattentive Attributes - Form
 Shapes
 Can be used in graphs to

differentiate data sets
As icons can be used to
assign distinct meanings
(alerts)
 Enclosure
 Powerful means of

grouping sections of data
or highlighting content as
important
Borders or fill color
behind the content.
Copyright 2007, Information Builders. Slide 59
Visual Perception
Preattentive Attributes - Form
Orientation
Added marks
Size
Copyright 2007, Information Builders. Slide 60
Visual Perception
Preattentive Attributes - Motion
Flicker
A visual attribute of an object, such as color,
continuously changes back and forth
between two values, or the entire object
itself repeatedly appears and then
disappears.
Copyright 2007, Information Builders. Slide 61
Appendix B
Gestalt Principles of Visual Perception
Copyright 2007, Information Builders. Slide 62
Gestalt Principles of Visual Perception
 Proximity
 Closure
 Similarity
 Continuity
 Enclosure
 Connection
Max Wertheimer, 1880-1943,
founder of Gestalt Psychology
Copyright 2007, Information Builders. Slide 63
Gestalt Principles of Visual Perception
Proximity
 Objects that are located near one another are perceived as
belonging to the same group
Copyright 2007, Information Builders. Slide 64
Gestalt Principles of Visual Perception
Closure
 Asserts that we perceive open structures as closed, complete,
and regular whenever there is a way that we can reasonably do
so
Copyright 2007, Information Builders. Slide 65
Gestalt Principles of Visual Perception
Similarity
 We tend to group together objects that are similar in color, size,
shape, and orientation
Copyright 2007, Information Builders. Slide 66
Gestalt Principles of Visual Perception
Continuity
 We perceive objects as belonging together, as part of a single
whole, if they are aligned with one another or appear to form a
continuation of one another
Copyright 2007, Information Builders. Slide 67
Gestalt Principles of Visual Perception
Enclosure
 We perceive objects as belonging together when they are
enclosed by anything that forms a visual border around them
Copyright 2007, Information Builders. Slide 68
Gestalt Principles of Visual Perception
Connection
 We perceive objects that are connected in some way, such as
a by a line, as part of the same group.
 The perception of grouping produced by connection is stronger
than that produced by proximity or similarity (color, size, and
shape)
 It is weaker only than that produced by enclosure
Copyright 2007, Information Builders. Slide 69
Appendix C
Solutions
Copyright 2007, Information Builders. Slide 70
Visual Perception
Who do you see?

Girl

Old lady
Copyright 2007, Information Builders. Slide 71
Visual Perception
Memory
 The number 5 appears six times in the following list
6853843134524384313643843513843
2143413813574381341384324381354
6879794567863431843763878341834
8138733138797984983138236798413
Copyright 2007, Information Builders. Slide 72
Visual Perception
Colors
 How many people are color-blind?
 10% males
 1% of females
Someone with normal
color vision see this
10% of males and 1% of
females see this
Copyright 2007, Information Builders. Slide 73
Visual Perception
Preattentive Attributes - Form
 Line Width
 Can be used to encourage perception of one thing as

greater than, equal to, or less than another
But cannot perceive differences with any degree of precision
How much bigger is the larger
circle?
16
1
Which has the highest costs?
Costs
Revenue
Copyright 2007, Information Builders. Slide 74
Bullet Graphs
Components of a Bullet Graph
 Qualitative Ranges: Fill Color Design
Rating
Good
Poor
Good
Poor
Good
Poor
Good
Poor
Why?
Variable hue
Too vivid
Variable color intensity
Subtle colors
Variable hue
Variable color intensity
Subtle colors
Copyright 2007, Information Builders. Slide 75
Appendix D
References
Copyright 2007, Information Builders. Slide 76
References and Recommended Reading
 Information Dashboard Design, The Effective Visual Communication of Data,
Stephen Few, O’Reilly, 2006
 Show Me the Numbers, Designing Tables and Graphs to Enlighten, Stephen Few,
Analytics Press, 2004
 Information Visualization, Perception for Design, Colin Ware, Morgan Kaufmann,
2nd Edition, 2004
 Beautiful Evidence, Edward Tufte, Graphics Press LLC, 2006
 Envisioning Information, Edward Tufte, Graphics Press LLC, 2005
 The Visual Display of Quantitative Information, Edward Tufte, Graphics Press
LLC, 2nd Edition, 2006
Copyright 2007, Information Builders. Slide 77
Dashboards without Barriers
Questions and Feedback
[email protected]
Copyright 2007, Information Builders. Slide 78