august 2014 | visualizing data for people: a human factors perspective
DESCRIPTION
There are a variety of helpful resources for designers (e.g., books, blogs) that describe best practices for data visualization. While these resources often provide useful recommendations, they sometimes fail to offer explanations about how these visual representations support human cognition and perception. For example, why should we provide time-series trends, limit the use of color, and strive for visual interpretations of values? What is it about human attention, memory, and situation awareness that make some data visualization techniques more effective than others? This presentation will give an overview of some best practices of data visualization and will provide a discussion of why they benefit human perception and performance. Paul Derby is a Senior Experience Designer within the Honeywell User Experience design studio. Paul has a PhD in experimental psychology (human factors) from Texas Tech University. At Honeywell, Paul focuses on UX research and design within the process industry (e.g., oil/gas, petrochemical, etc.). Currently, Paul is leading multiple UX efforts to improve data visualization products within this domain.TRANSCRIPT
Paul Derby, PhD
Michael Crites, MA
Visualization Data for People: A Human Factors Perspective
Topics on Paul’s agenda:
Who is this Paul guy?
What is Human Factors?
Human Factors and data visualization
1
2
3
PhD + MA, Experimental Psychology (Human Factors) Texas Tech University
EDUCATION
Senior Experience Designer Honeywell User Experience
CAREER
BA, Psychology California State University, Long Beach
20
02
2
00
3
20
04
2
00
5
20
06
2
00
7
20
08
2
00
9
20
10
2
01
1
20
12
2
01
3
20
14
Education + mentoring
Service Design
UX for small businesses
INTERESTS
What Paul does for Honeywell
Designs Experiences Lead end-to-end UX strategy + design for data visualization solutions
What Paul does for Honeywell
Designs Experiences Lead end-to-end UX strategy + design for data visualization solutions
What Paul does for Honeywell
Designs Experiences Lead end-to-end UX strategy + design for data visualization solutions
Engage Sell Install Use Support Upgrade
Website
Demos
Purchase
License
Software
Physical
Web
Phone Updates
Versions
Add-on
What Paul does for Honeywell
Designs Experiences Lead end-to-end UX strategy + design for data visualization solutions
Discover Define Develop Deliver
What Paul does for Honeywell
Designs Experiences Lead end-to-end UX strategy + design for data visualization solutions
Marketing Engineering Designers
Leaders Users
Marcom
What Paul does for Honeywell
Designs Experiences Lead end-to-end UX strategy + design for data visualization solutions
Marketing Engineering Designers
Training Leaders Users
Marcom
Sales
Operations
Installers
Tech support
Accounts
ePresence Tech Writers QA IT
What Paul does for Honeywell
Leads Human Factors Research Principal Investigator: Abnormal Situation Management Consortium
Human Factors + Experience
Cognitive
Perceptual
Physical
Social
Experience
Information dashboard
What is a dashboard?
A visual display of the most important information needed to
achieve one or more objectives, consolidated and arranged on
a single screen so the information can be monitored at a
glance (Few, 2013).
What is a dashboard?
In other words:
It’s a high-level description of the things I care about –
except I only really care about what’s wrong… and I don’t
want to spend time looking at it. Clearly, I have more
important things to do.
Psychological nerdy talk
Cognition
Sensation The process of sensing our
environment through touch,
taste, sight, sound, and smell.
The process of receiving,
processing, storing, and
using information.
Psychological nerdy talk
Cognition
retina memory
attention situation awareness
Sensation
Retina light-sensitive layer of tissue lining the inner surface of the eye
Retina
Retina
Retina
Retina
Retina
Retina
Retina
Retina
Rods
Cones
Retina p
ho
tore
cep
tor
den
sity
cones
rods
fovea
Motion + low light Motion + low light detail + color high light
160k/mm2
Retina
ph
oto
rece
pto
r d
ensi
ty
cones
rods
Short Medium Long
(Acuity)
Wavelength
fovea
1
2
3
4
5
6
7
8
Retina 10 colors (Healey, 1996)
Retina
Retina
ph
oto
rece
pto
r d
ensi
ty
cones
rods
Medium Long
Acuity
Short
Retina
ph
oto
rece
pto
r d
ensi
ty
cones
rods
Short Medium Long
Acuity
Retina
ph
oto
rece
pto
r d
ensi
ty
cones
rods
Short Medium Long
Acuity
Retina
Designing to support how we see color
Color We are most sensitive to red/yellow. They should be reserved for
important information.
Color #2 We are least sensitive to blue/violet. They should be reserved for
non-critical information.
Color deficiency Don’t rely specifically on color to convey a message. Rather, use
color as a redundant backup. Design in monochrome first.
Psychological nerdy talk
Sensation Cognition
retina
memory
attention situation awareness
Attention Ability to selectively process some information while ignoring others
(Johnston & Dark, 1986)
Attention
ph
oto
rece
pto
r d
ensi
ty
cones
rods
Acuity
Attention
Attention
Attention
Attention
Attention
Target Non-target
Attention Noise!
Attention Shape
Attention Color
Attention Size
Attention Movement / Pulse
(Flashing)
Attention Distractions
Attention Many Distractions
Designing to support attention
Redundant coding Use purposeful color and shape/motion to draw attention
Avoid clutter Avoid cluttering with large, meaningless pictures & 3D effects.
Increase consistency among objects
Support visual scanning through structure Use Gestalt principles to group object for meaningful scanning
Designing to support attention
Designing to support attention
Psychological nerdy talk
Sensation Cognition
retina
working
memory
attention situation awareness
Ability to actively maintain task-relevant information in the service of a cognitive task
(Baddeley & Hitch, 1974)
Working memory
Working memory
Central
Executive
Visuospatial
sketchpad
Phonological
loop
Long term
Memory
Working memory
Central
Executive
Visuospatial
sketchpad (visual)
Phonological
loop (verbal)
Long term
Memory
Working memory
Working memory
How many rows of ?
Working memory (task #1)
0 50 200
Working memory (task #1)
Raise left hand If number is greater than 50
Raise right hand If number is less than 50
50 - 1
48 + 3
150 / 4
46.322 + 3.81
1200 - 3 /100 +7
(1200 – (3 /100)) +7
Easy? Difficult?
Working memory (task #2)
Which store sold the most oranges in June?
April May June July
Bananas 94 84 93 52
Strawberries 51 67 84 85
Oranges 7 10 23 35
Kiwi 55 64 66 78
Apples 87 79 60 28
Pineapples 59 61 39 47
Coconuts 87 60 94 74
Total 440 425 459 399
Byerly’s Lunds Cub Rainbow Whole Foods
April May June July
Bananas 58 68 23 11
Strawberries 72 61 37 12
Oranges 48 72 65 51
Kiwi 45 22 70 57
Apples 57 60 15 55
Pineapples 96 44 33 23
Coconuts 26 65 52 49
Total 402 392 295 258
Byerly’s Lunds Cub Rainbow Whole Foods
April May June July
Bananas 60 3 20 35
Strawberries 81 60 57 98
Oranges 64 88 55 61
Kiwi 7 54 50 98
Apples 26 47 43 43
Pineapples 21 24 91 62
Coconuts 76 40 79 58
Total 335 316 395 455
Byerly’s Lunds Cub Rainbow Whole Foods
April May June July
Bananas 1 67 26 77
Strawberries 70 89 1 53
Oranges 88 13 61 93
Kiwi 43 15 84 44
Apples 8 53 84 38
Pineapples 98 11 61 37
Coconuts 92 32 99 89
Total 400 280 416 431
Byerly’s Lunds Cub Rainbow Whole Foods
April May June July
Bananas 2 47 91 65
Strawberries 74 84 68 100
Oranges 76 42 12 84
Kiwi 26 86 92 90
Apples 47 96 79 57
Pineapples 75 4 41 52
Coconuts 86 46 59 2
Total 386 405 442 450
Byerly’s Lunds Cub Rainbow Whole Foods
Working memory (task #2)
Which store sold the most oranges in June?
Designing to support working memory
Increase proximity Place related information in close proximity
Avoid interpretation Express important data directly and visually
Avoid excessive detail All unnecessary information results in the user having to filter
what’s important
Current Target
3.4590%
Designing to support working memory
Psychological nerdy talk
Sensation Cognition
retina
working
memory
attention situation awareness
Comprehension, or understanding, of a dynamic environment
(Durso, Rawson, & Girotto, 2007)
Situation awareness
Situation awareness
Perception Comprehension Projection
Situation awareness
Perception Comprehension Projection
Perception of elements in time and/or space
Bananas Sold
45 Apples Sold
98 Oranges Sold
32
Situation awareness
Perception Comprehension Projection
Comprehension of its meaning
Apples Sold 98 100 50 0
(count)
Bananas Sold 45
Oranges Sold 32
Situation awareness
Perception Comprehension Projection
Projection of their future state
Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov
0
25
50
75
100
Co
un
t
40 50 60 70 75 90 70 65 60 50 45 45
Bananas Sold
Situation awareness
Perception Comprehension Projection
Projection of their future state
Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov
0
25
50
75
100
Co
un
t
40 50 60 70 75 90 70 65 60 50 45 45
Bananas Sold
BYERLY’S
Bananas
Strawberries
Oranges
Kiwi
Apples
Pineapples
Coconuts
94
51
7
55
87
59
87
Count YTD
LUNDS
Bananas
Strawberries
Oranges
Kiwi
Apples
Pineapples
Coconuts
94
51
58
55
7
59
87
Count YTD
BYERLY’S
Bananas
Strawberries
Oranges
Kiwi
Apples
Pineapples
Coconuts
94
51
7
55
87
59
87
Count YTD
RAINBOW
Bananas
Strawberries
Oranges
Kiwi
Apples
Pineapples
Coconuts
94
51
7
55
87
59
87
Count YTD
WHOLE FOODS
Bananas
Strawberries
Oranges
Kiwi
Apples
Pineapples
Coconuts
94
51
7
55
87
59
87
Count YTD
TOTAL FRUIT
L C R WF B
60
100
0
30
Designing to support situation awareness
Single screen Remain within the boundaries of a single screen
Context Show where data has been and where it’s going
Leading indicators Display information about what will likely happen rather than
what already happened
1
Wait.. what was that again?
Designing to support color vision
Color We are most sensitive to red/yellow. They should be reserved for
important information.
Color #2 We are least sensitive to blue/violet. They should be reserved for
non-critical information.
Color deficiency Don’t rely specifically on color to convey a message. Rather, use
color as a redundant backup. Design in monochrome first.
Designing to support attention
Redundant coding Use purposeful color and shape/motion to draw attention
Avoid clutter Avoid cluttering with large, meaningless pictures & 3D effects.
Increase consistency among objects
Support visual scanning Use Gestalt principles to group object for meaningful scanning
Designing to support working memory
Proximity Put related information in close proximity
Avoid interpretation Express important data directly and visually
Avoid excessive detail All unnecessary information results in the viewer having to filter
what’s important
Current Target
3.4590%
Designing to support situation awareness
Single screen Remain within the boundaries of a single screen
Context Show where data has been and where it’s going
Leading indicators Display information about what will likely happen rather than
what already happened
1
Guiding principles of dashboard design
AND I’m done.
Thanks :)