VISUALIZATION IN TEL

Joris Klerkx, Erik Duval@jkofmsk @ErikDuval

HUMAN COMPUTER INTERACTION LAB

Imagine you never saw a car...

http://www.thefreedictionary.com/car

Would the following definitions help to explain it?

Imagine you never saw a car...

1. It’s an automobile

http://www.thefreedictionary.com/car

Would the following definitions help to explain it?

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

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

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

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

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

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

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

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

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

Lets try to bust 2 myths...

Lets try to bust 2 myths...

Visualisations are just cool graphics

Lets try to bust 2 myths...

Visualisations are just cool graphics

Graphics part of bigger picture of what stories to communicate & how

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

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

Graph Design Quiz

http://www.perceptualedge.com/

Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share?

http://www.perceptualedge.com/

Which visualisation makes it easier to determine whether ‘Real Estate’ or ‘Bonds’ has the bigger share?

http://www.perceptualedge.com/

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/

Which of these line graphs is easier to read?

http://www.perceptualedge.com/

Which of these two tables is easier to read?

http://www.perceptualedge.com/

Which graph makes it easier to focus on the pattern of change through time, instead of the individual values?

http://www.perceptualedge.com/

Which of these two graphs encodes the values accurately?

http://www.perceptualedge.com/

Which of these two maps makes it easier to find all counties with positive growth rates?

http://www.perceptualedge.com/

Which graph makes it easier to determine R&Ds travel expense?

http://www.perceptualedge.com/

Which labels are easier to read?

http://www.perceptualedge.com/

Which graph is easier to look at?

http://www.perceptualedge.com/

Which table allows you to see the areas of poor performance more quickly?

http://www.perceptualedge.com/

Seems ok?

http://www.perceptualedge.com/

Seems ok?

http://www.perceptualedge.com/

What is information visualisation?

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

A definition...

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

Understand learning material

Provoke collaboration between learners

Provoke Awareness & Self-reflection

EXAMPLES IN TEL

Find relevant (learning) material

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Understand learning material

Provoke collaboration between learnersProvoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning material

Provoke collaboration between learnersProvoke Awareness & Self-reflection

Find relevant (learning) material

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

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

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

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

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

Understand learning material

Provoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning material

Provoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning material

Provoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

Understand learning materialProvoke collaboration between learners

Provoke Awareness & Self-reflection

Find relevant (learning) material

How to design a visualisation application

How to design a visualisation application

You have to know a little bit of facts first...

Humans have advanced perceptual abilities

Humans have advanced perceptual abilities

Our brains makes us extremely good at recognizing visual patterns

Humans have advanced perceptual abilities

Our brains makes us extremely good at recognizing visual patterns

Humans have little short term memory

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

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

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

THE VISUALIZATION PIPELINE

Step 1: Think of a dataset, Formulate the questions

Step 1: Think of a dataset, Formulate the questions

“where” “when’’ “how much” “how often” (“why”)

Step 1: Think of a dataset, Formulate the questions

“where” “when’’ “how much” “how often” (“why”)

Who are your intended users?

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?

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?

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

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?

Step 3: Apply a visual mapping

Encode data characteristics into visual form

Step 3: Apply a visual mapping

Encode data characteristics into visual form

Step 3: Apply a visual mapping

Simplicity is the ultimate sophistication.Leonardo da Vinci

Sizemost commonly used (?)

used for identifying patterns & anomalies in big datasetsColors

Color Principles - Hue, Saturation, and Value

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

¡ 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

Location - maps

Network -node-link graphs

Time - animations

...

Shape - circles, rectangles, stars, icons,..

Example...

Which visual encodings do you see?

London Tube Map

Example...

Which visual encodings do you see?

London Tube Map

e.g. sketch on paper

e.g. what kind of filtering mechanisms?

Step 3: Apply a visual mapping to your dataset

e.g. sketch on paper

e.g. what kind of filtering mechanisms?

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?

Step 5?

Feedback loop

Step 5?

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

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

Some metrics that can be used

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?

Build Usable & Useful Visualisations

Build Usable & Useful Visualisations

Build Usable & Useful Visualisations

• Analytical Evaluation - formal study with experts

• Empirical evaluation - experiments with user tests

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

41

Go outside your research lab

Evaluate in real-life settings

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

TimeRapid PrototypingIteration 1

...Iteration 2 Iteration 3 Iteration N

Short feedback loops with frequent releases of prototypes

42

Gradually increase functionalities

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

Think aloud Usability lab Eye-tracking

questionnaires (SUS, TAM, ...)

Time for a bit of reflection

What did you learn?

POINTERS

• http://wearecolorblind.com/articles/quick-tips/

• http://infosthetics.com

• http://www.visualcomplexity.com/vc/

• http://bestario.org/research/remap

• ...

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

• ...

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

THANK YOU FOR YOUR ATTENTION!

joris.klerkx@cs.kuleuven.be

@jkofmsk

48