Cognitive Information Design & Visualization Cognitive Information Design & Visualization.
Information visualization: information dashboards
-
Upload
katrien-verbert -
Category
Education
-
view
2.234 -
download
6
Transcript of Information visualization: information dashboards
24/04/14 pag. 1
Information visualization lecture 7
information dashboards
Katrien Verbert Department of Computer Science
Faculty of Science Vrije Universiteit Brussel
24/04/14 pag. 2
Most information dashboards that are used in business today fall far short of their potential (Stephen Few)
Root of the problem: poor visual design
24/04/14 pag. 3
All that glitters is not gold
24/04/14 pag. 4
Dispelling the Confusion
24/04/14 pag. 5
24/04/14 pag. 13
24/04/14 pag. 16
definition
24/04/14 pag. 17
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.
24/04/14 pag. 18
Characteristics
• Dashboards are visual displays. • Dashboards display information needed to achieve specific objectives. • A dashboard fits on a single computer screen. • Dashboards are used to monitor information at a glance. • Dashboards have small, concise, clear, intuitive display mechanisms. • Dashboards are customized.
24/04/14 pag. 19
Categorizing dashboards
Variable Values
Role Strategic OperaConal AnalyCcal
Type of data QuanCtaCve Non-‐quanCtaCve
Data domain Sales Finance MarkeCng Manufacturing Human resources Learning …
Type of measures Balanced score cards Six sigma Non-‐performance
Variable Values
Span of data Enterprise wide Departmental Individual
Update frequency Monthly Weekly Daily Hourly Real-‐Cme
InteracCvity StaCc display InteracCve display
Mechanisms of display
Primarily graphical Primarily text IntegraCon of graphics and text
Portal funcConality Conduit to addiConal data No portal funcConality
24/04/14 pag. 20
thirteen common mistakes in dashboard design
24/04/14 pag. 21
common mistake 1: exceeding the boundaries of a
single screen
24/04/14 pag. 22
Fragmenting data into separate screens
Information that appears on dashboards is often fragmented in one of two ways: • Separated into discrete screens to which one must navigate • Separated into different instances of a single screen that are
accessed through some form of interaction
24/04/14 pag. 23
This dashboard fragments the data in a way that undermines the viewer's ability to see meaningful relaConships.
24/04/14 pag. 24
This dashboard requires viewers to click on a desired product and view informaCon for only one product at a Cme.
24/04/14 pag. 25
Requiring scrolling
24/04/14 pag. 26
common mistake 2: supplying inadequate context for the data
24/04/14 pag. 27
These dashboard gauges fail to provide adequate context to make the measures meaningful
24/04/14 pag. 28
Incorporating context
24/04/14 pag. 29
common mistake 3: displaying excessive detail or precision
24/04/14 pag. 30
This dashboard shows unnecessary detail, such as Cmes expressed to the second and measures expressed to 10 decimal places.
24/04/14 pag. 31
common mistake 4: choosing a deficient measure
24/04/14 pag. 32
use of measures that fail to directly express the intended message
24/04/14 pag. 33
This graph is designed to emphasize deviation from a target
24/04/14 pag. 34
common mistake 5: choosing inappropriate display media
24/04/14 pag. 35
this chart illustrates a common problem with pie charts
24/04/14 pag. 36
even when used correctly, pie charts are difficult to interpret accurately
24/04/14 pag. 37
horizontal bar graph does clearly a better job than the preceding pie charts
24/04/14 pag. 38
Other types of graphs can be equally ineffective
This graph uses the two-‐dimensional area of circles to encode their values, which needlessly obscures the data
Assuming that operaCng costs of February equal $10.000, what is the revenue value?
$10.000
24/04/14 pag. 39
This bar graph does a good job of displaying a time series of actual versus budgeted revenue values
24/04/14 pag. 40
This radar graph obscures the straightforward data that it's trying to convey.
24/04/14 pag. 41
This bar graph effectively compares actual to budgeted revenue data
24/04/14 pag. 42
This display uselessly encodes quantitative values on a map of the United States
24/04/14 pag. 43
This table provides a more appropriate display of the regional revenue data
24/04/14 pag. 44
common mistake 6: introducing meaningless variety
24/04/14 pag. 45 This dashboard exhibits an unnecessary variety of display media.
24/04/14 pag. 46
common mistake 7: using poorly designed display media
24/04/14 pag. 47
This pie chart illustrates several design problems
24/04/14 pag. 48
Issues
• A legend was used to label and assign values to the slices of the pie. This forces our eyes to bounce back and forth between the graph and the legend to glean meaning, which is a waste of time and effort when the slices could have been labeled directly.
• The order of the slices and the corresponding labels appears random. Ordering them by size would have provided useful information that could have been assimilated instantly.
• The bright colors of the pie slices produce sensory overkill. Bright colors ought to be reserved for specific data that should stand out from the rest.
24/04/14 pag. 49
Colors for the slices are too much alike to be clearly distinguished
24/04/14 pag. 50
Another example of an ineffective display
24/04/14 pag. 51
This bar graph, found on a dashboard, exhibits several design problems
24/04/14 pag. 52
Another example of a poorly designed dashboard
24/04/14 pag. 53
This 3‐D bar graph illustrates the problem of occlusion.
24/04/14 pag. 54
common mistake 8: encoding quantitative data inaccurately
24/04/14 pag. 55
Inaccurate encoding
24/04/14 pag. 56
common mistake 9: arranging the data poorly
24/04/14 pag. 57
• The most important data ought to be prominent. • Data that require immediate attention ought to stand out. • Data that should be compared ought to be arranged and visually
designed to encourage comparisons.
24/04/14 pag. 58
common mistake 10: highlighting important data
ineffectively or not at all
This dashboard fails to differenCate data by its importance, giving relaCvely equal prominence to everything on the screen.
24/04/14 pag. 60
common mistake 11: cluttering the display with useless
decoration
24/04/14 pag. 61
This dashboard is trying to look like something that it is not, resulCng in useless and distracCng decoraCon.
This dashboard exhibits several examples of dysfunctional decoration.
24/04/14 pag. 65
common mistake 12: misusing or overusing color
24/04/14 pag. 66
Too much color undermines its power
24/04/14 pag. 67
common mistake 13: designing an unattractive visual display
24/04/14 pag. 68
This is an example of a rather unattractive dashboard.
24/04/14 pag. 69
Strategies to create effective information dashboards
24/04/14 pag. 70
Strategies to create effective dashboards
• Characteristics of a well designed dashboard • Reducing the non data pixels • Enhancing the data pixels • Designing dashboards for usability
24/04/14 pag. 71
Characteristics of a well designed dashboard
The fundamental challenge of dashboard design is to effectively display a great deal of often disparate data in a small amount of space.
24/04/14 pag. 72
Like airplane cockpits, dashboards require thoughtful design
24/04/14 pag. 73
Well-designed dashboards deliver information that is …
• exceptionally well organized. • condensed, primarily in the form of summaries and exceptions • specific to and customized for the dashboard's audience and objectives • displayed using concise and often small media that communicate the
data and its message in the clearest and most direct way possible
24/04/14 pag. 74
Condensing information
• Summarization – Represent a set of numbers (o\en a large set) as a single number. – The two most common summaries are sums and averages.
• Exception – Why make someone wade through hundreds of values when only one or
two require a^enCon? – We call these criCcal values excepCons.
This dashboard displays an excessive amount of non-data pixels.
24/04/14 pag. 76
Key goals and steps of visual dashboard design.
24/04/14 pag. 77
Eliminate graphics that provide decoration only
24/04/14 pag. 78
Eliminate all unnecessary non-data pixels
24/04/14 pag. 79
Eliminate all unnecessary non-data pixels
Unnecessary borders around sections of data fragment the display.
24/04/14 pag. 80
Eliminate all unnecessary non-data pixels
Fill colors to separate sections of the display are unnecessary
24/04/14 pag. 81
Eliminate all unnecessary non-data pixels
Gradients of color both on the bars of this graph and across the entire background add distracting non-
data pixels.
24/04/14 pag. 82
Eliminate all unnecessary non-data pixels
Grid lines in graphs are rarely useful. They are one of the most prevalent forms of distracting non-data
pixels found in dashboards.
24/04/14 pag. 83
Eliminate all unnecessary non-data pixels
Grid lines in tables can make otherwise simple displays difficult to look at.
24/04/14 pag. 84
Eliminate all unnecessary non-data pixels
Fill colors should be used to delineate rows in a table only when this is necessary to help viewers' eyes
track across the rows.
24/04/14 pag. 85
Eliminate all unnecessary non-data pixels
A complete border around the data region of a graph should be avoided when a single set of axes would adequately define the space.
24/04/14 pag. 86
Eliminate all unnecessary non-data pixels
3D should always be avoided when the added dimension of depth doesn't represent actual data.
24/04/14 pag. 87
Eliminate all unnecessary non-data pixels
This dashboard is filled with visual components and a^ributes that serve the sole purpose of simulaCng real physical objects.
24/04/14 pag. 88
De-emphasize and regularize the non-data pixels that remain
Axis lines used to define the data region of a graph are almost always useful, but they can be muted, like those on the right.
24/04/14 pag. 89
De-emphasize and regularize the non-data pixels that remain
Lines can be used effecCvely to delineate adjacent secCons of the display from one another, but the weight of these lines can be kept to a minimum.
24/04/14 pag. 90
Grid lines when necessary to read graph effectively
24/04/14 pag. 91
De-emphasize and regularize the non-data pixels that remain
Grid lines and fill colors can be used in tables to clearly distinguish some columns from others, but this should be done in the muted manner seen below rather than the heavy-handed manner seen above.
24/04/14 pag. 92
De-emphasize and regularize the non-data pixels that remain
Fill colors can be used to delineate rows in a table when necessary to help viewers' eyes scan across the rows, but this should always be done in the muted manner seen below rather than the visually weighty manner seen above.
24/04/14 pag. 93
De-emphasize and regularize the non-data pixels that remain
This dashboard gives navigaConal and data selecCon controls far more dominance and space than they deserve.
24/04/14 pag. 95
Eliminate all unnecessary data pixels
24/04/14 pag. 96
Highlight the most important data pixels
• The most important information can be divided into two categories: 1. InformaCon that is always important 2. InformaCon that is only important at the moment
• Second category requires dynamic means of emphasis
24/04/14 pag. 97
Highlight the most important data pixels
Different degrees of visual emphasis are associated with different regions of a dashboard.
Highlight the most important data pixels
The most valuable real estate on this dashboard is dedicated to a company logo and meaningless decoration.
24/04/14 pag. 99
Highlight the most important data pixels
Simple symbols can be used along with varying color intensities to dynamically highlight data.
24/04/14 pag. 100
Designing dashboards for usability
Organize the informaCon to support its
meaning and use
Make the viewing experience aestheCcally pleasing
Design for use as a launch pad
24/04/14 pag. 101
Organize information to support meaning and use
• Organize groups according to business functions, entities, and use. • Co-locate items that belong to the same group. • Delineate groups using the least visible means. • Support meaningful comparisons. • Discourage meaningless comparisons.
24/04/14 pag. 102
Delineate groups using the least visible means
The four tables on the previous slide have been separated effecCvely using white space.
24/04/14 pag. 103
Delineate groups using the least visible means
four tables have been separated using light borders
24/04/14 pag. 104
Support meaningful comparisons
• You can encourage meaningful comparisons by: – Combining items in a single table or graph (if appropriate) – Placing items close to one another – Linking items in different groups using a common color – Including comparaCve values (for example, raCos, percentages, or actual variances) whenever useful for clarity and efficiency
24/04/14 pag. 105
Support meaningful comparisons
24/04/14 pag. 106
Support meaningful comparisons
24/04/14 pag. 107
Discourage meaningless comparisons
24/04/14 pag. 108
Discourage meaningless comparisons
• You can discourage meaningless comparisons by – separaCng items from one another spaCally (if appropriate). – using different colors.
24/04/14 pag. 109
Designing dashboards for usability
Organize the informaCon to support its
meaning and use
Make the viewing experience aestheCcally pleasing
Design for use as a launch pad
24/04/14 pag. 111
Choose colors appropriately
Avoid the use of bright colors except to highlight parCcular data. SCck with more subdued colors for most of what's displayed.
24/04/14 pag. 112
Choose the right font
24/04/14 pag. 113
Designing dashboards for usability
Organize the informaCon to support its
meaning and use
Make the viewing experience aestheCcally pleasing
Design for use as a launch pad
24/04/14 pag. 114
Design for use as a launch pad
• Dashboards should almost always be designed for interaction. The most common types of dashboard interaction are: – Drilling down into the details – Slicing the data to narrow the field of focus
24/04/14 pag. 115
Good and bad examples
A sample sales dashboard that puts into practice the principles
24/04/14 pag. 117
Comments example 1
• Color has been used sparingly. • The prime real estate on the screen has been used for the most
important data. • Small, concise display media have been used to support the display
of a dense set of data in a small amount of space. • Some measures have been presented both graphically and as text. • The display of quarter-to-date revenue per region combines the
actual and pipeline values in the form of stacked bars. • White space alone has been used to delineate and group data. • The dashboard has not been cluttered with instructions and
descriptions that will seldom be needed.
24/04/14 pag. 119
Comments example 2
• Relies almost entirely on text to communicate, using visual means only in the form of green, light red, and vibrant red hues. – Dashboards are meant to provide immediate insight – Text requires reading a serial process that is much slower than the parallel processing of a
visually oriented dashboard that makes good use of the pre-‐a^enCve a^ributes. • To compare actual measures to their targets, mental math is required. • Numbers have been center-justified, rather than right-justified. This makes
them harder to compare when scanning up and down a column. • All four quarters of the current year have been given equal emphasis.
– A sales manager would have greater interest in the current quarter. – The design of the dashboard should have focused on the current quarter and
comparaCvely reduced emphasis on the other quarters. • The subdued shade of red and the equally subdued shade of green might not
be distinguishable for colorblind people. • The numbers that ought to stand out most are the hardest to read against
the dark red background.
24/04/14 pag. 121
Comments example 3
• The grid lines that appear in the tables are not needed at all. Even if they were needed, they should have been muted visually.
• The grid lines that appear in the graphs are also unnecessary. They distract from the data. Especially in the context of a dashboard, you can't afford to include any unnecessary visual content.
• The drop shadows on the bars and lines in two of the graphs and on the pie chart are visual fluff. These elements serve only to distract.
• All of the numbers in the tables have been expressed as percentages. If those who use this dashboard only care about performance relative to targets, this is fine, but it is likely that they will want a sense of the actual amounts as well.
• The pie chart is not the most effective display medium. Assuming that it is worthwhile to display how the 90% probability portion of the revenue pipeline is distributed among the regions, a bar graph with the regions in ranked order would have communicated this information more effectively.
• Overall, this dashboard exhibits too many bright colors. The dashboard as a whole is visually overwhelming and fails to feature the most important data.
• There is no comparison of trends in the revenue history. The 12-month revenue history shown in the line graph is useful, but it would also have been useful to see this history per region and per product, to allow the comparison of trends.
24/04/14 pag. 123
Comments example 4
• The display media were not well chosen. – The circular representaCons of Cme-‐series data using hues to encode
states of performance (good, saCsfactory, and poor) are clever – but for the purpose of showing history, these are not as intuiCve or
informaCve as a linear display, such as a line graph. • None of the measures that appear on the left side of the
dashboard is revealed beyond its performance state. Knowing the actual revenue amount and more about how it compares to the target would certainly be useful to a sales manager.
• The circular display mechanisms treat all periods of time equally. There is no emphasis on the current quarter.
• Gradient fill colors in the bar graphs add meaningless visual interest. They also influence perception of the values encoded by the bars in subtle ways. Bars that extend into the darker sections of the gradient appear slightly different from those that extend only into the lighter sections. Dashboard designers should be conscious of even these subtle effects and avoid them.
24/04/14 pag. 124
Questions?
24/04/14 pag. 125
Readings
h^p://pdf.th7.cn/down/files/1312/informaCon_dashboard_design.pdf