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
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
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/
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
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
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?
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!
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?
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
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?
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, ...)
111.
112. Time for a bit of reflection
What did you learn?
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
