1. HUMAN COMPUTER INTERACTION LAB
VISUALIZATION IN TEL
Joris Klerkx, Erik Duval
@jkofmsk @ErikDuval

2. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car

3. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile

4. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..

5. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar

6. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar

7. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels

8. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels

9. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels
4. A chariot, carriage, or cart

10. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels
4. A chariot, carriage, or cart

11. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels
4. A chariot, carriage, or cart

12. Imagine you never saw a car...
Would the following definitions help to explain it?
http://www.thefreedictionary.com/car
1. It’s an automobile
A phone that automatically takes a call..
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels
4. A chariot, carriage, or cart
A picture is worth a 1000 words

13. Lets try to bust 2 myths...

14. Lets try to bust 2 myths...
Visualisations are just cool graphics

15. Lets try to bust 2 myths...
Visualisations are just cool graphics
Graphics part of bigger picture of what stories to communicate & how

16. Lets try to bust 2 myths...
Visualisations are just cool graphics
Graphics part of bigger picture of what stories to communicate & how
Only experts can create good visualizations

17. Lets try to bust 2 myths...
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 apply

18. Graph Design Quiz
http://www.perceptualedge.com/

19. Which visualisation makes it easier to determine whether
‘Real Estate’ or ‘Bonds’ has the bigger share?
http://www.perceptualedge.com/

20. Which visualisation makes it easier to determine whether
‘Real Estate’ or ‘Bonds’ has the bigger share?
http://www.perceptualedge.com/

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. Which of these line graphs is easier to read?
http://www.perceptualedge.com/

23. Which of these two tables is easier to read?
http://www.perceptualedge.com/

24. Which graph makes it easier to focus on the pattern of
change through time, instead of the individual values?
http://www.perceptualedge.com/

25. Which of these two graphs encodes the values accurately?
http://www.perceptualedge.com/

26. Which of these two maps makes it easier to find all
counties with positive growth rates?
http://www.perceptualedge.com/

27. Which graph makes it easier to determine
R&Ds travel expense?
http://www.perceptualedge.com/

28. Which labels are easier to read?
http://www.perceptualedge.com/

29. Which graph is easier to look at?
http://www.perceptualedge.com/

30. Which table allows you to see the areas of poor
performance more quickly?
http://www.perceptualedge.com/

31. Seems ok?
http://www.perceptualedge.com/

32. Seems ok?
http://www.perceptualedge.com/

33. What is information visualisation?

34. A definition...
Information Visualisation is the use of interactive
visual representations to amplify cognition [Card. et. al]

35. A definition...
Information Visualisation is the use of interactive
visual 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. EXAMPLES IN TEL
Find relevant (learning) material
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

37. Find relevant (learning) material
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

38. Find relevant (learning) material
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

39. Find relevant (learning) material
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

40. Find relevant (learning) material
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

41. Find relevant (learning) material
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

42. Understand learning material
Find relevant (learning) material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

43. Understand learning material
Find relevant (learning) material
Provoke collaboration between learners
Provoke Awareness & Self-reflection

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. 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. 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. 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. 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. Provoke collaboration between learners
Find relevant (learning) material
Understand learning material
Provoke Awareness & Self-reflection

50. Provoke collaboration between learners
Find relevant (learning) material
Understand learning material
Provoke Awareness & Self-reflection

51. Provoke collaboration between learners
Find relevant (learning) material
Understand learning material
Provoke Awareness & Self-reflection

52. Provoke Awareness & Self-reflection
Find relevant (learning) material
Understand learning material
Provoke collaboration between learners

53. Provoke Awareness & Self-reflection
Find relevant (learning) material
Understand learning material
Provoke collaboration between learners

54. Provoke Awareness & Self-reflection
Find relevant (learning) material
Understand learning material
Provoke collaboration between learners

55. Provoke Awareness & Self-reflection
Find relevant (learning) material
Understand learning material
Provoke collaboration between learners

56. How to design a visualisation application

57. How to design a visualisation application
You have to know a little bit of facts first...

59. Humans have advanced perceptual abilities

60. Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns

61. Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns
Humans have little short term memory

62. 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

63. 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

64. 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

65. THE VISUALIZATION PIPELINE

66. Step 1: Think of a dataset,
Formulate the questions

67. Step 1: Think of a dataset,
Formulate the questions
“where” “when’’ “how much” “how often” (“why”)

68. Step 1: Think of a dataset,
Formulate the questions
“where” “when’’ “how much” “how often” (“why”)
Who are your intended users?

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 )

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

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

72. 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?

73. Step 3: Apply a visual mapping

74. Step 3: Apply a visual mapping
Encode data characteristics into visual form

75. Step 3: Apply a visual mapping
Encode data characteristics into visual form
Simplicity is the ultimate sophistication.
Leonardo da Vinci

76. Size
most commonly used (?)

77. Colors
used for identifying patterns & anomalies in big datasets
Color Principles - Hue, Saturation, and Value

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. 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

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. 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

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.
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation

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. 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. 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

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. 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

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

89. 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!

90. Shape - circles, rectangles, stars, icons,..
Location - maps
Network -node-link graphs
Time - animations
...

91. Which visual encodings do you see?
Example...
London Tube Map

92. Which visual encodings do you see?
Example...
London Tube Map

93. e.g. sketch on paper
e.g. what kind of filtering mechanisms?

94. Step 3: Apply a visual mapping to your dataset
e.g. sketch on paper
e.g. what kind of filtering mechanisms?

95. Step 3: Apply a visual mapping to your dataset
e.g. sketch on paper
Step 4: Think about interaction of visualisation app
e.g. what kind of filtering mechanisms?

96. Step 5?

97. Step 5?
Feedback loop

98. 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

99. 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

100. Some metrics that can be used

101. 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?

102. Build Usable & Useful Visualisations

103. Build Usable & Useful Visualisations

104. Build Usable & Useful Visualisations
• Analytical Evaluation - formal study with experts
• Empirical evaluation - experiments with user tests

105. Rapid Prototyping Time
Iteration 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

106. Go outside your research lab
Evaluate in real-life settings
41

107. Go outside your research lab
Evaluate in real-life settings
Ec-tel 2010
Figure 4: Setting of the evaluation.
Hypertext 2011
Overview first, search & filter, Start with what you know,
details on demand then grow
41

108. Rapid Prototyping Time
Iteration 1 Iteration 2 Iteration 3 Iteration N
...
Short feedback loops with
frequent releases of prototypes
Gradually increase functionalities
42

109. Rapid Prototyping Time
Iteration 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

110. Think aloud Usability lab Eye-tracking
questionnaires (SUS, TAM, ...)

112. Time for a bit of reflection
What did you learn?

113. POINTERS
• http://wearecolorblind.com/articles/quick-tips/
• http://infosthetics.com
• http://www.visualcomplexity.com/vc/
• http://bestario.org/research/remap
• ...

114. 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...
• ...

115. 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

116. THANK YOU FOR YOUR
ATTENTION!
joris.klerkx@cs.kuleuven.be
@jkofmsk
48