7 Principles for Engaging Users with Visualization
-
Upload
benjamin-wiederkehr -
Category
Design
-
view
772 -
download
0
description
Transcript of 7 Principles for Engaging Users with Visualization
presented by Interactive Things
HELLO!
1
I’m Benjamin from Interactive Things
presented by Interactive Things
INTERACTIVE THINGSUser Experience & Data Visualization Studio
2
presented by Interactive Things
DATAVISUALIZATION.CHResource for Data Visualization & Infographics
3
presented by Interactive Things
7Principles for Engaging Users with Visualization
5
presented by Interactive Things
SUPPLY
6
Build an treasure chest of data.
presented by Interactive Things
NARRATION
9
Tell compelling stories with visualization.
presented by Interactive Things
Stories are important cognitive events, for they encapsulate, into one compact package, information, knowledge, context, & emotion.
10
Donald Norman
“
presented by Interactive Things 11
Narrative Visualization: Telling Stories with Data
Martini Glass Structure
Interactive Slideshow
Drill-Down Story
Edward Segel & Jeffrey Heer
New York Times: Faces of the Dead
presented by Interactive Things 13
Narrative Visualization: Telling Stories with Data
Martini Glass Structure
Interactive Slideshow
Drill-Down Story
Edward Segel & Jeffrey Heer
New York Times: Budget Forecasts, Compared With Reality
presented by Interactive Things
Narrative Visualization: Telling Stories with Data
Martini Glass Structure
Interactive Slideshow
Drill-Down Story
Edward Segel & Jeffrey Heer
15
New York Times: Murder: New York City
presented by Interactive Things
PERSONALIZATION
17
Make the reader feel at home.
New York Times: Jobless Rate for People Like You
presented by Interactive Things
PARTICIPATION
19
Foster the dialog between people.
New York Times: Mapping America
presented by Interactive Things
ACTION
21
Inspire the user to create real impact.
Green Peace & Daniel Fischer: Small Habits
Global Giving & Roland Loesslein: The Human's Development
presented by Interactive Things
MEASUREMENT
24
Analyze the hell out of your work.
Chartbeat
Bitly Clicky
Google Analytics
UNDP & Interactive Things: Human Development Index 2.0
OECD, Moritz Stefaner & Raureif: Better Life Index
presented by Interactive Things
EXPERIMENTATION
28
Push the medium forward.
140
Another potential way to respresent the data is a standard bar
chart. Each item would have its own bar of similar dimensions
and, because they are distinct, the second variable of colour
could be kept and comparing or reordering the bars accordingly is
straightforward. The advantage of the treemap over a bar chart is
that it saves space and similar items can be clustered together, but
comparison and labelling su!er in exchange for compactness.
Horizon graph
Horizon graphs are a kind of overlaid line graph. They are a
relatively new invention, so their usefulness is still undetermined,
and their strengths and weaknesses are still emerging. They were
developed by a data visualization company called Panopticon to
better visualize and compare several data sets over time, side by
side without overlapping them.
In our roadside stand example there are three separate
businesses, but what if there were thirty? Thirty bar charts per
week lined up next to each other would be too much. A stacked bar
chart gives us the total sales, but what if we wanted to compare
within each week? We could make a line graph for each store and
then plot all thirty on the same graph. That, too, would quickly
get overcrowded with information. As we"ve seen, once we exceed
about #ve or six, we start to run out of unique colours, shapes,
thicknesses and so on. Graphing thirty at once becomes a mess.
100
200
300
400
1 2 4 5 6 7 8 9 10 11 123
Peter Gassner. Designing with Data - PDF. 13th August 2010. © Five Simple Steps.
141 A Practical Guide to Designing with data
This is the niche that horizon graphs are designed to !ll. They are
basic line graphs split horizontally into a set number of bands.
This example uses four bands, but they can contain as many
as required. Each of the bands is coloured with an increasing
intensity of blue. So far, this is no di"erent than a standard line
graph with some interesting shading.
The next part is the Eureka! moment. Since we are really only
interested in the outer edge of the line graph, why not collapse
each of the bands on top of each other to save space?
Now we have the same data presented in a quarter of the space.
By changing the colour of the shading, the graph appears to be
stacking up the parts. There is nothing hiding behind any of the
peaks so, unlike 3-D charts, nothing is being obscured.
This works with both positive and negative values.
Maybe in some weeks the shops were making a loss, which can
be represented with a di"erent colour, such as varying intensities
of red.
1 2 4 5 6 7 8 9 10 11 123
~ Area graphs and charts
100
200
300
400
1 2 4 5 6 7 8 9 10 11 123
Peter Gassner. Designing with Data - PDF. 13th August 2010. © Five Simple Steps.
141 A Practical Guide to Designing with data
This is the niche that horizon graphs are designed to !ll. They are
basic line graphs split horizontally into a set number of bands.
This example uses four bands, but they can contain as many
as required. Each of the bands is coloured with an increasing
intensity of blue. So far, this is no di"erent than a standard line
graph with some interesting shading.
The next part is the Eureka! moment. Since we are really only
interested in the outer edge of the line graph, why not collapse
each of the bands on top of each other to save space?
Now we have the same data presented in a quarter of the space.
By changing the colour of the shading, the graph appears to be
stacking up the parts. There is nothing hiding behind any of the
peaks so, unlike 3-D charts, nothing is being obscured.
This works with both positive and negative values.
Maybe in some weeks the shops were making a loss, which can
be represented with a di"erent colour, such as varying intensities
of red.
1 2 4 5 6 7 8 9 10 11 123
~ Area graphs and charts
100
200
300
400
1 2 4 5 6 7 8 9 10 11 123
Peter Gassner. Designing with Data - PDF. 13th August 2010. © Five Simple Steps.
142
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
100
!100!200!300!400
200300400
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Shop 30
Shop 29
Shop 28
Shop 27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Now you can rapidly see which weeks saw gains and which saw
losses, and at the same time also watch the line trend upwards
or downwards.
The horizon graph works really well when large numbers of
data sets need to be compared. Converting one line graph into a
horizon graph does save some space, but now that we have this
ribbon, we can stack more ribbons on top to get a quick view of all
the di!erent shops and compare them in a limited space.
The downside of horizon graphs appears when the data sets are
very large. This example was broken down into only four colour
bands; this was su"cient to allow each to be distinct. The more
bands required, however, the more colours and the greater
potential for confusion. By limiting the number of divisions, each
band represents a larger portion of the data. To compare several
horizon graphs, their coloured bands need to represent the same
divisions; if they don#t, the comparison will be di"cult.
Peter Gassner. Designing with Data - PDF. 13th August 2010. © Five Simple Steps.
142
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
100
!100!200!300!400
200300400
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Shop 30
Shop 29
Shop 28
Shop 27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Now you can rapidly see which weeks saw gains and which saw
losses, and at the same time also watch the line trend upwards
or downwards.
The horizon graph works really well when large numbers of
data sets need to be compared. Converting one line graph into a
horizon graph does save some space, but now that we have this
ribbon, we can stack more ribbons on top to get a quick view of all
the di!erent shops and compare them in a limited space.
The downside of horizon graphs appears when the data sets are
very large. This example was broken down into only four colour
bands; this was su"cient to allow each to be distinct. The more
bands required, however, the more colours and the greater
potential for confusion. By limiting the number of divisions, each
band represents a larger portion of the data. To compare several
horizon graphs, their coloured bands need to represent the same
divisions; if they don#t, the comparison will be di"cult.
Peter Gassner. Designing with Data - PDF. 13th August 2010. © Five Simple Steps.
AnimatedComputed
presented by Interactive Things 32
Interactive Dynamic
Radiales Netzwerk
Radiales NetzwerkRadial Network with Edge Bundling
Force Directed Layout
Force Directed Layout
Streamgraph
Voronoi Tessalation
Computed
presented by Interactive Things 37
Interactive Dynamic Animated
Moritz Stefaner: Map Your Moves
PushPopPress: Our Choice
presented by Interactive Things 40
Interactive DynamicComputed Animated
GE & Periscopic: Cancer Conversations
presented by Interactive Things 42
Interactive Dynamic AnimatedComputed
City of Geneva, Lift & Interactive Things: Ville Vivante
presented by Interactive Things 44
SUPPLYNARRATION
PERSONALIZATIONACTION
MEASUREMENTEXPERIMENTATION
presented by Interactive Things
The idea for information design is:Don't get it original, get it right.
46
Edward Tufte
“
presented by Interactive Things
MERCI!
47
Don’t hesitate to get in touch:+41 44 267 66 [email protected]@ixt