1. HUMAN COMPUTER INTERACTION LABINFORMATIONVISUALISATION capita selecta 17/10/2012 Joris Klerkx @jkofmskWednesday 17 October 12

2. Imagine you never saw a car...Would the following denitions help to explain it?http://www.thefreedictionary.com/carWednesday 17 October 12 3. Imagine you never saw a car...Would the following denitions help to explain it?http://www.thefreedictionary.com/car 1. Its an automobileWednesday 17 October 12 4. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call..Wednesday 17 October 12 5. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcarWednesday 17 October 12 6. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcarWednesday 17 October 12 7. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcar 3. Its a boxlike enclosure for passengers, with wheelsWednesday 17 October 12 8. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcar 3. Its a boxlike enclosure for passengers, with wheelsWednesday 17 October 12 9. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcar 3. Its a boxlike enclosure for passengers, with wheels 4. A chariot, carriage, or cartWednesday 17 October 12 10. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcar 3. Its a boxlike enclosure for passengers, with wheels 4. A chariot, carriage, or cartWednesday 17 October 12 11. Imagine you never saw a car...Would the following denitions help to explain it? http://www.thefreedictionary.com/car 1. Its an automobile A phone that automatically takes a call.. 2. Its a vehicle, such as a streetcar 3. Its a boxlike enclosure for passengers, with wheels 4. A chariot, carriage, or cartA picture is worth a 1000 wordsWednesday 17 October 12 12. A denition...Information Visualisation is the use of interactivevisual representations to amplify cognition[Card. et. al]Wednesday 17 October 12 13. A denition...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 understandingEmpower people to make informed decisionsWednesday 17 October 12 14. Not new..Wednesday 17 October 12 15. Not new..http://www.datavis.ca/milestones/Wednesday 17 October 12 16. Not new..http://www.datavis.ca/milestones/Wednesday 17 October 12 17. Publication Networks in conferencesWho are the most prolic author(s)? Who is co-authoring with who?Wednesday 17 October 12 18. Publication Networks in conferencesWho are the most prolic author(s)? Who is co-authoring with who?Wednesday 17 October 12 19. Publication Networks in conferencesWho are the most prolic author(s)? Who is co-authoring with who?Wednesday 17 October 12 20. Publication Networks in conferencesWho are the most prolic author(s)? Who is co-authoring with who?Wednesday 17 October 12 21. Student Activity MeterHow are my students working? When do they work? Are there students in trouble? ...Wednesday 17 October 12 22. Student Activity MeterHow are my students working? When do they work? Are there students in trouble? ...Wednesday 17 October 12 23. Student Activity MeterHow are my students working? When do they work? Are there students in trouble? ...Wednesday 17 October 12 24. Step up! Make students aware about their activity in the courseWednesday 17 October 12 25. MUSE - Visualizing the origins and connections of institutionsbased on co-authorship of publicationsNagel, T., Duval, E.: Muse:Visualizing the origins and connections of institutions basedon co-authorship of publications. Science2.0 for TEL workshop at EC-TEL 2010, Barcelona, SpainWednesday 17 October 12 26. On the menu...graphSome design basics visualizationHow to design a visualisation (application)?Wednesday 17 October 12 27. What has the bigger share?Real Estate or Bonds has the bigger share?http://www.perceptualedge.com/Wednesday 17 October 12 28. What has the bigger share?Real Estate or Bonds has the bigger share? Size & angle are not preattentivehttp://www.perceptualedge.com/Wednesday 17 October 12 29. Save the pies for dessert S. Few What has the bigger share?Real Estate or Bonds has the bigger share? Size & angle are not preattentivehttp://www.perceptualedge.com/Wednesday 17 October 12 30. Verkiezingen14/10/12Wednesday 17 October 12 31. deredactie.be Verkiezingen14/10/12Wednesday 17 October 12 32. deredactie.be Verkiezingen14/10/12demorgen.beWednesday 17 October 12 33. deredactie.be Verkiezingen14/10/12demorgen.bevtm.beWednesday 17 October 12 34. deredactie.be Verkiezingen14/10/12demorgen.bevtm.beWednesday 17 October 12 35. CHECK YOUR DATAWednesday 17 October 12 36. CHECK YOUR DATA http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73Wednesday 17 October 12 37. CHECK YOUR DATA http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73Wednesday 17 October 12 38. COMMUNICATE THE CORRECT STORYWednesday 17 October 12 39. COMMUNICATE THE CORRECT STORYnieuwsblad.bevtm.bederedactie.beWednesday 17 October 12 40. DONT USE VISUALISATIONS TO MISLEAD... BP - leak in gulf of mexico http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 41. DONT USE VISUALISATIONS TO MISLEAD... BP - leak in gulf of mexico http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 42. DONT USE VISUALIZATIONS TO LIE... (1/2) http://www.perceptualedge.com/http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 43. DONT USE VISUALIZATIONS TO LIE... (1/2) http://www.perceptualedge.com/http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 44. DONT USE VISUALIZATIONS TO LIE... (1/2) http://www.perceptualedge.com/http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 45. DONT USE VISUALIZATIONS TO LIE... (1/2) http://www.perceptualedge.com/http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 46. DONT USE VISUALIZATIONS TO LIE... (2/2) http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 47. DONT USE VISUALIZATIONS TO LIE... (2/2) http://owingdata.com/category/statistics/mistaken-data/Wednesday 17 October 12 48. USE COMMON SENSE (1/3)Which of these line graphs is easier to read?http://www.perceptualedge.com/Wednesday 17 October 12 49. USE COMMON SENSE (2/3)Which of these two tables is easier to read?http://www.perceptualedge.com/Wednesday 17 October 12 50. USE COMMON SENSE (3/3)Which labels are easier to read? http://www.perceptualedge.com/Wednesday 17 October 12 51. Choose graphs that best communicates your data oranswer your questions about your dataWhich graph makes it easier to focus on the pattern of change through time, instead of the individual values?http://www.perceptualedge.com/Wednesday 17 October 12 52. THINK ABOUT WHAT YOU DOSeems ok?http://www.perceptualedge.com/Wednesday 17 October 12 53. THINK ABOUT WHAT YOU DOSeems ok?http://www.perceptualedge.com/Wednesday 17 October 12 54. THINK ABOUT WHAT YOU DOSeems ok?Equal interval scalehttp://www.perceptualedge.com/Wednesday 17 October 12 55. Which graph makes it easier to determine R&Ds travel expense?http://www.perceptualedge.com/Wednesday 17 October 12 56. Which graph makes it easier to determine R&Ds travel expense? BE CAREFUL WITH 3D (DONT USE IT)http://www.perceptualedge.com/Wednesday 17 October 12 57. On the menu...Somegraphdesign basics visualizationHow to design a visualisation (application)?Wednesday 17 October 12 58. 2 Facts to keep in mindWednesday 17 October 12 59. 2 Facts to keep in mindHumans have advanced perceptual abilitiesWednesday 17 October 12 60. 2 Facts to keep in mindHumans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patternsWednesday 17 October 12 61. 2 Facts to keep in mindHumans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patternsHumans have little short term memoryWednesday 17 October 12 62. 2 Facts to keep in mindHumans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patternsHumans have little short term memory Our brains remember relatively little of what we perceiveWednesday 17 October 12 63. 2 Facts to keep in mindHumans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Make Use of Gestalt principlesHumans have little short term memory Our brains remember relatively little of what we perceiveWednesday 17 October 12 64. 2 Facts to keep in mindHumans have advanced perceptual abilities Our brains makes us extremely good at recognizing visual patterns Make Use of Gestalt principles Make it interactive, provide visual helpHumans have little short term memory Our brains remember relatively little of what we perceiveWednesday 17 October 12 65. THE VISUALIZATION PIPELINEWednesday 17 October 12 66. Step 1: Think of a dataset,Formulate the questionsWednesday 17 October 12 67. Step 1: Think of a dataset,Formulate the questionswhere when how much how often (why)Wednesday 17 October 12 68. Step 1: Think of a dataset,Formulate the questionswhere when how much how often (why) Who are your intended users?Wednesday 17 October 12 69. Example data-set : Facebook privacy statement Offer precise controls for sharing on the Internet...Wednesday 17 October 12 70. Example data-set : Facebook privacy statement Offer precise controls for sharing on the Internet... Users should navigate through 50 settings with more than 170 optionsWednesday 17 October 12 71. Example data-set : Facebook privacy statement Offer precise controls for sharing on the Internet... Users should navigate through 50 settings with more than 170 options Questions?Wednesday 17 October 12 72. Example data-set : Facebook privacy statement Offer precise controls for sharing on the Internet... Users should navigate through 50 settings with more than 170 options Questions?How did it change over time?Wednesday 17 October 12 73. Example data-set : Facebook privacy statement Offer precise controls for sharing on the Internet... Users should navigate through 50 settings with more than 170 options Questions?How did it change over time? How does it compare to privacy statements of other tools?Wednesday 17 October 12 74. Example data-set : Facebook privacy statement Offer precise controls for sharing on the Internet... Users should navigate through 50 settings with more than 170 options Questions?How did it change over time? How does it compare to privacy statements of other tools? What are the options?Wednesday 17 October 12 75. Wednesday 17 October 12 76. Step 2: Gather the datasetWednesday 17 October 12 77. Step 2: Gather the dataseteg. open data, census.gov, NY Times API, etcWednesday 17 October 12 78. Step 2: Gather the dataseteg. open data, census.gov, NY Times API, etcDene the characteristics of the dataWednesday 17 October 12 79. Step 2: Gather the dataseteg. open data, census.gov, NY Times API, etcDene the characteristics of the dataTime? hierarchical? 1D? 2D? nD? network data?Wednesday 17 October 12 80. Step 2: Gather the dataseteg. open data, census.gov, NY Times API, etcDene the characteristics of the dataTime? hierarchical? 1D? 2D? nD? network data?scales?Wednesday 17 October 12 81. Step 2: Gather the dataseteg. open data, census.gov, NY Times API, etcDene the characteristics of the dataTime? hierarchical? 1D? 2D? nD? network data?scales? https://www.facebook.com/about/privacyWednesday 17 October 12 82. Step 3: Apply a visual mappingWednesday 17 October 12 83. Step 3: Apply a visual mappingEncode data characteristics into visual formWednesday 17 October 12 84. Step 3: Apply a visual mappingEncode data characteristics into visual formSimplicity is the ultimate sophistication.Leonardo da VinciWednesday 17 October 12 85. Size most commonly used (?)Wednesday 17 October 12 86. Colorsused for identifying patterns & anomalies in big datasets Color Principles - Hue, Saturation, and ValueWednesday 17 October 12 87. 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-presentationWednesday 17 October 12 88. 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-presentationWednesday 17 October 12 89. 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 SymmetryObjects must be balanced or symmetricalto be seen as complete or whole (Chang,2002). http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 17 October 12 90. 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 SymmetryObjects must be balanced or symmetricalto be seen as complete or whole (Chang,2002). http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 17 October 12 91. Gestalt Principles Law of SimilarityObjects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows becauseof their similar attributes. http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 17 October 12 92. Gestalt Principles Law of SimilarityObjects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows becauseof their similar attributes. Law of Common FateObjects with a common movement, that movein the same direction, at the same pace , at thesame time are organised as a group(Ehrenstein, 2004). http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 17 October 12 93. Gestalt Principles Law of SimilarityObjects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows becauseof their similar attributes. Law of Common FateObjects with a common movement, that movein the same direction, at the same pace , at thesame time are organised as a group(Ehrenstein, 2004). http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 17 October 12 94. Gestalt Principles Law of SimilarityObjects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986). Objects are viewed in vertical rows becauseof their similar attributes. Law of Common FateObjects with a common movement, that movein the same direction, at the same pace , at thesame time are organised as a group(Ehrenstein, 2004). http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 17 October 12 95. Gestalt Principles Law of ContinuationObjects 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-presentationWednesday 17 October 12 96. Gestalt PrinciplesLaw of ContinuationObjects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001). Law of IsomorphismIs similarity that can be behavioural orperceptual, 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-presentationWednesday 17 October 12 97. Gestalt PrinciplesLaw of ContinuationObjects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001). Law of IsomorphismIs similarity that can be behavioural orperceptual, 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!Wednesday 17 October 12 98. Step 3: Apply a visual mappingShape - circles, rectangles, stars, icons,.. Location - mapsNetwork -node-link graphsTime - animations ...Wednesday 17 October 12 99. HOW DID IT CHANGE OVER TIME?http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlWednesday 17 October 12 100. HOW DID IT CHANGE OVER TIME?http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlWednesday 17 October 12 101. HOW DID IT CHANGE OVER TIME?http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlWednesday 17 October 12 102. HOW DOES FB COMPARETO STATEMENTS OF OTHER TOOLS?http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlWednesday 17 October 12 103. HOW DOES FB COMPARETO STATEMENTS OF OTHER TOOLS?http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.htmlWednesday 17 October 12 104. WHAT ARE THE OPTIONS?Wednesday 17 October 12 105. Which visual encodings do you see?Example...London Tube MapWednesday 17 October 12 106. Which visual encodings do you see?Example...London Tube MapWednesday 17 October 12 107. e.g. sketch on papere.g. what kind of ltering mechanisms?Wednesday 17 October 12 108. Step 3: Apply a visual mapping to your datasete.g. sketch on papere.g. what kind of ltering mechanisms?Wednesday 17 October 12 109. Step 3: Apply a visual mapping to your datasete.g. sketch on paperStep 4: Think about interaction of visualisation appe.g. what kind of ltering mechanisms?Wednesday 17 October 12 110. Step 5: How to evaluate visualisations?Build Usable & Useful VisualisationsWednesday 17 October 12 111. Step 5: How to evaluate visualisations?Typical HCI metrics dont always work that well time required to learn the system time required to achieve a goal error rates retention of the use of the interface over timeWednesday 17 October 12 112. Step 5: How to evaluate visualisations? Not so easy: how to measure improved insights?Typical HCI metrics dont always work that well time required to learn the system time required to achieve a goal error rates retention of the use of the interface over timeWednesday 17 October 12 113. Step 5: How to evaluate visualisations? Not so easy: how to measure improved insights?Typical HCI metrics dont always work that well time required to learn the system time required to achieve a goal error rates retention of the use of the interface over timeWednesday 17 October 12 114. Some metrics that can be usedWednesday 17 October 12 115. Some metrics that can be used Effectiveness - does the visualization answer your questions? does it provide value? Do they provide new insight? How? Why? Efciency - to what extend may the visualization communicate your data to the users efciently? Do they get quicker answers to their questions? Usability - how easily the users interact with the system? Are the information provided in clear and understandable format? Eg. Do the layouts of elements make sense? Usefulness - are the visualizations useful? How may the users benet from it? Functionality - to what extend does the application provides the functionalities required by the users?Wednesday 17 October 12 116. Rapid PrototypingTime Iteration 1Iteration 2Iteration 3 Iteration N ... Designfocus 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 users44Wednesday 17 October 12 117. Think aloud Usability lab Eye-trackingquestionnaires (SUS, TAM, ...)Wednesday 17 October 12 118. Go outside your research labEvaluate in real-life settings46Wednesday 17 October 12 119. Go outside your research labEvaluate in real-life settingsEc-tel 2010Figure 4: Setting of the evaluation.Hypertext 2011Overview rst, search & lter,Start with what you know, details on demandthen grow 46Wednesday 17 October 12 120. To conclude..Wednesday 17 October 12 121. To conclude..Wednesday 17 October 12 122. To conclude..Lets try to bust 2 myths in this course...Wednesday 17 October 12 123. To conclude..Lets try to bust 2 myths in this course...Visualisations are just cool graphicsWednesday 17 October 12 124. To conclude..Lets try to bust 2 myths in this course...Visualisations are just cool graphics Graphics part of bigger picture of what stories to communicate & howWednesday 17 October 12 125. To conclude..Lets try to bust 2 myths in this course...Visualisations are just cool graphics Graphics part of bigger picture of what stories to communicate & how Only experts can create good visualizationsWednesday 17 October 12 126. To conclude..Lets try to bust 2 myths in this course...Visualisations are just cool graphics Graphics part of bigger picture of what stories to communicate & how Only experts can create good visualizations Maybe faster, but there are simple techniques anyone can applyWednesday 17 October 12 127. POINTERS http://wearecolorblind.com/articles/quick-tips/ http://infosthetics.com http://www.visualcomplexity.com/vc/ http://bestario.org/research/remap ... (a lot more online! )Wednesday 17 October 12 128. LIBRARIES D3.js http://www.jerryvermanen.nl/datajournalismlist/ Processing http://wiki.okfn.org/OpenVisualisation http://are.prefuse.org/ http://iv.slis.indiana.edu/sw/ http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/ Tableau software R Multitouch4J Manyeyes... ...Wednesday 17 October 12 129. FURTHER READINGS Readingsin Information Visualization: Using Vision to Think, Card, S et al Now i see, Show Me the Numbers, Few, S. BeautifulEvidence, Tufte, E. Information Visualization. Perceptionfor design, Ware, C. Beautiful Visualization: Looking at Data through the Eyes of Experts (Theory in Practice): Julie Steele, Noah IliinskyWednesday 17 October 12 130. THANK YOU FOR YOUR ATTENTION!joris.klerkx@cs.kuleuven.be@jkofmsk 52Wednesday 17 October 12