Post on 11-Feb-2017
Tackling the challenge of data visualisationScott Abbott
02 Aug 2016
3Source: Techcrunch
4
Discussion
What is the difference between data visualisation and infographic
5Source: http://readwrite.com/2011/01/07/difference-between-datavisualization-infographics/
Infographic“I would say that infographics are really a subset of data/info visualisations. An infographic is static by definition. They are graphics.”
Data visualisation“A data/info visualisation may be static, but most often these are interactive and allow the viewer to explore the data/information in different ways.”
Kim Rees, partner at Periscopic.com
6
Infographic Explanatory
“What story am I trying to tell”
Data visualisation Exploratory
“What information does the user need”
7
Discussion
Why bother visualising?
8
Drawing Comparisons Spotting Trends Creating Connections
Breakdowns Managing Vast Quantities
Tracking Progress
What is it used for?
9
Linear
HierarchicalNetwork
Types of visualisation
Parallel
to show connections
varies over time or in relation to another factor
to show groupings and importance
to show reach, frequency or shares of a whole
10
Gather user needs
Examine data
Understand context
What data is available?
What story does the data tell?
What goals does the user have?
What jobs need to be done?
Why the heck are they here?
Where is it going to appear?
What is the most important information?
Are there any other datasets a user might need?
Start by asking the right questions
11
Example
Spending data
A new banking site is looking to help those who struggle with planning, budgeting and financial understanding, such as students.
banko.
12
Example
Spending data
“I just don’t know where my money goes…”
Technologically savvy
Financially… not
Main device is for banking is mobile
The user, Sam the student
13
Example
Spending data
Historical spending habits
The data
When and where purchases were made
Type of purchase made
14
Example
Spending data
Plans later of an app for OSX and Android
The context
Most important information is knowing a breakdown of spending
First delivery will be a website
15
Example
Spending data
User Wants to see at a glance a
breakdown of my spending over the month
Data Historical spending habits,When and where purchases
were made, categorisation of purchases
Context Most important information is
current balance, plus predicted balance. Most important information is knowing a breakdown of spending
16
17
18
19
5 quick tips
Creating deep interesting Visualisations
20
Tip 1 Want more, get more
Time exploring
Info
rmat
ion
det
ail
Static table Interactive visualisationStatic chart
21
1. Want more, get more Most important information should be available at a glance
22
23
Yahoo WeatherAt a glance
Current temperature
Current conditions
Highs and lows
Dark skiesAt a glance
Current temperature
Current conditions
Highs and lows
Temperature over next few hours
Chance of rain
Level of rainfall
Fresh airAt a glance
Current temperature
Current conditions
Highs and lows
Temperature over next few hours
Chance of rain
Highs over next few days
Conditions over next few days
24
1. Want more, get more Dig in
Source: https://interactivemap.marksandspencer.com
26Source: https://dribbble.com/shots/2817755-Analytics-Exploration/attachments/577962
28
1. Want more, get more Tables aren’t evil
29
Janus housing limited
TFL Contactless
750.56
3.50
TFL Contactless 3.50
Starbucks 4.92
Tesco 40.51
Janus housing limited
TFL Contactless
750.56
3.50
TFL Contactless 3.50
Starbucks 4.92
Tesco 40.51
25 July 2016
25 July 2016
30
Tip 2
Encourage exploration
31Source: http://visual.ly/london-food-hygiene?view=true
33Source: http://polygraph.cool/youtube-election/ Matt Daniels and Jennifer Lee
34
2: Encourage exploration
Create meaningful connections
35Source: Pillow App
36
2: Encourage exploration
Allow manipulation
37
38
39
Tip 3
Design for digital (not desktops)
40
Landscape, exploration
Portrait, information
Source: Pillow App
41
3: Design for digital Touch, tap, click
Source: Etch https://dribbble.com/shots/808569-Social-Analytics-App-Desktop/attachments/82808
42
3: Design for digital Real estate is expensive
1 Source: https://dribbble.com/shots/2251033-Bank-App
2 Source: https://dribbble.com/shots/2485100-Health-App-steps-animation
1 2
43
3: Design for digital Adapt
44
45
Tip 4
Data destroys designs
90%
2%2%1%2%12%
13%
34%
41%
Design Reality
46
4: Data destroys designs
A bajillion variations
47
4: Data destroys designs
Fail fast, fail early
48
Tip 5
Use colour cleverly
49
5. Use colour cleverly
Connect data and Visuals
Janus housing limited
TFL Contactless
750.56
3.50
Tesco 40.51
25 July 2016
50
5. Use colour cleverly
Check your palettes
51Source: Jeffrey Shaffer http://www.tableau.com/about/blog/2016/4/examining-data-viz-rules-dont-use-red-green-together-53463
53
Workshop
Define Intelligent visualisations for Incredifit
incredifit.
54
Data set 1 Incredifit nutritional log
Data available:
• Recommended daily intake of various nutrients and calories
• User’s calorie and nutrient goal
• User’s food consumption
• Other user’s intake including friends
• User’s exercise plan & exercise log
Goals:
To see complete log of my nutritional inputs and my progress towards my nutritional goals both today and across various time periods.
55
Data set 2 Incredifit exercise plan
Data available:
• Recommended exercises for various parts of the body (ie. Cardio, Arms etc)
• User’s previous exercise logs
• User’s fitness goals
• Other user’s exercise including friends
Goals:
To see complete log of my fitness and exercise goals, to track against them and see my progress.
56
Data set 3 Incredifit sleep tracker
Data available:
• Users sleep patterns and quality of sleep per night
• User’s calorie and nutrient goals
• User’s food consumption
• User’s exercise plan
• Users exercise plan & exercise log
Goals:
To see complete log of my sleeping patterns, see the quality of my sleep, and the effect certain parts of my lifestyle may be having on my nights.
57
Data set 4 Incredifit stop-smoking aid
Data available:
• Number of cigarettes smoked on a daily level
• Money spent
• User’s exercise log
• User’s sleeping log
• Average risk of smoking related diseases
Goals:
To see track and help me in my stopping smoking journey. To see the improvements on my health and on my finance.
58
Dashboard Incredifit health overview dashboard
Data available:
• Users nutritional log
• Recommended daily intake of various nutrients and calories
• User’s calorie and nutrient goals
• User’s food consumption
• Users exercise data
• Recommended exercises for various parts of the body (ie. Cardio, Arms etc)
• User’s previous exercise logs
• User’s fitness goals
• Users sleep tracker
• Users health data
• Stop-Smoking progress
Goals:
To see overview of my total health and fitness statistics.
59
3. Design for digital
4. Data destroys designs
2. Encourage exploration
1. Want more, get more
5. Use colour cleverly
Go create beautiful, usable and above all useful data visuals.
60
Thanks Scott Abbottscottoabbott
61
3. Design for digital
4. Data destroys designs
2. Encourage exploration
1. Want more, get more
5. Use colour cleverly
Most important information should be available at a glance | Dig in | Tables aren’t evil
Create meaningful connections | Allow manipulation
Touch, tap, click | Adapt | Real estate is expensive
A billion different variations | Fail fast, fail early
Connect data and visuals | Check your colours
5 quick tips
Creating deep interesting Visualisations
Scott Abbottscottoabbott