Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Do I have your attention? 
Thinking about UX 
& UX about thinking 
Chris Atherton 
@finiteattention
https://www.flickr.com/photos/insideology/9242380720/ 
By the way: ‘stop me and buy one’ is dead. Now vans 
park where the...
A major perk of coming from cognitive neuroscience 
is that I acquired an MR image of my brain. 
Occasionally I feel I nee...
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://work.eriksoderberg.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 atten...
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 inter...
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 t...
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 ...
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 attention 
doesn’t cost much 
(but…) 
The cost of having your attention so readily available all 
the time is...
keeping attention 
This slide literally fades. It’s really hard to sustain 
attention for long periods of time. You need s...
keeping your attention 
has a cost 
‘resource depletion’ 
Did I mention that attention is a finite resource? 
Spend your u...
https://www.flickr.com/photos/wefi_official/10331536704/ 
There are a lot of things competing for our attention. 
Keeping ...
attention to detail 
is soluble in discontinuity 
the following slide shows a visual effect that isn’t going 
to translate...
When this image flickers, the yellow saddle cover and 
the logo on the bag appear and disappear. It takes a 
few go-rounds...
change blindness 
Essentially, any time you get a visual interruption, you’re 
vulnerable to this, as your visual system r...
https://www.flickr.com/photos/titanas/3152337220/ 
Driving with the wipers on is a good real-life example: 
we can miss ch...
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 po...
People were all “Wait — what just happened? Did it add 
the tags?” They had missed a minor detail changing 
because the wh...
https://www.flickr.com/photos/wefi_official/10331536704/ 
Now think about how often we experience visual 
discontinuities ...
One way of helping users (especially novice users) 
see the effects of their behaviour in a complex UI 
is to highlight ch...
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...
https://www.flickr.com/photos/foilman/6690152483/ 
The attentional blink may arise through our ‘parcelling 
up’ of percept...
If you use a really long slow fadeout on animations, that 
might not be very noticeable either. Fades lasting just a 
few ...
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 
wha...
change blindness 
So yeah, change blindness can occur through visual 
discontinuity and through slow gradual changes 
(gue...
michaelbach.de 
Go check out this animation. Concentrate on the 
central green flashing dot and watch as the yellow 
dots ...
inattentional blindness 
I didn’t even mention the gorilla clip (if you haven’t 
seen it, google it). When we attend close...
attention and memory 
…kinda cousins, 
kinda flakey 
Psychologists would absolutely distinguish 
between attention and mem...
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 kin...
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 possible 
but no simpler 
Einstein was a smart guy (!) As little info as possible, 
but don’t remove so much ...
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-pick...
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 wi...
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 peo...
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 wh...
chunking 
Chunking is when we use our larger knowledge about a 
thing to chunk lots of discrete bits of info into a single...
cognitive load 
This has kind of been a thing in psychology for the last 
little while; it’s nice to see UX talking about ...
intrinsic cognitive load 
Some information is inherently more complicated than 
other information, because it has more mov...
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 part...
E 
C A 
D 
F 
B 
expert view 
Experts will view the information in very different ways — 
they already know something abou...
E 
C A 
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 ...
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...
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 
wor...
This was a spectacularly jarring experience I had 
recently. The same service on two platforms should 
have at least passi...
being a novice 
is a lot like 
being stressed 
Cognitively speaking, that is.
A helicopter practice dunker. You have to go in it if you 
work on an oil rig. My former colleague @DrSurvival 
measures s...
You have to be able to exit the thing in the water. 
People’s salivary cortisol (a marker of stress) elevates. 
Their cogn...
even less info 
if people might be scared 
What novices and people under stress have in common 
is they can’t process much...
My personal bete noire. This website has actually made 
me cry. The consequences of getting something wrong 
are huge; str...
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 ...
so in summary:
When you do things that will catch people’s attention, 
try to make sure they serve a purpose
https://www.flickr.com/photos/wefi_official/10331536704/ 
Remember that people’s context on mobile is often 
distracted, p...
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.
E 
C A 
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 ...
Strive to minimise extraneous cognitive load, especially 
when dealing with the cross-platform experience
Be especially kind to people who might be 
experiencing stress — they don’t have much bandwidth 
http://photogallery.ewcup...
Thank you 
catherton@equalexperts.com 
@finiteattention 
Please do get in touch if you’d like to chat :)
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
Prochain SlideShare
Chargement dans…5
×

"Do I have your attention?" Chris Atherton at UX Cambridge 2014

4 041 vues

Publié le

Publié dans : Logiciels
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Sex in your area is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

"Do I have your attention?" Chris Atherton at UX Cambridge 2014

  1. 1. Do I have your attention? Thinking about UX & UX about thinking Chris Atherton @finiteattention
  2. 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. 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. 4. This is clearly faked, but it made me laugh. Psychology is more than just Freud, everyone!
  5. 5. I am mesmerised by stuff like this. It (and photography generally) makes me think a lot about attention.
  6. 6. http://work.eriksoderberg.se The gif version of this is EPIC, by the way.
  7. 7. https://www.flickr.com/photos/sludgeulper/4547893005/ As a lecturer, I started thinking a lot about where people’s attention goes
  8. 8. https://www.flickr.com/photos/liverpoolhls/10740098824/ Plus ça change.
  9. 9. Friends in software got me interested in UIs, which got me thinking about how we manage people’s attention in user interfaces.
  10. 10. Once you start looking, it’s everywhere
  11. 11. Dark patterns. Oh, Ryanair.
  12. 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. 13. Long story short: I left academia … … so I could do more research. Only half joking.
  14. 14. getting attention hey! hey! hey! hey! hey! hey! Getting attention is easy. Anything novel will do it.
  15. 15. These things do a great job at getting our attention.
  16. 16. This phone’s UI animates semi-randomly. I imagine it talking to itself, but it’s also sort of talking to us.
  17. 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. 18. Attention is really good at pointing out things we didn’t even know we’d noticed. Like this Twitter logo.
  19. 19. with thanks to @MikeTufekci yup, that Twitter logo.
  20. 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. 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. 22. keeping your attention has a cost ‘resource depletion’ Did I mention that attention is a finite resource? Spend your users’ attention wisely.
  23. 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. 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. 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. 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. 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. 28. I first noticed this happening in software when we were testing a prototype feature at Skype
  29. 29. You could go to someone’s profile and add tags (very much like Google+ does ‘circles’)
  30. 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. 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. 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. 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.
  34. 34. But if the animation appears too soon after the previous screen, it’s easy to miss
  35. 35. 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.
  36. 36. 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.
  37. 37. 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.
  38. 38. I faded this slide into the next slide over 6 seconds
  39. 39. 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)
  40. 40. change blindness So yeah, change blindness can occur through visual discontinuity and through slow gradual changes (guess what: you’re blinking during those)
  41. 41. 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)
  42. 42. 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.
  43. 43. 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
  44. 44. working memory You might know this as ‘short-term memory’. For our purposes, they’re essentially the same thing.
  45. 45. I worked on this game for a bit. The aim: memorise a shape.
  46. 46. Then the shape goes away and you have to draw it from memory.
  47. 47. It was surprisingly hard. This was a game for children!
  48. 48. Partly, the feedback we were giving was complicated.
  49. 49. 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.
  50. 50. Miller’s 7 +/-2 is really actually more like 4.
  51. 51. Using blue feedback preserves the shape we’re trying to get right, and reduces the number of things we need to remember.
  52. 52. 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.
  53. 53. GOV.UK strives to do this. It’s hard; people come to the site for a lot of very different reasons.
  54. 54. 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.
  55. 55. 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!
  56. 56. 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)
  57. 57. 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
  58. 58. 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.
  59. 59. We pared it down as much as we could; I haven’t really seen anyone miss a field since.
  60. 60. W T M H Y E L A B P P This much info is hard to remember …
  61. 61. 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.
  62. 62. 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.
  63. 63. 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.
  64. 64. 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.
  65. 65. 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.
  66. 66. 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.
  67. 67. E C A D F B knowledge schema Experts have an existing schema; novices, not so much.
  68. 68. extraneous cognitive load THIS, we can control. Extraneous load is all about how we deliver the information.
  69. 69. high extraneous load The happily-now-defunct UKBA visas information site. Extraneous cognitive load all over the place.
  70. 70. 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.
  71. 71. low extraneous load GOV.UK is all about minimising extraneous cognitive load.
  72. 72. 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.
  73. 73. Consider ‘onboarding’ tutorials. Is a first-time user really in a position to absorb 7 pages of info before starting?
  74. 74. 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.
  75. 75. This was a spectacularly jarring experience I had recently. The same service on two platforms should have at least passing resemblance. Cognitive load!
  76. 76. being a novice is a lot like being stressed Cognitively speaking, that is.
  77. 77. 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
  78. 78. 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/
  79. 79. 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.
  80. 80. My personal bete noire. This website has actually made me cry. The consequences of getting something wrong are huge; stress leads to cognitive shutdown.
  81. 81. mobile first This is such a good solution to problems of ‘too much’. Mad love to @lukew for spreading the word here.
  82. 82. 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)
  83. 83. so in summary:
  84. 84. When you do things that will catch people’s attention, try to make sure they serve a purpose
  85. 85. 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.
  86. 86. Consider what inadvertent discontinuities you might be creating, and think about how to mitigate those
  87. 87. Minimise the number of things you’re asking people to retain.
  88. 88. E C A D F B expert view Consider the expertise of your user base
  89. 89. 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?
  90. 90. Strive to minimise extraneous cognitive load, especially when dealing with the cross-platform experience
  91. 91. Be especially kind to people who might be experiencing stress — they don’t have much bandwidth http://photogallery.ewcupdate.com/
  92. 92. Thank you catherton@equalexperts.com @finiteattention Please do get in touch if you’d like to chat :)

×