This document discusses how attention and cognition work and provides guidance for user experience design based on these principles. It notes that attention is a limited resource that is easily distracted. Good UX design should minimize things competing for the user's attention, account for potential discontinuities when using mobile devices, and reduce unnecessary cognitive load, especially for novice users. The document advocates designing interfaces that are as simple as possible while still meeting user needs.

1. Do I have your attention?
Thinking about UX
& UX about thinking
Chris Atherton
@finiteattention

2. https://www.flickr.com/photos/insideology/9242380720/
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?

3. 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.

4. This is clearly faked, but it made me laugh.
Psychology is more than just Freud, everyone!

5. I am mesmerised by stuff like this. It (and photography
generally) makes me think a lot about attention.

6. http://work.eriksoderberg.se
The gif version of this is EPIC, by the way.

7. https://www.flickr.com/photos/sludgeulper/4547893005/
As a lecturer, I started thinking a lot
about where people’s attention goes

8. https://www.flickr.com/photos/liverpoolhls/10740098824/
Plus ça change.

9. Friends in software got me interested in UIs, which
got me thinking about how we manage
people’s attention in user interfaces.

10. Once you start looking, it’s everywhere

11. Dark patterns. Oh, Ryanair.

12. 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.

13. Long story short: I left academia …
… so I could do more research. Only half joking.

14. getting attention
hey!
hey!
hey!
hey!
hey!
hey!
Getting attention is easy. Anything novel will do it.

15. These things do a great job at getting our attention.

16. This phone’s UI animates semi-randomly. I imagine it
talking to itself, but it’s also sort of talking to us.

17. 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!”

18. Attention is really good at pointing out things we
didn’t even know we’d noticed. Like this Twitter logo.

19. with thanks to @MikeTufekci
yup, that Twitter logo.

20. getting your attention
doesn’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.

21. 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.

22. keeping your attention
has a cost
‘resource depletion’
Did I mention that attention is a finite resource?
Spend your users’ attention wisely.

23. https://www.flickr.com/photos/wefi_official/10331536704/
There are a lot of things competing for our attention.
Keeping it might be harder than it used to be. Maybe.

24. 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’.

25. 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.

26. 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.

27. 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.

28. I first noticed this happening in software when
we were testing a prototype feature at Skype

29. You could go to someone’s profile and add tags
(very much like Google+ does ‘circles’)

30. 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.

31. 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.

32. https://www.flickr.com/photos/wefi_official/10331536704/
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.

33. One way of helping users (especially novice users)
see the effects of their behaviour in a complex UI
is to highlight changes using animation.

35. But if the animation appears too soon
after the previous screen, it’s easy to miss

36. 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.

37. 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.

38. 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.

39. I faded this slide into the next slide over 6 seconds

40. 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)

41. change blindness
So yeah, change blindness can occur through visual
discontinuity and through slow gradual changes
(guess what: you’re blinking during those)

42. michaelbach.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)

43. 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.

44. 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

45. working memory
You might know this as ‘short-term memory’. For our
purposes, they’re essentially the same thing.

46. I worked on this game for a bit.
The aim: memorise a shape.

47. Then the shape goes away
and you have to draw it from memory.

48. It was surprisingly hard. This was a game for children!

49. Partly, the feedback we were giving was complicated.

50. 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.

51. Miller’s 7 +/-2 is really actually more like 4.

52. Using blue feedback preserves the shape we’re
trying to get right, and reduces the
number of things we need to remember.

53. as simple as possible
but 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.

54. GOV.UK strives to do this. It’s hard; people come to the
site for a lot of very different reasons.

55. 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.

56. 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!

58. 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)

59. 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

60. 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.

61. We pared it down as much as we could;
I haven’t really seen anyone miss a field since.

62. W T M H Y E L A B P P
This much info is hard to remember …

63. 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.

64. 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.

65. 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.

66. 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.

67. A
C
E
D
B
F
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.

68. E
C A
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.

69. E
C A
D
F
B
knowledge schema
Experts have an existing schema; novices, not so much.

70. extraneous cognitive load
THIS, we can control. Extraneous load is all
about how we deliver the information.

71. high extraneous load
The happily-now-defunct UKBA visas information site.
Extraneous cognitive load all over the place.

72. 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.

74. low extraneous load
GOV.UK is all about minimising
extraneous cognitive load.

75. 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.

76. Consider ‘onboarding’ tutorials. Is a first-time user really
in a position to absorb 7 pages of info before starting?

77. 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.

78. This was a spectacularly jarring experience I had
recently. The same service on two platforms should
have at least passing resemblance. Cognitive load!

79. being a novice
is a lot like
being stressed
Cognitively speaking, that is.

80. 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://d2.static.dvidshub.net

81. 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.
http://photogallery.ewcupdate.com/

82. 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.

83. My personal bete noire. This website has actually made
me cry. The consequences of getting something wrong
are huge; stress leads to cognitive shutdown.

84. mobile first
This is such a good solution to problems of ‘too much’.
Mad love to @lukew for spreading the word here.

85. 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)

86. so in summary:

87. When you do things that will catch people’s attention,
try to make sure they serve a purpose

88. https://www.flickr.com/photos/wefi_official/10331536704/
Remember that people’s context on mobile is often
distracted, patchy, and subject to frequent
discontinuities. Design needs to be robust to that.

89. Consider what inadvertent discontinuities you might
be creating, and think about how to mitigate those

90. Minimise the number of things
you’re asking people to retain.

91. E
C A
D
F
B
expert view
Consider the expertise of your user base

92. 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?

93. Strive to minimise extraneous cognitive load, especially
when dealing with the cross-platform experience

94. Be especially kind to people who might be
experiencing stress — they don’t have much bandwidth
http://photogallery.ewcupdate.com/

95. Thank you
catherton@equalexperts.com
@finiteattention
Please do get in touch if you’d like to chat :)