HUMAN COMPUTER INTERACTION LABVISUALIZATION IN TEL    Joris Klerkx, Erik Duval     @jkofmsk    @ErikDuval
Imagine you never saw a car...     Would the following definitions help to explain it?                                     ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Imagine you never saw a car...        Would the following definitions help to explain it?                                  ...
Lets try to bust 2 myths...
Lets try to bust 2 myths...Visualisations are just cool graphics
Lets try to bust 2 myths...Visualisations are just cool graphics     Graphics part of bigger picture of what stories to co...
Lets try to bust 2 myths...Visualisations are just cool graphics     Graphics part of bigger picture of what stories to co...
Lets try to bust 2 myths...Visualisations are just cool graphics     Graphics part of bigger picture of what stories to co...
Graph Design Quiz        http://www.perceptualedge.com/
Which visualisation makes it easier to determine whether      ‘Real Estate’ or ‘Bonds’ has the bigger share?              ...
Which visualisation makes it easier to determine whether      ‘Real Estate’ or ‘Bonds’ has the bigger share?              ...
Which visualisation makes it easier to determine whether      ‘Real Estate’ or ‘Bonds’ has the bigger share?              ...
Which of these line graphs is easier to read?                                    http://www.perceptualedge.com/
Which of these two tables is easier to read?                                   http://www.perceptualedge.com/
Which graph makes it easier to focus on the pattern ofchange through time, instead of the individual values?              ...
Which of these two graphs encodes the values accurately?                                        http://www.perceptualedge....
Which of these two maps makes it easier to find all      counties with positive growth rates?                              ...
Which graph makes it easier to determine         R&Ds travel expense?                                http://www.perceptual...
Which labels are easier to read?                             http://www.perceptualedge.com/
Which graph is easier to look at?                              http://www.perceptualedge.com/
Which table allows you to see the areas of poor         performance more quickly?                                    http:...
Seems ok?            http://www.perceptualedge.com/
Seems ok?            http://www.perceptualedge.com/
What is information visualisation?
A definition...Information Visualisation is the use of interactivevisual representations to amplify cognition  [Card. et. al]
A definition...Information Visualisation is the use of interactivevisual representations to amplify cognition              ...
EXAMPLES IN TELFind relevant (learning) material              Understand learning materialProvoke collaboration between le...
Find relevant (learning) material                     Understand learning material            Provoke collaboration betwee...
Find relevant (learning) material                     Understand learning material            Provoke collaboration betwee...
Find relevant (learning) material                     Understand learning material            Provoke collaboration betwee...
Find relevant (learning) material                     Understand learning material            Provoke collaboration betwee...
Find relevant (learning) material                     Understand learning material            Provoke collaboration betwee...
Understand learning material                  Find relevant (learning) material           Provoke collaboration between le...
Understand learning material                  Find relevant (learning) material           Provoke collaboration between le...
Understand learning material                        http://www.visual-literacy.org/periodic_table/ periodic_table.html    ...
Understand learning material                        http://www.visual-literacy.org/periodic_table/ periodic_table.html    ...
Understand learning material                        http://www.visual-literacy.org/periodic_table/ periodic_table.html    ...
Understand learning material                        http://www.visual-literacy.org/periodic_table/ periodic_table.html    ...
Understand learning material                        http://www.visual-literacy.org/periodic_table/ periodic_table.html    ...
Provoke collaboration between learners                    Find relevant (learning) material                      Understan...
Provoke collaboration between learners                    Find relevant (learning) material                      Understan...
Provoke collaboration between learners                    Find relevant (learning) material                      Understan...
Provoke Awareness & Self-reflection                   Find relevant (learning) material                     Understand lear...
Provoke Awareness & Self-reflection                   Find relevant (learning) material                     Understand lear...
Provoke Awareness & Self-reflection                   Find relevant (learning) material                     Understand lear...
Provoke Awareness & Self-reflection                   Find relevant (learning) material                     Understand lear...
How to design a visualisation application
How to design a visualisation application                You have to know a little bit of facts first...
Humans have advanced perceptual abilities
Humans have advanced perceptual abilities      Our brains makes us extremely good at recognizing visual patterns
Humans have advanced perceptual abilities      Our brains makes us extremely good at recognizing visual patterns Humans ha...
Humans have advanced perceptual abilities      Our brains makes us extremely good at recognizing visual patterns Humans ha...
Humans have advanced perceptual abilities      Our brains makes us extremely good at recognizing visual patterns          ...
Humans have advanced perceptual abilities      Our brains makes us extremely good at recognizing visual patterns          ...
THE VISUALIZATION PIPELINE
Step 1: Think of a dataset,       Formulate the questions
Step 1: Think of a dataset,       Formulate the questions           “where” “when’’ “how much” “how often” (“why”)
Step 1: Think of a dataset,       Formulate the questions           “where” “when’’ “how much” “how often” (“why”)        ...
Step 1: Think of a dataset,        Formulate the questions              “where” “when’’ “how much” “how often” (“why”)    ...
Step 1: Think of a dataset,        Formulate the questions              “where” “when’’ “how much” “how often” (“why”)    ...
Step 1: Think of a dataset,        Formulate the questions              “where” “when’’ “how much” “how often” (“why”)    ...
Step 1: Think of a dataset,        Formulate the questions              “where” “when’’ “how much” “how often” (“why”)    ...
Step 3: Apply a visual mapping
Step 3: Apply a visual mapping    Encode data characteristics into visual form
Step 3: Apply a visual mapping    Encode data characteristics into visual form                              Simplicity is ...
Size       most commonly used (?)
Colors    used for identifying patterns & anomalies in big datasetsColor Principles - Hue, Saturation, and Value
Gestalt Principles ¡   Law	  of	  	  Proximity  The closer objects are to each other,  the more likely they are to be  pe...
Gestalt Principles ¡   Law	  of	  	  Proximity  The closer objects are to each other,  the more likely they are to be  pe...
Gestalt Principles ¡   Law	  of	  	  Proximity     The closer objects are to each other,     the more likely they are to ...
Gestalt Principles ¡   Law	  of	  	  Proximity     The closer objects are to each other,     the more likely they are to ...
Gestalt Principles ¡          Law	  of	  	  Similarity       Objects that are similar, with like      components or attri...
Gestalt Principles     ¡         Law	  of	  	  Similarity           Objects that are similar, with like          componen...
Gestalt Principles     ¡         Law	  of	  	  Similarity           Objects that are similar, with like          componen...
Gestalt Principles     ¡         Law	  of	  	  Similarity           Objects that are similar, with like          componen...
Gestalt Principles   ¡        Law	  of	  	  Continuation         Objects will be grouped as a whole if        they are co...
Gestalt Principles   ¡        Law	  of	  	  Continuation         Objects will be grouped as a whole if        they are co...
Gestalt Principles      ¡        Law	  of	  	  Continuation            Objects will be grouped as a whole if           th...
Gestalt Principles      ¡        Law	  of	  	  Continuation            Objects will be grouped as a whole if           th...
Shape - circles, rectangles, stars, icons,..Location - maps                  Network -node-link graphs    Time - animation...
Which visual encodings do you see?                     Example...London Tube Map
Which visual encodings do you see?                     Example...London Tube Map
e.g. sketch on papere.g. what kind of filtering mechanisms?
Step 3: Apply a visual mapping to your dataset           e.g. sketch on paper           e.g. what kind of filtering mechani...
Step 3: Apply a visual mapping to your dataset           e.g. sketch on paperStep 4: Think about interaction of visualisat...
Step 5?
Step 5?Feedback loop
Step 5: How to evaluate visualisations?Typical HCI metrics don’t always work that well  •time required to learn the system...
Step 5: How to evaluate visualisations?                          Not so easy: how to measure improved insights?Typical HCI...
Some metrics that can be used
Some metrics that can be used•   Functionality - to what extend the system provides the functionalities    required by the...
Build Usable & Useful Visualisations
Build Usable & Useful Visualisations
Build Usable & Useful Visualisations•   Analytical Evaluation - formal study with experts•   Empirical evaluation - experi...
Rapid Prototyping                                                                TimeIteration 1           Iteration 2    ...
Go outside your research lab       Evaluate in real-life settings                             41
Go outside your research lab           Evaluate in real-life settings            Ec-tel 2010  Figure 4: Setting of the eva...
Rapid Prototyping                                                       TimeIteration 1         Iteration 2       Iteratio...
Rapid Prototyping                                                           TimeIteration 1         Iteration 2        Ite...
Think aloud          Usability lab             Eye-tracking              questionnaires (SUS, TAM, ...)
Time for a bit of reflection   What did you learn?
POINTERS•   http://wearecolorblind.com/articles/quick-tips/•   http://infosthetics.com•   http://www.visualcomplexity.com/...
LIBRARIES•   Processing (!)•   http://wiki.okfn.org/OpenVisualisation•   http://flare.prefuse.org/•   http://iv.slis.indian...
FURTHER READINGS• “Readings in Information Visualization: Using Vision to Think”, Card, S et al• “Now   i see”, “Show Me t...
THANK YOU FOR YOUR    ATTENTION!  joris.klerkx@cs.kuleuven.be          @jkofmsk                       48
Workshop on visualization in tel
Workshop on visualization in tel
Upcoming SlideShare
Loading in...5
×

Workshop on visualization in tel

2,047

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,047
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Workshop on visualization in tel

  1. 1. HUMAN COMPUTER INTERACTION LABVISUALIZATION IN TEL Joris Klerkx, Erik Duval @jkofmsk @ErikDuval
  2. 2. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car
  3. 3. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile
  4. 4. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..
  5. 5. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar
  6. 6. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar
  7. 7. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar3. It’s a boxlike enclosure for passengers, with wheels
  8. 8. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar3. It’s a boxlike enclosure for passengers, with wheels
  9. 9. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar3. It’s a boxlike enclosure for passengers, with wheels4. A chariot, carriage, or cart
  10. 10. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar3. It’s a boxlike enclosure for passengers, with wheels4. A chariot, carriage, or cart
  11. 11. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar3. It’s a boxlike enclosure for passengers, with wheels4. A chariot, carriage, or cart
  12. 12. Imagine you never saw a car... Would the following definitions help to explain it? http://www.thefreedictionary.com/car1. It’s an automobile A phone that automatically takes a call..2. It’s a vehicle, such as a streetcar3. It’s a boxlike enclosure for passengers, with wheels4. A chariot, carriage, or cart A picture is worth a 1000 words
  13. 13. Lets try to bust 2 myths...
  14. 14. Lets try to bust 2 myths...Visualisations are just cool graphics
  15. 15. Lets try to bust 2 myths...Visualisations are just cool graphics Graphics part of bigger picture of what stories to communicate & how
  16. 16. Lets try to bust 2 myths...Visualisations are just cool graphics Graphics part of bigger picture of what stories to communicate & howOnly experts can create good visualizations
  17. 17. Lets try to bust 2 myths...Visualisations are just cool graphics Graphics part of bigger picture of what stories to communicate & howOnly experts can create good visualizations Maybe faster, but there are simple techniques anyone can apply
  18. 18. Graph Design Quiz http://www.perceptualedge.com/
  19. 19. Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share? http://www.perceptualedge.com/
  20. 20. Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share? http://www.perceptualedge.com/
  21. 21. Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share? “Save the pies for dessert” S. Few http://www.perceptualedge.com/
  22. 22. Which of these line graphs is easier to read? http://www.perceptualedge.com/
  23. 23. Which of these two tables is easier to read? http://www.perceptualedge.com/
  24. 24. Which graph makes it easier to focus on the pattern ofchange through time, instead of the individual values? http://www.perceptualedge.com/
  25. 25. Which of these two graphs encodes the values accurately? http://www.perceptualedge.com/
  26. 26. Which of these two maps makes it easier to find all counties with positive growth rates? http://www.perceptualedge.com/
  27. 27. Which graph makes it easier to determine R&Ds travel expense? http://www.perceptualedge.com/
  28. 28. Which labels are easier to read? http://www.perceptualedge.com/
  29. 29. Which graph is easier to look at? http://www.perceptualedge.com/
  30. 30. Which table allows you to see the areas of poor performance more quickly? http://www.perceptualedge.com/
  31. 31. Seems ok? http://www.perceptualedge.com/
  32. 32. Seems ok? http://www.perceptualedge.com/
  33. 33. What is information visualisation?
  34. 34. A definition...Information Visualisation is the use of interactivevisual representations to amplify cognition [Card. et. al]
  35. 35. A definition...Information Visualisation is the use of interactivevisual representations to amplify cognition [Card. et. al] Find out what a data set is about What are the stories behind the data? Communicating data Facilitate human interaction for exploration and understanding Empower people to make informed decisions
  36. 36. EXAMPLES IN TELFind relevant (learning) material Understand learning materialProvoke collaboration between learners Provoke Awareness & Self-reflection
  37. 37. Find relevant (learning) material Understand learning material Provoke collaboration between learners Provoke Awareness & Self-reflection
  38. 38. Find relevant (learning) material Understand learning material Provoke collaboration between learners Provoke Awareness & Self-reflection
  39. 39. Find relevant (learning) material Understand learning material Provoke collaboration between learners Provoke Awareness & Self-reflection
  40. 40. Find relevant (learning) material Understand learning material Provoke collaboration between learners Provoke Awareness & Self-reflection
  41. 41. Find relevant (learning) material Understand learning material Provoke collaboration between learners Provoke Awareness & Self-reflection
  42. 42. Understand learning material Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  43. 43. Understand learning material Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  44. 44. Understand learning material http://www.visual-literacy.org/periodic_table/ periodic_table.html rable Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  45. 45. Understand learning material http://www.visual-literacy.org/periodic_table/ periodic_table.html rable Be careful with using techniques in other contexts Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  46. 46. Understand learning material http://www.visual-literacy.org/periodic_table/ periodic_table.html rable Be careful with using techniques in other contexts Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  47. 47. Understand learning material http://www.visual-literacy.org/periodic_table/ periodic_table.html rable Be careful with using techniques in other contexts Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  48. 48. Understand learning material http://www.visual-literacy.org/periodic_table/ periodic_table.html rable Be careful with using techniques in other contexts Find relevant (learning) material Provoke collaboration between learners Provoke Awareness & Self-reflection
  49. 49. Provoke collaboration between learners Find relevant (learning) material Understand learning material Provoke Awareness & Self-reflection
  50. 50. Provoke collaboration between learners Find relevant (learning) material Understand learning material Provoke Awareness & Self-reflection
  51. 51. Provoke collaboration between learners Find relevant (learning) material Understand learning material Provoke Awareness & Self-reflection
  52. 52. Provoke Awareness & Self-reflection Find relevant (learning) material Understand learning material Provoke collaboration between learners
  53. 53. Provoke Awareness & Self-reflection Find relevant (learning) material Understand learning material Provoke collaboration between learners
  54. 54. Provoke Awareness & Self-reflection Find relevant (learning) material Understand learning material Provoke collaboration between learners
  55. 55. Provoke Awareness & Self-reflection Find relevant (learning) material Understand learning material Provoke collaboration between learners
  56. 56. How to design a visualisation application
  57. 57. How to design a visualisation application You have to know a little bit of facts first...
  58. 58. Humans have advanced perceptual abilities
  59. 59. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns
  60. 60. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Humans have little short term memory
  61. 61. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Humans have little short term memory Our brains remember relatively little of what we perceive
  62. 62. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Make Use of Gestalt principles Humans have little short term memory Our brains remember relatively little of what we perceive
  63. 63. Humans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Make Use of Gestalt principles Make it interactive, provide visual help Humans have little short term memory Our brains remember relatively little of what we perceive
  64. 64. THE VISUALIZATION PIPELINE
  65. 65. Step 1: Think of a dataset, Formulate the questions
  66. 66. Step 1: Think of a dataset, Formulate the questions “where” “when’’ “how much” “how often” (“why”)
  67. 67. Step 1: Think of a dataset, Formulate the questions “where” “when’’ “how much” “how often” (“why”) Who are your intended users?
  68. 68. Step 1: Think of a dataset, Formulate the questions “where” “when’’ “how much” “how often” (“why”) Who are your intended users?( Step 2: Gather the dataset )
  69. 69. Step 1: Think of a dataset, Formulate the questions “where” “when’’ “how much” “how often” (“why”) Who are your intended users?( Step 2: Gather the dataset ) eg. datatel, open data, census.gov, NY Times API, etc
  70. 70. Step 1: Think of a dataset, Formulate the questions “where” “when’’ “how much” “how often” (“why”) Who are your intended users?( Step 2: Gather the dataset ) eg. datatel, open data, census.gov, NY Times API, etc Define the characteristics of the data
  71. 71. Step 1: Think of a dataset, Formulate the questions “where” “when’’ “how much” “how often” (“why”) Who are your intended users?( Step 2: Gather the dataset ) eg. datatel, open data, census.gov, NY Times API, etc Define the characteristics of the data Time? hierarchical? 1D? 2D? nD? network data?
  72. 72. Step 3: Apply a visual mapping
  73. 73. Step 3: Apply a visual mapping Encode data characteristics into visual form
  74. 74. Step 3: Apply a visual mapping Encode data characteristics into visual form Simplicity is the ultimate sophistication. Leonardo da Vinci
  75. 75. Size most commonly used (?)
  76. 76. Colors used for identifying patterns & anomalies in big datasetsColor Principles - Hue, Saturation, and Value
  77. 77. Gestalt Principles ¡ Law  of    Proximity The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  78. 78. Gestalt Principles ¡ Law  of    Proximity The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  79. 79. Gestalt Principles ¡ Law  of    Proximity The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)¡ Law  of  Symmetry Objects must be balanced or symmetrical to be seen as complete or whole (Chang, 2002).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  80. 80. Gestalt Principles ¡ Law  of    Proximity The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)¡ Law  of  Symmetry Objects must be balanced or symmetrical to be seen as complete or whole (Chang, 2002).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  81. 81. Gestalt Principles ¡ Law  of    Similarity Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows because of their similar attributes.http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  82. 82. Gestalt Principles ¡ Law  of    Similarity Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows because of their similar attributes.¡ Law  of  Common  Fate Objects with a common movement, that move in the same direction, at the same pace , at the same time are organised as a group (Ehrenstein, 2004).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  83. 83. Gestalt Principles ¡ Law  of    Similarity Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows because of their similar attributes.¡ Law  of  Common  Fate Objects with a common movement, that move in the same direction, at the same pace , at the same time are organised as a group (Ehrenstein, 2004).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  84. 84. Gestalt Principles ¡ Law  of    Similarity Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows because of their similar attributes.¡ Law  of  Common  Fate Objects with a common movement, that move in the same direction, at the same pace , at the same time are organised as a group (Ehrenstein, 2004).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  85. 85. Gestalt Principles ¡ Law  of    Continuation Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  86. 86. Gestalt Principles ¡ Law  of    Continuation Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  87. 87. Gestalt Principles ¡ Law  of    Continuation Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001). ¡ Law  of  Isomorphism Is similarity that can be behavioural or perceptual, and can be a response based on the viewers previous experiences (Luchins & Luchins, 1999; Chang, 2002). This law is the basis for symbolism (Schamber, 1986).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
  88. 88. Gestalt Principles ¡ Law  of    Continuation Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001). ¡ Law  of  Isomorphism Is similarity that can be behavioural or perceptual, and can be a response based on the viewers previous experiences (Luchins & Luchins, 1999; Chang, 2002). This law is the basis for symbolism (Schamber, 1986).http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation There are more!
  89. 89. Shape - circles, rectangles, stars, icons,..Location - maps Network -node-link graphs Time - animations ...
  90. 90. Which visual encodings do you see? Example...London Tube Map
  91. 91. Which visual encodings do you see? Example...London Tube Map
  92. 92. e.g. sketch on papere.g. what kind of filtering mechanisms?
  93. 93. Step 3: Apply a visual mapping to your dataset e.g. sketch on paper e.g. what kind of filtering mechanisms?
  94. 94. Step 3: Apply a visual mapping to your dataset e.g. sketch on paperStep 4: Think about interaction of visualisation app e.g. what kind of filtering mechanisms?
  95. 95. Step 5?
  96. 96. Step 5?Feedback loop
  97. 97. Step 5: How to evaluate visualisations?Typical HCI metrics don’t always work that well •time required to learn the system •time required to achieve a goal •error rates •retention of the use the interface over the time
  98. 98. Step 5: How to evaluate visualisations? Not so easy: how to measure improved insights?Typical HCI metrics don’t always work that well •time required to learn the system •time required to achieve a goal •error rates •retention of the use the interface over the time
  99. 99. Some metrics that can be used
  100. 100. Some metrics that can be used• Functionality - to what extend the system provides the functionalities required by the users?• Effectiveness - do the visualization provide value? Do they provide new insight? How? Why?• Efficiency - to what extend the visualization may help the users in achieve a better performance?• Usability - how easily the users interact with the system? Are the information provided in clear and understandable format?• Usefulness - are the visualization useful? How may benefit from it?
  101. 101. Build Usable & Useful Visualisations
  102. 102. Build Usable & Useful Visualisations
  103. 103. Build Usable & Useful Visualisations• Analytical Evaluation - formal study with experts• Empirical evaluation - experiments with user tests
  104. 104. Rapid Prototyping TimeIteration 1 Iteration 2 Iteration 3 Iteration N ... • Design focus on usefulness & usability • target personas & scenarios • Evaluate ideas in short iteration cycles • e.g draw boundary box vs. contour of object of interest • Evaluate in real-life settings • with real users 40
  105. 105. Go outside your research lab Evaluate in real-life settings 41
  106. 106. Go outside your research lab Evaluate in real-life settings Ec-tel 2010 Figure 4: Setting of the evaluation. Hypertext 2011Overview first, search & filter, Start with what you know, details on demand then grow 41
  107. 107. Rapid Prototyping TimeIteration 1 Iteration 2 Iteration 3 Iteration N ... Short feedback loops with frequent releases of prototypes Gradually increase functionalities 42
  108. 108. Rapid Prototyping TimeIteration 1 Iteration 2 Iteration 3 Iteration N ... Paper mockups Digital mockups Prototype v1 Useful & usable product Short feedback loops with frequent releases of prototypes Gradually increase functionalities 42
  109. 109. Think aloud Usability lab Eye-tracking questionnaires (SUS, TAM, ...)
  110. 110. Time for a bit of reflection What did you learn?
  111. 111. POINTERS• http://wearecolorblind.com/articles/quick-tips/• http://infosthetics.com• http://www.visualcomplexity.com/vc/• http://bestario.org/research/remap• ...
  112. 112. LIBRARIES• Processing (!)• http://wiki.okfn.org/OpenVisualisation• http://flare.prefuse.org/• http://iv.slis.indiana.edu/sw/• http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/• Tableau software• R• Multitouch4J• Manyeyes...• ...
  113. 113. FURTHER READINGS• “Readings in Information Visualization: Using Vision to Think”, Card, S et al• “Now i see”, “Show Me the Numbers”, Few, S.• “Beautiful Evidence”, Tufte, E.• “Information Visualization. Perception for design”, Ware, C.• Beautiful Visualization: Looking at Data through the Eyes of Experts (Theory in Practice): Julie Steele, Noah Iliinsky
  114. 114. THANK YOU FOR YOUR ATTENTION! joris.klerkx@cs.kuleuven.be @jkofmsk 48
  1. A particular slide catching your eye?

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

×