HCI Lab Visualises Human-Computer Interactions

HUMAN COMPUTER INTERACTION LAB

INFORMATION
VISUALISATION
capita selecta 17/10/2012

Joris Klerkx
@jkofmsk

Wednesday 17 October 12

Imagine you never saw a car...

Would the following deﬁnitions 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







4. A chariot, carriage, or cart

A picture is worth a 1000 words


A deﬁnition...

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


A deﬁnition...

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


Not new..


Not new..

http://www.datavis.ca/milestones/


Publication Networks in conferences
Who are the most proliﬁc author(s)? Who is co-authoring with who?


Student Activity Meter
How are my students working? When do they work?
Are there students in trouble? ...


Step up!
Make students aware about their activity in the course


MUSE - Visualizing the origins and connections of institutions
based on co-authorship of publications

Nagel, T., Duval, E.: Muse:Visualizing the origins and connections of institutions based
on co-authorship of publications. Science2.0 for TEL workshop at EC-TEL 2010, Barcelona, Spain

On the menu...

graph
Some design basics
visualization

How to design a visualisation (application)?


What has the bigger share?
‘Real Estate’ or ‘Bonds’ has the bigger share?

http://www.perceptualedge.com/


Size & angle are not preattentive

“Save the pies for dessert” S. Few

Size & angle are not preattentive

Verkiezingen
14/10/12


deredactie.be
Verkiezingen
14/10/12


deredactie.be
Verkiezingen
14/10/12

demorgen.be


deredactie.be
Verkiezingen
14/10/12

demorgen.be

vtm.be


CHECK YOUR DATA


CHECK YOUR DATA

http://nieuws.vtm.be/verkiezingen/gemeente?province=P1&city=G73


COMMUNICATE THE CORRECT STORY


COMMUNICATE THE CORRECT STORY

nieuwsblad.be

vtm.be

deredactie.be


DON’T USE VISUALISATIONS TO MISLEAD...

BP - leak in gulf of mexico
http://ﬂowingdata.com/category/statistics/mistaken-data/

DON’T USE VISUALIZATIONS TO LIE... (1/2)



DON’T USE VISUALIZATIONS TO LIE... (2/2)



USE COMMON SENSE (1/3)

Which of these line graphs is easier to read?



Which of these two tables is easier to read?


Which labels are easier to read?


Choose graphs that best communicates your data or
answer your questions about your data
Which graph makes it easier to focus on the pattern of change through
time, instead of the individual values?


THINK ABOUT WHAT YOU DO
Seems ok?


THINK ABOUT WHAT YOU DO
Seems ok?

Equal interval scale


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


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

BE CAREFUL WITH 3D (DON’T USE IT)

On the menu...

Some graph design basics
visualization

How to design a visualisation (application)?


2 Facts to keep in mind



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 Use of Gestalt principles
Make it interactive, provide visual help



THE VISUALIZATION PIPELINE


Step 1: Think of a dataset,
Formulate the questions


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


“where” “when’’ “how much” “how often” (“why”)
Who are your intended users?


Example data-set :
Facebook privacy statement

Offer precise controls for sharing on the Internet...


Example data-set :

Users should navigate through 50 settings with more than 170 options


Example data-set :


Questions?


Example data-set :


Questions?
How did it change over time?


Example data-set :


Questions?
How does it compare to privacy statements of other tools?


Example data-set :


Questions?
How does it compare to privacy statements of other tools?
What are the options?


Step 2: Gather the dataset


eg. open data, census.gov, NY Times API, etc


Deﬁne the characteristics of the data


Time? hierarchical? 1D? 2D? nD? network data?


scales?


scales?

https://www.facebook.com/about/privacy


Step 3: Apply a visual mapping



Encode data characteristics into visual form



Encode data characteristics into visual form

Simplicity is the ultimate sophistication.
Leonardo da Vinci


Size
most commonly used (?)


Colors
used for identifying patterns & anomalies in big datasets

Color Principles - Hue, Saturation, and Value

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

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


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.


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


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


Gestalt Principles

¡ Law
of

Continuation
(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).


Gestalt Principles

¡ Law
of

Continuation
(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!


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

Location - maps

Network -node-link graphs

Time - animations

...


HOW DID IT CHANGE OVER TIME?

http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html

HOW DOES FB COMPARE
TO STATEMENTS OF OTHER TOOLS?

http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html

WHAT ARE THE OPTIONS?


Which visual encodings do you see?

Example...

London Tube Map

e.g. sketch on paper

e.g. what kind of ﬁltering mechanisms?


Step 3: Apply a visual mapping to your dataset



Step 3: Apply a visual mapping to your dataset
Step 4: Think about interaction of visualisation app


Step 5: How to evaluate visualisations?

Build Usable & Useful 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 of the interface over time


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 of the interface over time


Some metrics that can be used


Some metrics that can be used
• Effectiveness - does the visualization answer your questions? does it
provide value? Do they provide new insight? How? Why?

• Efficiency - to what extend may the visualization communicate your data
to the users efficiently? Do they get quicker answers to their questions?

• Usability - how easily the users interact with the system? Are the
information provided in clear and understandable format? Eg. Do the
layouts of elements make sense?

• Usefulness - are the visualizations useful? How may the users benefit from
it?

• Functionality - to what extend does the application provides the
functionalities required by the users?


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

44

Think aloud Usability lab Eye-tracking

questionnaires (SUS, TAM, ...)


Go outside your research lab
Evaluate in real-life settings

46

Go outside your research lab
Evaluate in real-life settings

Ec-tel 2010
Figure 4: Setting of the evaluation.
Hypertext 2011
Overview ﬁrst, search & ﬁlter, Start with what you know,
details on demand then grow
46

To conclude..


To conclude..

Lets try to bust 2 myths in this course...


To conclude..


Visualisations are just cool graphics


To conclude..



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


To conclude..




Only experts can create good visualizations


To conclude..




Only experts can create good visualizations

Maybe faster, but there are simple techniques anyone can apply


POINTERS

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

• http://infosthetics.com

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

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

• ... (a lot more online! )


LIBRARIES
• D3.js
• http://www.jerryvermanen.nl/datajournalismlist/
• Processing
• http://wiki.okfn.org/OpenVisualisation
• http://ﬂare.prefuse.org/
• http://iv.slis.indiana.edu/sw/
• http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/
• Tableau software
• R
• Multitouch4J
• Manyeyes...
• ...


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

52

HCI Lab Visualises Human-Computer Interactions

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to HCI Lab Visualises Human-Computer Interactions

Similar to HCI Lab Visualises Human-Computer Interactions (7)

More from Joris Klerkx

More from Joris Klerkx (20)

Recently uploaded

Recently uploaded (20)

HCI Lab Visualises Human-Computer Interactions