Eye Tracking & Design


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: anni@optimalusability.com

Published in: Design, Technology, Business
1 Comment
  • Try GazeRecorder WebCam Eye Tracking for usability testing https://sourceforge.net/projects/gazerecorder/
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Using a monitor like that, the participant can move her/his head freely in a large area, the data accuracy is not lowered by natural head movement.
  • And these are some examples of what kind of questions you could answer with eye tracking. In fact, eye tracking will be most helpful if you have clear questions that you need answered rather than ‘how is this design stage doing’. However, it is possible to just give your design status a general check.
  • Eye Tracking lets us know where the user’s visual attention is drawn to, therefore, it is useful to:
  • This effect can be used to direct attention, for example on an ad. Here two different versions of an ad were eye-tracked. In this case, the model is looking directly at the viewer.
  • And in this version, the model looks at the product, forming a straight line between her eye and the product name on the package.
  • The key seems to be to make your banners not look too much like banners. Like in this example = on the left is the screen that was tested as free exploration, on the right participants had a task. In both cases, participants look at the banner, and even read the banner message!
  • This is NOT a joke, this is the website of an actual business. This may not be the best advice…
  • This is a better example. Saturated colours, high contrast.
  • This is a better example. Saturated colours, high contrast.
  • Eye Tracking & Design

    1. 1. Eye tracking & DesignAll will be revealed.Annika Naschitzki
    2. 2. What is eye tracking?
    3. 3. Eye tracking records what people look at 3
    4. 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. 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. 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. 7. How does it work?
    8. 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. 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. 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. 11. How can a monitor tell what I look at? tobii 11
    12. 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. 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. 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: kristenbell.org tobii 14
    15. 15. Eye Tracking & Design
    16. 16. Develop and designThere‟s lots of decisions to make in all stages of the design process: 16
    17. 17. Decision like these… Where should the ‘Pay now’ button be? Will users notice this if I put it here? 17
    18. 18. … or these: How does my Does my design design perform draw enough compared to attention? others? visuality-group.co.uk 18
    19. 19. … and these: DoesDesign A work better? … or Design B? 19
    20. 20. How eye tracking can help Provides insights into your user’s behaviour Answers questions such as: ‘Will users see/notice this?’ Evaluates the effectiveness of a design Reveals what the user’s attention is drawn to Serves as a tool for observers, e.g. during a user test 20
    21. 21. Using eye tracking – an example
    22. 22. Set-up of an eye tracking testDesign tests can be run in fairlyquick sessions (10 to 15 min) with10 to 20 participants:1. Present participants with the design(s) you want to test.2. Give them a task to complete using the design, or let them just explore.3. At the end of the test, participants fill in an on-screen questionnaire to capture their impressions and answer questions, e.g. „Which design do you prefer?‟ 22
    23. 23. 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 designs. 23
    24. 24. Examples: Testing website designsWhat do you thinkdraws the user‟sattention on this site?The listed offers inthe centre or thespecial offerbanners on theright? 24
    25. 25. The design 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. 25
    26. 26. What drew most attention on this design? 26
    27. 27. 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. 27
    28. 28. Design principles – revealed by eye tracking
    29. 29. Face EffectHumans are programmed to recognisefaces. Everywhere.This effect can be seen in eye tracking.Faces always draw attention!
    30. 30. The Face effect – an exampleYep, there’sattention oncertain… … the face,areas, however, is the strongest point of focus! bunnyfoot 30
    31. 31. 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. humanfactors.com 31
    32. 32. 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. humanfactors.com 32
    33. 33. 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. humanfactors.com 33
    34. 34. 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 gaze.usableworld.com.au 34
    35. 35. Banner BlindnessDid we learn to ignore them?
    36. 36. Central bannersCentral banners areused on a lot ofhomepages.They use prime realestate on thehomepage.That means they mustbe in the centre ofattention, right? 36
    37. 37. 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! 37
    38. 38. 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. 38
    39. 39. 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 39
    40. 40. Banner Blindness: The trick is… … don’t make your banners look like banners! 40
    41. 41. Let’s talk about coloursResearch shows that saturatedcolours and strong contrastswork best to capture attention
    42. 42. That must mean that this design is ideal: 42
    43. 43. … or maybe this is a better example:The Air New Zealandhomepage uses strongcolours.The buttons arecontrasted to thebackground.The special offer usesboth a high-resolutionimage and a prominentprice. 43
    44. 44. How do these different designs compare? 44
    45. 45. Colours chaos = Attention chaosThis heatmap shows achaotic, non-directedspread of visual attention: Everything seems to demand attention at the same time, lots of hot spots are the result. The participant‟s gazes are scattered between navigation elements and images. Some images capture more attention, the site options on the top are barely looked at. 45
    46. 46. In contrast: A structured designThis heatmap shows anoverall more structuredand deliberate design: There are clear centres of attention: the flight booking and special offer. The image of a woman (face effect) and a keyword („Wellington‟) draw the gaze towards the flight booking. Banner blindness is avoided by placing a relevant special offer and by using an unusual image. 46
    47. 47. The bottom line:Design + Eye tracking = a more completeunderstanding of your user’s experience
    48. 48. Thank you.Got questions? Get in touch: anni@optimalusability.com 04 498 57 42 optimalusability.com