Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Information visualization: information dashboards


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
  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://