Information visualization: information dashboards
-
Upload
katrien-verbert -
Category
Education
-
view
2.230 -
download
6
Transcript of Information visualization: information dashboards
![Page 1: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/1.jpg)
24/04/14 pag. 1
Information visualization lecture 7
information dashboards
Katrien Verbert Department of Computer Science
Faculty of Science Vrije Universiteit Brussel
![Page 2: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/2.jpg)
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
![Page 3: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/3.jpg)
24/04/14 pag. 3
All that glitters is not gold
![Page 4: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/4.jpg)
24/04/14 pag. 4
Dispelling the Confusion
![Page 5: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/5.jpg)
24/04/14 pag. 5
![Page 6: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/6.jpg)
![Page 7: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/7.jpg)
![Page 8: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/8.jpg)
![Page 9: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/9.jpg)
![Page 10: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/10.jpg)
![Page 11: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/11.jpg)
![Page 12: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/12.jpg)
![Page 13: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/13.jpg)
24/04/14 pag. 13
![Page 14: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/14.jpg)
![Page 15: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/15.jpg)
![Page 16: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/16.jpg)
24/04/14 pag. 16
definition
![Page 17: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/17.jpg)
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.
![Page 18: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/18.jpg)
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.
![Page 19: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/19.jpg)
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
![Page 20: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/20.jpg)
24/04/14 pag. 20
thirteen common mistakes in dashboard design
![Page 21: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/21.jpg)
24/04/14 pag. 21
common mistake 1: exceeding the boundaries of a
single screen
![Page 22: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/22.jpg)
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
![Page 23: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/23.jpg)
24/04/14 pag. 23
This dashboard fragments the data in a way that undermines the viewer's ability to see meaningful relaConships.
![Page 24: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/24.jpg)
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.
![Page 25: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/25.jpg)
24/04/14 pag. 25
Requiring scrolling
![Page 26: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/26.jpg)
24/04/14 pag. 26
common mistake 2: supplying inadequate context for the data
![Page 27: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/27.jpg)
24/04/14 pag. 27
These dashboard gauges fail to provide adequate context to make the measures meaningful
![Page 28: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/28.jpg)
24/04/14 pag. 28
Incorporating context
![Page 29: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/29.jpg)
24/04/14 pag. 29
common mistake 3: displaying excessive detail or precision
![Page 30: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/30.jpg)
24/04/14 pag. 30
This dashboard shows unnecessary detail, such as Cmes expressed to the second and measures expressed to 10 decimal places.
![Page 31: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/31.jpg)
24/04/14 pag. 31
common mistake 4: choosing a deficient measure
![Page 32: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/32.jpg)
24/04/14 pag. 32
use of measures that fail to directly express the intended message
![Page 33: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/33.jpg)
24/04/14 pag. 33
This graph is designed to emphasize deviation from a target
![Page 34: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/34.jpg)
24/04/14 pag. 34
common mistake 5: choosing inappropriate display media
![Page 35: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/35.jpg)
24/04/14 pag. 35
this chart illustrates a common problem with pie charts
![Page 36: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/36.jpg)
24/04/14 pag. 36
even when used correctly, pie charts are difficult to interpret accurately
![Page 37: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/37.jpg)
24/04/14 pag. 37
horizontal bar graph does clearly a better job than the preceding pie charts
![Page 38: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/38.jpg)
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
![Page 39: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/39.jpg)
24/04/14 pag. 39
This bar graph does a good job of displaying a time series of actual versus budgeted revenue values
![Page 40: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/40.jpg)
24/04/14 pag. 40
This radar graph obscures the straightforward data that it's trying to convey.
![Page 41: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/41.jpg)
24/04/14 pag. 41
This bar graph effectively compares actual to budgeted revenue data
![Page 42: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/42.jpg)
24/04/14 pag. 42
This display uselessly encodes quantitative values on a map of the United States
![Page 43: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/43.jpg)
24/04/14 pag. 43
This table provides a more appropriate display of the regional revenue data
![Page 44: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/44.jpg)
24/04/14 pag. 44
common mistake 6: introducing meaningless variety
![Page 45: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/45.jpg)
24/04/14 pag. 45 This dashboard exhibits an unnecessary variety of display media.
![Page 46: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/46.jpg)
24/04/14 pag. 46
common mistake 7: using poorly designed display media
![Page 47: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/47.jpg)
24/04/14 pag. 47
This pie chart illustrates several design problems
![Page 48: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/48.jpg)
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.
![Page 49: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/49.jpg)
24/04/14 pag. 49
Colors for the slices are too much alike to be clearly distinguished
![Page 50: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/50.jpg)
24/04/14 pag. 50
Another example of an ineffective display
![Page 51: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/51.jpg)
24/04/14 pag. 51
This bar graph, found on a dashboard, exhibits several design problems
![Page 52: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/52.jpg)
24/04/14 pag. 52
Another example of a poorly designed dashboard
![Page 53: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/53.jpg)
24/04/14 pag. 53
This 3‐D bar graph illustrates the problem of occlusion.
![Page 54: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/54.jpg)
24/04/14 pag. 54
common mistake 8: encoding quantitative data inaccurately
![Page 55: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/55.jpg)
24/04/14 pag. 55
Inaccurate encoding
![Page 56: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/56.jpg)
24/04/14 pag. 56
common mistake 9: arranging the data poorly
![Page 57: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/57.jpg)
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.
![Page 58: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/58.jpg)
24/04/14 pag. 58
common mistake 10: highlighting important data
ineffectively or not at all
![Page 59: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/59.jpg)
This dashboard fails to differenCate data by its importance, giving relaCvely equal prominence to everything on the screen.
![Page 60: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/60.jpg)
24/04/14 pag. 60
common mistake 11: cluttering the display with useless
decoration
![Page 61: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/61.jpg)
24/04/14 pag. 61
This dashboard is trying to look like something that it is not, resulCng in useless and distracCng decoraCon.
![Page 62: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/62.jpg)
![Page 63: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/63.jpg)
![Page 64: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/64.jpg)
This dashboard exhibits several examples of dysfunctional decoration.
![Page 65: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/65.jpg)
24/04/14 pag. 65
common mistake 12: misusing or overusing color
![Page 66: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/66.jpg)
24/04/14 pag. 66
Too much color undermines its power
![Page 67: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/67.jpg)
24/04/14 pag. 67
common mistake 13: designing an unattractive visual display
![Page 68: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/68.jpg)
24/04/14 pag. 68
This is an example of a rather unattractive dashboard.
![Page 69: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/69.jpg)
24/04/14 pag. 69
Strategies to create effective information dashboards
![Page 70: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/70.jpg)
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
![Page 71: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/71.jpg)
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.
![Page 72: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/72.jpg)
24/04/14 pag. 72
Like airplane cockpits, dashboards require thoughtful design
![Page 73: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/73.jpg)
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
![Page 74: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/74.jpg)
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.
![Page 75: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/75.jpg)
This dashboard displays an excessive amount of non-data pixels.
![Page 76: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/76.jpg)
24/04/14 pag. 76
Key goals and steps of visual dashboard design.
![Page 77: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/77.jpg)
24/04/14 pag. 77
Eliminate graphics that provide decoration only
![Page 78: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/78.jpg)
24/04/14 pag. 78
Eliminate all unnecessary non-data pixels
![Page 79: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/79.jpg)
24/04/14 pag. 79
Eliminate all unnecessary non-data pixels
Unnecessary borders around sections of data fragment the display.
![Page 80: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/80.jpg)
24/04/14 pag. 80
Eliminate all unnecessary non-data pixels
Fill colors to separate sections of the display are unnecessary
![Page 81: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/81.jpg)
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.
![Page 82: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/82.jpg)
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.
![Page 83: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/83.jpg)
24/04/14 pag. 83
Eliminate all unnecessary non-data pixels
Grid lines in tables can make otherwise simple displays difficult to look at.
![Page 84: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/84.jpg)
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.
![Page 85: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/85.jpg)
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.
![Page 86: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/86.jpg)
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.
![Page 87: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/87.jpg)
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.
![Page 88: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/88.jpg)
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.
![Page 89: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/89.jpg)
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.
![Page 90: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/90.jpg)
24/04/14 pag. 90
Grid lines when necessary to read graph effectively
![Page 91: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/91.jpg)
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.
![Page 92: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/92.jpg)
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.
![Page 93: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/93.jpg)
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.
![Page 94: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/94.jpg)
![Page 95: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/95.jpg)
24/04/14 pag. 95
Eliminate all unnecessary data pixels
![Page 96: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/96.jpg)
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
![Page 97: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/97.jpg)
24/04/14 pag. 97
Highlight the most important data pixels
Different degrees of visual emphasis are associated with different regions of a dashboard.
![Page 98: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/98.jpg)
Highlight the most important data pixels
The most valuable real estate on this dashboard is dedicated to a company logo and meaningless decoration.
![Page 99: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/99.jpg)
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.
![Page 100: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/100.jpg)
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
![Page 101: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/101.jpg)
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.
![Page 102: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/102.jpg)
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.
![Page 103: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/103.jpg)
24/04/14 pag. 103
Delineate groups using the least visible means
four tables have been separated using light borders
![Page 104: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/104.jpg)
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
![Page 105: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/105.jpg)
24/04/14 pag. 105
Support meaningful comparisons
![Page 106: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/106.jpg)
24/04/14 pag. 106
Support meaningful comparisons
![Page 107: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/107.jpg)
24/04/14 pag. 107
Discourage meaningless comparisons
![Page 108: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/108.jpg)
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.
![Page 109: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/109.jpg)
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
![Page 110: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/110.jpg)
![Page 111: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/111.jpg)
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.
![Page 112: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/112.jpg)
24/04/14 pag. 112
Choose the right font
![Page 113: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/113.jpg)
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
![Page 114: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/114.jpg)
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
![Page 115: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/115.jpg)
24/04/14 pag. 115
Good and bad examples
![Page 116: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/116.jpg)
A sample sales dashboard that puts into practice the principles
![Page 117: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/117.jpg)
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.
![Page 118: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/118.jpg)
![Page 119: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/119.jpg)
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.
![Page 120: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/120.jpg)
![Page 121: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/121.jpg)
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.
![Page 122: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/122.jpg)
![Page 123: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/123.jpg)
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.
![Page 124: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/124.jpg)
24/04/14 pag. 124
Questions?
![Page 125: Information visualization: information dashboards](https://reader033.fdocuments.in/reader033/viewer/2022052315/55498514b4c90582588b4f15/html5/thumbnails/125.jpg)
24/04/14 pag. 125
Readings
h^p://pdf.th7.cn/down/files/1312/informaCon_dashboard_design.pdf