workshop on visualization in tel
DESCRIPTION
TRANSCRIPT
![Page 1: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/1.jpg)
VISUALIZATION IN TEL
Joris Klerkx, Erik Duval@jkofmsk @ErikDuval
HUMAN COMPUTER INTERACTION LAB
![Page 2: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/2.jpg)
Imagine you never saw a car...
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
![Page 3: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/3.jpg)
Imagine you never saw a car...
1. It’s an automobile
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
![Page 4: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/4.jpg)
Imagine you never saw a car...
1. It’s an automobile
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 5: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/5.jpg)
Imagine you never saw a car...
1. It’s an automobile
2. It’s a vehicle, such as a streetcar
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 6: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/6.jpg)
Imagine you never saw a car...
1. It’s an automobile
2. It’s a vehicle, such as a streetcar
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 7: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/7.jpg)
Imagine you never saw a car...
1. It’s an automobile
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 8: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/8.jpg)
Imagine you never saw a car...
1. It’s an automobile
2. It’s a vehicle, such as a streetcar
3. It’s a boxlike enclosure for passengers, with wheels
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 9: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/9.jpg)
Imagine you never saw a car...
1. It’s an automobile
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
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 10: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/10.jpg)
Imagine you never saw a car...
1. It’s an automobile
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
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 11: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/11.jpg)
Imagine you never saw a car...
1. It’s an automobile
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
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
![Page 12: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/12.jpg)
Imagine you never saw a car...
1. It’s an automobile
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
http://www.thefreedictionary.com/car
Would the following definitions help to explain it?
A phone that automatically takes a call..
A picture is worth a 1000 words
![Page 13: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/13.jpg)
Lets try to bust 2 myths...
![Page 14: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/14.jpg)
Lets try to bust 2 myths...
Visualisations are just cool graphics
![Page 15: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/15.jpg)
Lets try to bust 2 myths...
Visualisations are just cool graphics
Graphics part of bigger picture of what stories to communicate & how
![Page 16: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/16.jpg)
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
![Page 17: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/17.jpg)
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
![Page 18: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/18.jpg)
Graph Design Quiz
http://www.perceptualedge.com/
![Page 19: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/19.jpg)
Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share?
http://www.perceptualedge.com/
![Page 20: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/20.jpg)
Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share?
http://www.perceptualedge.com/
![Page 21: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/21.jpg)
Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share?
“Save the pies for dessert” S. Fewhttp://www.perceptualedge.com/
![Page 22: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/22.jpg)
Which of these line graphs is easier to read?
http://www.perceptualedge.com/
![Page 23: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/23.jpg)
Which of these two tables is easier to read?
http://www.perceptualedge.com/
![Page 24: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/24.jpg)
Which graph makes it easier to focus on the pattern of change through time, instead of the individual values?
http://www.perceptualedge.com/
![Page 25: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/25.jpg)
Which of these two graphs encodes the values accurately?
http://www.perceptualedge.com/
![Page 26: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/26.jpg)
Which of these two maps makes it easier to find all counties with positive growth rates?
http://www.perceptualedge.com/
![Page 27: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/27.jpg)
Which graph makes it easier to determine R&Ds travel expense?
http://www.perceptualedge.com/
![Page 28: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/28.jpg)
Which labels are easier to read?
http://www.perceptualedge.com/
![Page 29: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/29.jpg)
Which graph is easier to look at?
http://www.perceptualedge.com/
![Page 30: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/30.jpg)
Which table allows you to see the areas of poor performance more quickly?
http://www.perceptualedge.com/
![Page 31: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/31.jpg)
Seems ok?
http://www.perceptualedge.com/
![Page 32: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/32.jpg)
Seems ok?
http://www.perceptualedge.com/
![Page 33: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/33.jpg)
What is information visualisation?
![Page 34: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/34.jpg)
Information Visualisation is the use of interactive visual representations to amplify cognition [Card. et. al]
A definition...
![Page 35: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/35.jpg)
Find out what a data set is about
Information Visualisation is the use of interactive visual representations to amplify cognition [Card. et. al]
What are the stories behind the data?
A definition...
Communicating data
Facilitate human interaction for exploration and understanding
Empower people to make informed decisions
![Page 36: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/36.jpg)
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection
EXAMPLES IN TEL
Find relevant (learning) material
![Page 37: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/37.jpg)
Find relevant (learning) material
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
![Page 38: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/38.jpg)
Find relevant (learning) material
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
![Page 39: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/39.jpg)
Find relevant (learning) material
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
![Page 40: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/40.jpg)
Find relevant (learning) material
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
![Page 41: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/41.jpg)
Find relevant (learning) material
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
![Page 42: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/42.jpg)
Understand learning material
Provoke collaboration between learnersProvoke Awareness & Self-reflection
Find relevant (learning) material
![Page 43: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/43.jpg)
Understand learning material
Provoke collaboration between learnersProvoke Awareness & Self-reflection
Find relevant (learning) material
![Page 44: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/44.jpg)
Understand learning material
Provoke collaboration between learners
http://www.visual-literacy.org/periodic_table/rableperiodic_table.html
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 45: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/45.jpg)
Understand learning material
Provoke collaboration between learners
http://www.visual-literacy.org/periodic_table/rableperiodic_table.html
Provoke Awareness & Self-reflection
Find relevant (learning) material
Be careful with using techniques in other contexts
![Page 46: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/46.jpg)
Understand learning material
Provoke collaboration between learners
http://www.visual-literacy.org/periodic_table/rableperiodic_table.html
Provoke Awareness & Self-reflection
Find relevant (learning) material
Be careful with using techniques in other contexts
![Page 47: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/47.jpg)
Understand learning material
Provoke collaboration between learners
http://www.visual-literacy.org/periodic_table/rableperiodic_table.html
Provoke Awareness & Self-reflection
Find relevant (learning) material
Be careful with using techniques in other contexts
![Page 48: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/48.jpg)
Understand learning material
Provoke collaboration between learners
http://www.visual-literacy.org/periodic_table/rableperiodic_table.html
Provoke Awareness & Self-reflection
Find relevant (learning) material
Be careful with using techniques in other contexts
![Page 49: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/49.jpg)
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 50: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/50.jpg)
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 51: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/51.jpg)
Understand learning material
Provoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 52: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/52.jpg)
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 53: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/53.jpg)
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 54: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/54.jpg)
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 55: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/55.jpg)
Understand learning materialProvoke collaboration between learners
Provoke Awareness & Self-reflection
Find relevant (learning) material
![Page 56: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/56.jpg)
How to design a visualisation application
![Page 57: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/57.jpg)
How to design a visualisation application
You have to know a little bit of facts first...
![Page 58: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/58.jpg)
![Page 59: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/59.jpg)
Humans have advanced perceptual abilities
![Page 60: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/60.jpg)
Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns
![Page 61: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/61.jpg)
Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns
Humans have little short term memory
![Page 62: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/62.jpg)
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
![Page 63: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/63.jpg)
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
Make Use of Gestalt principles
![Page 64: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/64.jpg)
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
Make Use of Gestalt principles
Make it interactive, provide visual help
![Page 65: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/65.jpg)
THE VISUALIZATION PIPELINE
![Page 66: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/66.jpg)
Step 1: Think of a dataset, Formulate the questions
![Page 67: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/67.jpg)
Step 1: Think of a dataset, Formulate the questions
“where” “when’’ “how much” “how often” (“why”)
![Page 68: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/68.jpg)
Step 1: Think of a dataset, Formulate the questions
“where” “when’’ “how much” “how often” (“why”)
Who are your intended users?
![Page 69: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/69.jpg)
Step 1: Think of a dataset, Formulate the questions
( Step 2: Gather the dataset )
“where” “when’’ “how much” “how often” (“why”)
Who are your intended users?
![Page 70: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/70.jpg)
Step 1: Think of a dataset, Formulate the questions
( Step 2: Gather the dataset )
“where” “when’’ “how much” “how often” (“why”)
eg. datatel, open data, census.gov, NY Times API, etc
Who are your intended users?
![Page 71: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/71.jpg)
Step 1: Think of a dataset, Formulate the questions
( Step 2: Gather the dataset )
“where” “when’’ “how much” “how often” (“why”)
eg. datatel, open data, census.gov, NY Times API, etc
Who are your intended users?
Define the characteristics of the data
![Page 72: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/72.jpg)
Step 1: Think of a dataset, Formulate the questions
( Step 2: Gather the dataset )
“where” “when’’ “how much” “how often” (“why”)
eg. datatel, open data, census.gov, NY Times API, etc
Who are your intended users?
Define the characteristics of the dataTime? hierarchical? 1D? 2D? nD? network data?
![Page 73: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/73.jpg)
Step 3: Apply a visual mapping
![Page 74: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/74.jpg)
Encode data characteristics into visual form
Step 3: Apply a visual mapping
![Page 75: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/75.jpg)
Encode data characteristics into visual form
Step 3: Apply a visual mapping
Simplicity is the ultimate sophistication.Leonardo da Vinci
![Page 76: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/76.jpg)
Sizemost commonly used (?)
![Page 77: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/77.jpg)
used for identifying patterns & anomalies in big datasetsColors
Color Principles - Hue, Saturation, and Value
![Page 78: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/78.jpg)
¡ Law of Proximity
The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 79: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/79.jpg)
¡ Law of Proximity
The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 80: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/80.jpg)
¡ 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).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 81: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/81.jpg)
¡ 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).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 82: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/82.jpg)
¡ 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 because of their similar attributes.
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 83: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/83.jpg)
¡ 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 because of their similar attributes.
¡ Law of Common FateObjects 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).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 84: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/84.jpg)
¡ 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 because of their similar attributes.
¡ Law of Common FateObjects 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).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 85: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/85.jpg)
¡ 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 because of their similar attributes.
¡ Law of Common FateObjects 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).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 86: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/86.jpg)
¡ Law of ContinuationObjects will be grouped as a whole if they are co-linear, or follow a direction
(Chang, 2002; Lyons, 2001).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 87: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/87.jpg)
¡ Law of ContinuationObjects will be grouped as a whole if they are co-linear, or follow a direction
(Chang, 2002; Lyons, 2001).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 88: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/88.jpg)
¡ Law 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 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).
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 89: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/89.jpg)
¡ Law 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 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).
There are more!
Gestalt Principles
http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation
![Page 90: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/90.jpg)
Location - maps
Network -node-link graphs
Time - animations
...
Shape - circles, rectangles, stars, icons,..
![Page 91: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/91.jpg)
Example...
Which visual encodings do you see?
London Tube Map
![Page 92: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/92.jpg)
Example...
Which visual encodings do you see?
London Tube Map
![Page 93: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/93.jpg)
e.g. sketch on paper
e.g. what kind of filtering mechanisms?
![Page 94: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/94.jpg)
Step 3: Apply a visual mapping to your dataset
e.g. sketch on paper
e.g. what kind of filtering mechanisms?
![Page 95: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/95.jpg)
Step 3: Apply a visual mapping to your dataset
e.g. sketch on paper
Step 4: Think about interaction of visualisation appe.g. what kind of filtering mechanisms?
![Page 96: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/96.jpg)
Step 5?
![Page 97: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/97.jpg)
Feedback loop
Step 5?
![Page 98: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/98.jpg)
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
![Page 99: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/99.jpg)
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
![Page 100: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/100.jpg)
Some metrics that can be used
![Page 101: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/101.jpg)
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?
![Page 102: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/102.jpg)
Build Usable & Useful Visualisations
![Page 103: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/103.jpg)
Build Usable & Useful Visualisations
![Page 104: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/104.jpg)
Build Usable & Useful Visualisations
• Analytical Evaluation - formal study with experts
• Empirical evaluation - experiments with user tests
![Page 105: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/105.jpg)
TimeRapid PrototypingIteration 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
![Page 106: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/106.jpg)
41
Go outside your research lab
Evaluate in real-life settings
![Page 107: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/107.jpg)
are just by visually looking for the largest number of con-nected nodes. These larger clusters can be a first indicationof where high profile authors are located. However, in thisstate, neither the names of the authors nor the titles of thepapers are visible yet.
When the user wants to look into more details, he can zoomin to a specific part of the publication space. This is whatFigure 3 depicts. The author names become clearly visible,so that the user can identify a particular author. The usercan also click on paper nodes to get more information on thepaper. To make it easier to identify which authors are moreprolific in the field, the node size of the author is directlyproportional to his number of publications. In Figure 3, forexample, author Martin Wolpers has the largest number ofpublications and is a good candidate to use as a landmarkin the exploration process.
4. EVALUATIONIn this section, we describe how we have evaluated our firstiteration. Subsections 4.1 and 4.2 elaborate on the setupof the evaluation. Subsection 4.3 discusses the results ofthe evaluation and finally, in subsection 4.4, we draw ourconclusions from this evaluation.
4.1 DescriptionTo evaluate the application, we deployed our tabletop in themain hall of the ECTEL 2010 conference [42]. This roomwas the main location for co�ee breaks and figure 4 illus-trates the tabletop setup.The evaluation was conceived as a formative evaluation, inorder to gather feedback on the design and implementationof the application from real users in a real life scenario. Wefollowed the think aloud method, where the participantsverbally describe their thoughts during the evaluation. Inthis way, the participants reveal their view on the systemand possibly their misconceptions [28]. It started o� withgeneral questions (age, gender, profession, vision and leftor right handed) about the participants together with theirbackgrounds. The participants were introduced to the ap-plication by asking them if they could explain what theysaw. We also asked them one basic content-related ques-tion to get them started: “Find author x and find out howmany papers he wrote in ECTEL 2007”. When needed, theparticipants were given extra explanation about the appli-cation. After this, the evaluation continued with tasks theyhad to perform. For each task, we noted whether the tasksucceeded, how fluently the task was performed and whetherthe participant needed help or not. Finally, the participantswere asked for some general feedback and they filled in asmall questionnaire about usefulness and ease of use. Eachevaluation took between 20 and 30 minutes.
4.2 ParticipantsThere was a total of 11 participants, aged between 27 and 60.All participants were researchers, right handed and all butone had corrected vision. Only 3 of the participants con-sidered that they had a bit of experience with multitouchinteraction, the other 8 said they had a lot of experience.Regarding experience towards tabletops or multitouch wallshowever, only one person described himself as experienced.To find out how experienced the participants were in the
Figure 4: Setting of the evaluation.
Figure 5: An overview of the number of papers theparticipants have written
research area, they were asked about their years of experi-ence in the Technology Enhanced Learning (TEL) researcharea, the number of papers published and how many of thempublished in TEL. Half of the participants claimed to haveup to 3 years of experience and the other half claimed tohave many years of experience. On average, the partici-pants have published around 32 papers, from which 16 inthe TEL area. Three participants have published more than60 papers, from which 20 or more in the TEL area. Fig-ure 5 shows in detail the number of published papers perparticipant.
4.3 ResultsIn this section, we describe the results of the evaluation.These results are grouped in three parts. First, we reporton the tasks the participants had to perform, second, wesummarize the most important feedback, and third, we takea look at the results from the questionnaire.
4.3.1 Tasks
Ec-tel 2010 Hypertext 2011Overview first, search & filter,
details on demandStart with what you know,
then grow41
Go outside your research lab
Evaluate in real-life settings
![Page 108: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/108.jpg)
TimeRapid PrototypingIteration 1
...Iteration 2 Iteration 3 Iteration N
Short feedback loops with frequent releases of prototypes
42
Gradually increase functionalities
![Page 109: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/109.jpg)
TimeRapid PrototypingIteration 1
...Iteration 2 Iteration 3 Iteration N
Short feedback loops with frequent releases of prototypes
Paper mockups Digital mockups Prototype v1 Useful & usable product
42
Gradually increase functionalities
![Page 110: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/110.jpg)
Think aloud Usability lab Eye-tracking
questionnaires (SUS, TAM, ...)
![Page 111: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/111.jpg)
![Page 112: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/112.jpg)
Time for a bit of reflection
What did you learn?
![Page 113: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/113.jpg)
POINTERS
• http://wearecolorblind.com/articles/quick-tips/
• http://infosthetics.com
• http://www.visualcomplexity.com/vc/
• http://bestario.org/research/remap
• ...
![Page 114: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/114.jpg)
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...
• ...
![Page 115: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/115.jpg)
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
![Page 116: Workshop on visualization in tel](https://reader035.vdocuments.site/reader035/viewer/2022062617/54c697254a795951338b457e/html5/thumbnails/116.jpg)
THANK YOU FOR YOUR ATTENTION!
@jkofmsk
48