Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Eye Tracking & User Research


Published on

In February 2012 Annika Naschitzki presented to both Wellington and Auckland audiences about Optimal Usability's new eye tracker, and what it can do. Here is the presentation, however if you would like Anni to come into your organisation to do the presentation please get in touch:

Published in: Design, Technology, Business
  • presentation is just awesome :)
    I am a student of bioenginnering and i got a project this semester regarding eye focusing tracker, wasn't gettng initially from where to start but now i think i may initiate it .
    First time i'll be targetting eye for signal acquiring....hoping for positive results :)
    Thanks a bunch again for making me understand basics!
    Are you sure you want to  Yes  No
    Your message goes here
  • very informative...thanks for sharing
    Are you sure you want to  Yes  No
    Your message goes here
  • @Optimal.Usability Oh no, I'm not in the same field as you BUT your presentation has definitely sparked my interest in the subject. -cheers :)
    Are you sure you want to  Yes  No
    Your message goes here
  • @ah_livia awwh, thanks heaps! Your comment made my day. I really love talking about eye tracking, I'm glad it shows :) Do you work in the field as well?
    Are you sure you want to  Yes  No
    Your message goes here
  • WOAH!!!

    This presentation was MUCH more insightful than I expected!

    First, thank you for defining 'eye tracking.' Your definition was very thorough.

    Second, the 'Inform your design' portion of the presentation was grand! Thank you for sharing how this technique can be applied to presentations. It was sooooo refreshing to see a presentation offering 'presentation tips' outside of the typical scope of 'color, font, and other redundant tips'

    I hope your presentation lands as a most viewed presentation on Slideshare. I've gushed enough flattery, so I'll stop now. Good job!
    Are you sure you want to  Yes  No
    Your message goes here

Eye Tracking & User Research

  1. Eye tracking & UXAll will be revealed.Annika Naschitzki
  2. What is eye tracking?
  3. Eye tracking records what people look at 3
  4. See the user’s gaze - LiveYou can follow whatthe user pays attentionto in real-time.The participant‟s gazeis marked by reddots and red lines.A camera displays theparticipant, so you cansee their facialexpressions andbody language. 4
  5. Eye tracking results: Heatmaps Heatmaps show what participants focus on. In this example, „hot spots‟ are the picture of the shoes, the central entry field and the two right-hand tiles underneath. The data of all participants is averaged in this map. 5
  6. Eye tracking results: Gazeplot Gaze plots show the „visual path‟ of individual participants. Each bubble represents a fixation. The bubble size denotes the length or intensity of the fixation. Additional results are available in table format for more detailed analysis. More examples with interpretations are coming up. But before… 6
  7. How does it work?
  8. Pupils move a lotOur pupils are constantlyin motion.When the pupil ismoving, it‟s called a„saccade‟.During a saccade, visualperception is unlikely oreven impossible. in here, somewhere… 8
  9. How we ‘look’ FixationThe pupil must focus on apoint in order to perceivecolour, faces, writing, etc.That is called a „fixation‟.Eye Tracking measures the speed ofthe pupil and can thus detect when a Saccadefixation is happening! 9
  10. What do these fixations tell us?Fixations are linked to attention.Moving your eyes means movingattention.A fixation does not mean that theparticipant definitely perceived anelement.But it is fair to say that elementsthat draw visual attention have ahigher chance of being perceived(consciously or subconsciously). 10
  11. How can a monitor tell what I look at? tobii 11
  12. The red-eye effectThere‟s a layer in our eyes thatreflects infrared light.This is where the red-eye effect inphotos comes from as photo flashesuse infrared light.The eye tracking monitor makesuse of this effect! 12
  13. What the eye tracker seesThe eye trackingmonitor uses infraredlight to make thepupils of the personsitting in front of itlight up and sobecome detectable.This is what it looks likefor the monitor. tobii 13
  14. Monitors - No strings attachedIt used to be like this: Now it‟s all free and comfy. The monitor can capture the gaze in a wide area, so the participant can relax and move naturally: tobii 14
  15. Eye Tracking & User Research
  16. You run user research to understand: Your user‟s actual behaviour. Your user‟s attitudes, feelings, and motivations. Your user‟s experience with your company/organisation (stories). What is and isn‟t working in your design/product. 16
  17. You add eye tracking to get: A deeper understanding of user‟s actual behaviour. Insight into user‟s subconscious or instinctive behaviour. A better understanding of why your design does or doesn‟t work. Evidential (quantitative) data. 17
  18. There’s 2 scenarios for eye tracking The Check-Up Inform your design How is my design, Use eye tracking data website or product to support your design performing? process  How do users perceive my  Conceptual design: what design/website/product? basic structure works best?  Do users notice what I want  Wireframe stage: where shall them to notice? I place my content or images?  How is my design performing in the context of typical usage  Detailed design: how does my tasks? visual design serve the website‟s/product‟s design purpose? 18
  19. The Check-upHow is my design, websiteor product performing?
  20. Set-up of an eye tracking testUser tests are often run in 45 to 60minute sessions with 6 to 15participants:1. Participants are give a number of typical task to complete, using the website, design or product you want to test.2. The user’s intuitive interaction is observed, comments and reactions are recorded.3. The participant‟s impressions are captured in an interview at the end of the test. 20
  21. What happens then?The next step is to analysethe eye tracking data and theuser‟s feedback. We focus on: what users saw, what users overlooked and what they thought and felt about the website, design or product.The next slides are a couple of examples. 21
  22. Examples: Testing website designsWhat do you thinkdraws the user‟sattention on this site?The listed offers inthe centre or thespecial offerbanners on theright? 22
  23. The site suits browsers and focussed users This participant This participant thoroughly reads the focusses on the right- listed offers. hand banners.Whenever a destination He briefly gazes at thesparks her interest, she listed offers, but shows looks at the offer no reading behaviour details, e.g. the price. there. 23
  24. What drew most attention on this design? 24
  25. The key visual and a box at the bottom The key visual got Surprising: This box lots of got heaps of attention. attention. It reads: “If you are having trouble getting through to us on the phone, please click here to email us, we‟ll get back The main to you within 2 business navigation days”.and its optionsgot almost no Participants got the attention. impression that Telstra Clear has trouble with their customer service. Note: Telstra Clear have since re-designed their homepage. 25
  26. Inform your designUse eye tracking data to support your design process
  27. Design processThere‟s lots of decisions to make in all stages of the development process: 27
  28. Decision like these… Where should the ‘Pay now’ button be? Will users notice this if I put it here? 28
  29. … or these: How does my Does my design design perform draw enough compared to attention? others? 29
  30. … and these: DoesDesign A work better? … or Design B? 30
  31. Design principles – revealed by eye tracking
  32. Face EffectHumans are programmed to recognisefaces. Everywhere.This effect can be seen in eye tracking.Faces always draw attention!
  33. The Face effect – an exampleYep, there’sattention oncertain… … the face,areas, however, is the strongest point of focus! bunnyfoot 33
  34. Using the Face effectThe ‘Face effect’ Version A Version Bcan be used todrive perception.Here‟s a great examplefrom humanfactors.com2 versions of an addesign were testedusing eye tracking.The goal of the ad is ofcourse to drawattention to theproduct name. 34
  35. Using the Face effect Eye tracking results for ad Version A:  We see a face effect: The model‟s face draws a lot of attention.  The slogan is the other hot spot of the design. Participants will likely have read it.  The product and its name get some, but not a lot of attention. 35
  36. Using the Face effect Eye tracking results for ad Version B:  Again, we see a strong face effect. BUT: In this version, the models gaze is in line with the product and its name.  The product image and name get considerably more attention!  Additionally, even the product name at the bottom is noticed by a number of participants. 36
  37. Ways to focus attention Same effect: If the baby faces you, you‟ll look at the baby. But if the baby faces the ad message, you pay attention to the message. You basically follow the baby‟s 37
  38. Banner BlindnessDid we learn to ignore them?
  39. Central bannersCentral banners areused on a lot ofhomepages.They use prime realestate on thehomepage.That means they mustbe in the centre ofattention, right? 39
  40. Banner blindness… or are they?In this test, participants weregiven a task: Find the nearestATM.Participants focused on themain navigation and thefooter navigation– this iswhere they found the „ATMlocator‟.So, when visiting a site witha task in mind – as younormally do – the centralbanner can be ignored! 40
  41. Compare the visual paths: Task versus browse When browsing, the central banner gets lots of attention. But how often do you visit a bank website just to browse?Participant was asked just to look at the homepage Participant was given a task („Find the nearest ATM‟) 41
  42. Main focus: Navigation optionsEye tracking resultsshow: When looking Task: „What concerts are happen in Auckland this month?‟ Task: „You want to send an email to customer service‟for something on awebsite, the mainfocus of attentionare the navigationoptions.Maybe users havelearned that they‟reunlikely to find whatthey‟re looking for in acentral banner image. 42
  43. When do users look at banners?In this example, participants looked at the banner even though they werelooking for something specific. What‟s different? Task: „You want to get in touch with customer service‟ Participant was asked just to look at the homepage 43
  44. Banner Blindness: The trick is… … don’t make your banners look like banners! 44
  45. The bottom line:User research + Eye tracking =a more complete understanding of your user’s experience
  46. Thank you.Got questions? Get in touch: 04 498 57 42