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 :)