Post on 27-Nov-2014
description
Do I have your attention?Thinking about UX
& UX about thinking
Chris Atherton
@finiteattention
http
s://
ww
w.fl
ickr
.com
/pho
tos/
insid
eolo
gy/9
2423
8072
0/
By the way: ‘stop me and buy one’ is dead. Now vans park where they want, and you have to go to them. Have we backslid in terms of customer experience?
A major perk of coming from cognitive neuroscience is that I acquired an MR image of my brain.
Occasionally I feel I need evidence of having one.
This is clearly faked, but it made me laugh.
Psychology is more than just Freud, everyone!
I am mesmerised by stuff like this. It (and photography generally) makes me think a lot about attention.
http
://w
ork.
erik
sode
rber
g.se
The gif version of this is EPIC, by the way.
https://www.flickr.com/photos/sludgeulper/4547893005/
As a lecturer, I started thinking a lot about where people’s attention goes
https://www.flickr.com/photos/liverpoolhls/10740098824/
Plus ça change.
Friends in software got me interested in UIs, which got me thinking about how we manage
people’s attention in user interfaces.
Once you start looking, it’s everywhere
Dark patterns. Oh, Ryanair.
Physical UIs aren’t exempt either. If you ever want to start an argument at a software conference, ask
everyone how to turn the heat up on this shower.
Long story short: I left academia … … so I could do more research. Only half joking.
getting attention
hey!
hey!
hey!
hey!
hey!
hey!
Getting attention is easy. Anything novel will do it.
These things do a great job at getting our attention.
This phone’s UI animates semi-randomly. I imagine it talking to itself, but it’s also sort of talking to us.
When I watch The Big Bang theory, my attention is constantly tugging at my sleeve, like a small child:
“Hey look — they have the same omelette pan we do!”
Attention is really good at pointing out things we didn’t even know we’d noticed. Like this Twitter logo.
with thanks to @MikeTufekci
yup, that Twitter logo.
getting your attentiondoesn’t cost much
(but…)The cost of having your attention so readily available all
the time is that it can be distracted by one thing and might miss something else — something important.
keeping attention
This slide literally fades. It’s really hard to sustain attention for long periods of time. You need something:
motivation, blood sugar, whatever.
keeping your attentionhas a cost
‘resource depletion’
Did I mention that attention is a finite resource?Spend your users’ attention wisely.
http
s://
ww
w.fl
ickr
.com
/pho
tos/
wefi
_offi
cial
/103
3153
6704
/
There are a lot of things competing for our attention.Keeping it might be harder than it used to be. Maybe.
attention to detail is soluble in discontinuity
the following slide shows a visual effect that isn’t going to translate well to slideshare. Go look on YouTube for
some videos of ‘flicker’ and ‘change blindness’.
When this image flickers, the yellow saddle cover and the logo on the bag appear and disappear. It takes a few go-rounds to notice, because of the visual glitch.
change blindness
Essentially, any time you get a visual interruption, you’re vulnerable to this, as your visual system reassesses the
scene but doesn’t always notice small changes.
https://www.flickr.com/photos/titanas/3152337220/
Driving with the wipers on is a good real-life example: we can miss changes that don’t alter the sense of the
scene as a whole, such as other drivers braking.
I first noticed this happening in software when we were testing a prototype feature at Skype
You could go to someone’s profile and add tags (very much like Google+ does ‘circles’)
I may have forgotten to say that this might even have been a separate screen rather than a modal;
I forget, sorry. My point stands, though.
People were all “Wait — what just happened? Did it add the tags?” They had missed a minor detail changing
because the whole screen had effectively changed too.
http
s://
ww
w.fl
ickr
.com
/pho
tos/
wefi
_offi
cial
/103
3153
6704
/
Now think about how often we experience visual discontinuities while using a mobile, just by looking away. Good, helpful design needs to allow for this.
One way of helping users (especially novice users) see the effects of their behaviour in a complex UI
is to highlight changes using animation.
But if the animation appears too soon after the previous screen, it’s easy to miss
attentional blink(180 - 450 ms. ish.)
This is basically a refractory period following a visual perception event. Don’t introduce anything new that you want people to notice during this time.
https://www.flickr.com/photos/foilman/6690152483/
The attentional blink may arise through our ‘parcelling up’ of perceptual events. The cost: we might miss other gifts while we’re (un)wrapping the present (haha) one.
If you use a really long slow fadeout on animations, that might not be very noticeable either. Fades lasting just a
few seconds are harder to perceive than faster ones.
I faded this slide into the next slide over 6 seconds
HELLO #uxcam
… not everybody spotted the change the first time. (it’s only a detail and doesn’t alter our sense of
what’s happening in the scene overall)
change blindness
So yeah, change blindness can occur through visual discontinuity and through slow gradual changes
(guess what: you’re blinking during those)
mic
hael
bach
.de
Go check out this animation. Concentrate on the central green flashing dot and watch as the yellow
dots seem to disappear (they don’t really)
inattentional blindness
I didn’t even mention the gorilla clip (if you haven’t seen it, google it). When we attend closely to one
thing, we can can totally overlook peripheral things.
attention and memory…kinda cousins,
kinda flakey
Psychologists would absolutely distinguish between attention and memory. What they
have in common is that neither is very good :-S
working memory
You might know this as ‘short-term memory’. For our purposes, they’re essentially the same thing.
I worked on this game for a bit.
The aim: memorise a shape.
Then the shape goes away
and you have to draw it from memory.
It was surprisingly hard. This was a game for children!
Partly, the feedback we were giving was complicated.
Breaking it down, this is the feedback we were asking people to understand. There’s a lot going on, and the
shape is kind of obscured by the feedback.
Miller’s 7 +/-2 is really actually more like 4.
Using blue feedback preserves the shape we’re trying to get right, and reduces the
number of things we need to remember.
as simple as possiblebut no simpler
Einstein was a smart guy (!) As little info as possible, but don’t remove so much that you end up making people’s lives more complicated.
GOV.UK strives to do this. It’s hard; people come to the site for a lot of very different reasons.
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
We recently worked on a date-picker that reminded me of something. While shading indicating availability is
helpful for e-commerce, it got in the way a bit.
X X X
X X X X X X X
X X X X X X X
X X X X X X X
X X X X X X X
Too many things!
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
On the second pass, we came up with something that had less information in it, but still enough to accomplish
the task at hand (booking an appointment)
X X X
X X X X X X X
X X X X X X X
X X X X X X X
X X X X X X X
Fewer things
We’ve also seen this play out in form design. Long pages full of form fields tended to elicit error messages
because people would miss a field and not notice.
We pared it down as much as we could; I haven’t really seen anyone miss a field since.
W T M H Y E L A B P P
This much info is hard to remember …
W T M H Y E L A B P P
…until you realise its the first line of That’s Amore, at which point it’s easy to remember the whole thing.
chunking
Chunking is when we use our larger knowledge about a thing to chunk lots of discrete bits of info into a single bite — like knowing London phones are 0207 or 0208.
cognitive load
This has kind of been a thing in psychology for the last little while; it’s nice to see UX talking about it too.
intrinsic cognitive load
Some information is inherently more complicated than other information, because it has more moving parts.
We can’t do much about this other than be aware.
A
C
E
D
F
B
novice view
If you’re a novice looking to learn this thing, you have to learn what all the moving parts are, and their relationships — an expensive cognitive load.
AC
E
D
F
B
expert view
Experts will view the information in very different ways — they already know something about it, and that detail and structure = less of a cognitive burden for them.
AC
E
D
F
B
knowledge schema
Experts have an existing schema; novices, not so much.
extraneous cognitive load
THIS, we can control. Extraneous load is all about how we deliver the information.
high extraneous load
The happily-now-defunct UKBA visas information site. Extraneous cognitive load all over the place.
Sometimes, stuff with a high cognitive load is easier to just ignore. Lots of users skim straight through long
pages of blurb and check ‘No’ without reading.
low extraneous load
GOV.UK is all about minimising extraneous cognitive load.
the first-time user
Cognitive load really comes into its own when we consider novice users and how much extra work we’re making them do compared to more practiced users.
Consider ‘onboarding’ tutorials. Is a first-time user really in a position to absorb 7 pages of info before starting?
This bugs me less, partly because there are fewer steps, and partly because this is a financial transaction and it’s worth taking time to reassure users. Money = fraught.
This was a spectacularly jarring experience I had recently. The same service on two platforms should have at least passing resemblance. Cognitive load!
being a noviceis a lot like
being stressed
Cognitively speaking, that is.
http://d2.static.dvidshub.net
A helicopter practice dunker. You have to go in it if you work on an oil rig. My former colleague @DrSurvival
measures stress and cognitive performance.
http://photogallery.ewcupdate.com/
You have to be able to exit the thing in the water. People’s salivary cortisol (a marker of stress) elevates.
Their cognitive performance plummets.
even less info if people might be scared
What novices and people under stress have in common is they can’t process much new information. So be kind.
My personal bete noire. This website has actually made me cry. The consequences of getting something wrong
are huge; stress leads to cognitive shutdown.
mobile first
This is such a good solution to problems of ‘too much’. Mad love to @lukew for spreading the word here.
When you can only fit so much on a screen, you have to be REALLY picky. We work with amazing content
designers from GDS who are ruthless (in good ways)
so in summary:
When you do things that will catch people’s attention, try to make sure they serve a purpose
http
s://
ww
w.fl
ickr
.com
/pho
tos/
wefi
_offi
cial
/103
3153
6704
/
Remember that people’s context on mobile is often distracted, patchy, and subject to frequent
discontinuities. Design needs to be robust to that.
Consider what inadvertent discontinuities you might be creating, and think about how to mitigate those
Minimise the number of things you’re asking people to retain.
AC
E
D
F
B
expert view
Consider the expertise of your user base
Think carefully about how much information you give during onboarding. Could some of it be introduced a
bit later, when people have developed a schema?
Strive to minimise extraneous cognitive load, especially when dealing with the cross-platform experience
http://photogallery.ewcupdate.com/
Be especially kind to people who might be experiencing stress — they don’t have much bandwidth
Thank you
catherton@equalexperts.com@finiteattention
Please do get in touch if you’d like to chat :)