Slides from The UX Crunch event hosted at Webcredible. Thanks for everyone who joined.

1. Tackling the challenge
of data visualisation
Scott Abbott
02 Aug 2016

3. 3
Source: Techcrunch

4. 4
Discussion
What is the difference
between data visualisation
and infographic

5. 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. 6
Infographic Explanatory
“What story am I trying to tell”
Data visualisation Exploratory
“What information does the
user need”

7. 7
Discussion
Why bother visualising?

8. 8
Drawing Comparisons Spotting Trends Creating Connections
Breakdowns Managing Vast
Quantities
Tracking Progress
What is it used for?

9. 9
Linear
Hierarchical
Network
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. 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. 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. 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. 13
Example
Spending data
Historical spending habits
The data
When and where purchases were made
Type of purchase made

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

17. 17

18. 18

19. 19
5 quick tips
Creating deep
interesting
Visualisations

20. 20
Tip 1
Want more, get more
Time exploring
Informationdetail
Static table Interactive visualisationStatic chart

21. 21
1. Want more, get more
Most important
information should be
available at a glance

22. 22

23. 23
Yahoo Weather
At a glance
Current temperature
Current conditions
Highs and lows
Dark skies
At a glance
Current temperature
Current conditions
Highs and lows
Temperature over next few hours
Chance of rain
Level of rainfall
Fresh air
At 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. 24
1. Want more, get more
Dig in
Source: https://interactivemap.marksandspencer.com

25. 25Source: https://interactivemap.marksandspencer.com

26. 26Source: https://dribbble.com/shots/2817755-Analytics-Exploration/attachments/577962

27. 27Source: https://finviz.com/map.ashx?t=sec_all

28. 28
1. Want more, get more
Tables aren’t evil

29. 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. 30
Tip 2
Encourage exploration

31. 31Source: http://visual.ly/london-food-hygiene?view=true

32. 32Source: http://poly-graph.co/timeless/ Matt Daniels

33. 33Source: http://polygraph.cool/youtube-election/ Matt Daniels and Jennifer Lee

34. 34
2: Encourage exploration
Create meaningful
connections

35. 35Source: Pillow App

36. 36
2: Encourage exploration
Allow manipulation

37. 37

38. 38

39. 39
Tip 3
Design for digital
(not desktops)

40. 40
Landscape, exploration
Portrait, information
Source: Pillow App

41. 41
3: Design for digital
Touch, tap, click
Source: Etch https://dribbble.com/shots/808569-Social-Analytics-App-Desktop/attachments/82808

42. 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. 43
3: Design for digital
Adapt

44. 44

45. 45
Tip 4
Data destroys designs
90%
2%2%1%2%12%
13%
34%
41%
Design Reality

46. 46
4: Data destroys designs
A bajillion variations

47. 47
4: Data destroys designs
Fail fast, fail early

48. 48
Tip 5
Use colour cleverly

49. 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. 50
5. Use colour cleverly
Check your
palettes

51. 51
Source: Jeffrey Shaffer
http://www.tableau.com/about/blog/2016/4/examining-data-viz-rules-dont-use-red-green-together-53463

52. 52
Bonus tip
Tools
d3js.org

53. 53
Workshop
Define Intelligent
visualisations for Incredifit
incredifit.

54. 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. 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. 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. 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. 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. 59
3. Design for digital
4. Data destroys designs
2. Encourage exploration
1. Want more, get more
5. Use colour cleverly

60. Go create beautiful, usable and
above all useful data visuals.
60
Thanks Scott Abbott
scottoabbott

61. 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 Abbott
scottoabbott