24/04/14 pag. 1
Information visualization lecture 7
information dashboards
Katrien Verbert
Department of Computer Science
...
24/04/14 pag. 2
Most information dashboards that are used in business today fall far
short of their potential (Stephen Few...
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 ...
24/04/14 pag. 18
Characteristics
•  Dashboards are visual displays.
•  Dashboards display information needed to achieve sp...
24/04/14 pag. 19
Categorizing dashboards
Variable	
   Values	
  
Role	
   Strategic	
  
OperaConal	
  
AnalyCcal	
  
Type	...
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 ...
24/04/14 pag. 23
This	
  dashboard	
  fragments	
  the	
  data	
  in	
  a	
  way	
  that	
  undermines	
  the	
  viewer's	...
24/04/14 pag. 24
This	
  dashboard	
  requires	
  viewers	
  to	
  click	
  on	
  a	
  desired	
  product	
  and	
  view	
...
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	
  s...
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	
  are...
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. 45This	
  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 ...
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...
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	
  
pr...
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,	
  resul...
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...
24/04/14 pag. 71
Characteristics of a well designed dashboard
The fundamental challenge of dashboard design is to effectiv...
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, pri...
24/04/14 pag. 74
Condensing information
•  Summarization
–  Represent	
  a	
  set	
  of	
  	
  numbers	
  (oen	
  a	
  lar...
 
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 displa...
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 th...
24/04/14 pag. 82
Eliminate all unnecessary non-data pixels
Grid lines in graphs are rarely useful. They are one of the mos...
24/04/14 pag. 83
Eliminate all unnecessary non-data pixels
Grid lines in tables can make otherwise simple displays difficu...
24/04/14 pag. 84
Eliminate all unnecessary non-data pixels
	
  
Fill colors should be used to delineate rows in a table on...
24/04/14 pag. 85
Eliminate all unnecessary non-data pixels
A	
  complete	
  border	
  around	
  the	
  data	
  region	
  o...
24/04/14 pag. 86
Eliminate all unnecessary non-data pixels
3D should always be avoided when the added dimension of depth d...
24/04/14 pag. 87
Eliminate all unnecessary non-data pixels
This	
  dashboard	
  is	
  filled	
  with	
  visual	
  component...
24/04/14 pag. 88
De-emphasize and regularize the non-data
pixels that remain
Axis lines used to define the data region of ...
24/04/14 pag. 89
De-emphasize and regularize the non-data
pixels that remain
Lines	
  can	
  be	
  used	
  effecCvely	
  to...
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 tab...
24/04/14 pag. 92
De-emphasize and regularize the non-data
pixels that remain
Fill colors can be used to delineate rows in ...
24/04/14 pag. 93
De-emphasize and regularize the non-data
pixels that remain
This	
  dashboard	
  gives	
  navigaConal	
  ...
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
catego...
24/04/14 pag. 97
Highlight the most important data pixels
Different	
  degrees	
  of	
  visual	
  emphasis	
  are	
  associ...
Highlight the most important data pixels
The most valuable real estate on this dashboard is dedicated to a company logo an...
24/04/14 pag. 99
Highlight the most important data pixels
Simple symbols can be used along with varying color intensities ...
24/04/14 pag. 100
Designing dashboards for usability
Organize	
  the	
  
informaCon	
  to	
  
support	
  its	
  
meaning	
...
24/04/14 pag. 101
Organize information to support meaning and use
•  Organize groups according to business functions, enti...
24/04/14 pag. 102
Delineate groups using the least visible means
The	
  four	
  tables	
  on	
  the	
  previous	
  slide	
...
24/04/14 pag. 103
Delineate groups using the least visible means
four	
  tables	
  have	
  been	
  separated	
  using	
  l...
24/04/14 pag. 104
Support meaningful comparisons
•  You can encourage meaningful comparisons by:
–  Combining	
  items	
  ...
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	
  item...
24/04/14 pag. 109
Designing dashboards for usability
Organize	
  the	
  
informaCon	
  to	
  
support	
  its	
  
meaning	
...
24/04/14 pag. 111
Choose colors appropriately
Avoid	
  the	
  use	
  of	
  bright	
  colors	
  except	
  to	
  highlight	
...
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	
...
24/04/14 pag. 114
Design for use as a launch pad
•  Dashboards should almost always be designed for interaction.
The most ...
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 use...
24/04/14 pag. 119
Comments example 2
•  Relies almost entirely on text to communicate, using visual means only in the
form...
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 ...
24/04/14 pag. 123
Comments example 4
•  The display media were not well chosen.
–  The	
  	
  circular	
  representaCons	
...
24/04/14 pag. 124
Questions?
24/04/14 pag. 125
Readings
h^p://pdf.th7.cn/down/files/1312/informaCon_dashboard_design.pdf	
  
	
  
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Information visualization: information dashboards
Upcoming SlideShare
Loading in...5
×

Information visualization: information dashboards

2,351

Published on

Published in: Education, Technology

Information visualization: information dashboards

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

    Clipping is a handy way to collect important slides you want to go back to later.

×