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 & DesignAll will be revealed.Annika Naschitzki
What is eye tracking?
Eye tracking records what people look at                                           3
See the user’s gaze - LiveYou can follow whatthe user pays attentionto in real-time.The participant‟s gazeis marked by red...
Eye tracking results: Heatmaps                            Heatmaps show what                            participants focus...
Eye tracking results: Gazeplot                             Gaze plots show the „visual path‟                             o...
How does it work?
Pupils move a lotOur pupils are constantlyin motion.When the pupil ismoving, it‟s called a„saccade‟.During a saccade, visu...
How we ‘look’                                FixationThe pupil must focus on apoint in order to perceivecolour, faces, wri...
What do these fixations tell us?Fixations are linked to attention.Moving your eyes means movingattention.A fixation does n...
How can a monitor tell what I look at?          tobii                                         11
The red-eye effectThere‟s a layer in our eyes thatreflects infrared light.This is where the red-eye effect inphotos comes ...
What the eye tracker seesThe eye trackingmonitor uses infraredlight to make thepupils of the personsitting in front of itl...
Monitors - No strings attachedIt used to be like this:                                             Now it‟s all free and c...
Eye Tracking & Design
Develop and designThere‟s lots of decisions to make in all stages of the design process:                                  ...
Decision like these…                       Where should                       the ‘Pay now’                        button ...
… or these:   How does my                   Does my design  design perform                    draw enough   compared to   ...
… and these:  DoesDesign A  work better?                  … or                 Design                   B?                ...
How eye tracking can help Provides insights into your user’s behaviour Answers questions such as: ‘Will users see/notice...
Using eye tracking –    an example
Set-up of an eye tracking testDesign tests can be run in fairlyquick sessions (10 to 15 min) with10 to 20 participants:1. ...
What happens then?The next step is to analysethe eye tracking data and theuser‟s feedback. We focus on: what users saw, ...
Examples: Testing website designsWhat do you thinkdraws the user‟sattention on this site?The listed offers inthe centre or...
The design suits browsers and focussed users        This participant           This participant   thoroughly reads the    ...
What drew most attention on this design?                                           26
The key visual and a box at the bottom     The key   visual got                                                 Surprising...
Design principles – revealed      by eye tracking
Face EffectHumans are programmed to recognisefaces. Everywhere.This effect can be seen in eye tracking.Faces always draw a...
The Face effect – an exampleYep, there’sattention oncertain…                               … the face,areas,              ...
Using the Face effectThe ‘Face effect’          Version A   Version Bcan be used todrive perception.Here‟s a great example...
Using the Face effect                                  Eye tracking results for ad                                  Versio...
Using the Face effect                                  Eye tracking results for ad                                  Versio...
Ways to focus attention    Same effect: If the baby faces you, you‟ll look at the baby. But if the baby faces the ad    me...
Banner BlindnessDid we learn to ignore them?
Central bannersCentral banners areused on a lot ofhomepages.They use prime realestate on thehomepage.That means they mustb...
Banner blindness… or are they?In this test, participants weregiven a task: Find the nearestATM.Participants focused on the...
Main focus: Navigation optionsEye tracking resultsshow: When looking         Task: „What concerts are happen in Auckland t...
When do users look at banners?In this example, participants looked at the banner even though they werelooking for somethin...
Banner Blindness: The trick is…  … don’t make your banners look like banners!                                             ...
Let’s talk about coloursResearch shows that saturatedcolours and strong contrastswork best to capture attention
That must mean that this design is ideal:                                            42
… or maybe this is a better example:The Air New Zealandhomepage uses strongcolours.The buttons arecontrasted to thebackgro...
How do these different designs compare?                                          44
Colours chaos = Attention chaosThis heatmap shows achaotic, non-directedspread of visual attention: Everything seems to d...
In contrast: A structured designThis heatmap shows anoverall more structuredand deliberate design: There are clear centre...
The bottom line:Design + Eye tracking            =     a more completeunderstanding of your user’s        experience
Thank you.Got questions? Get in touch:   anni@optimalusability.com                               04 498 57 42             ...
Upcoming SlideShare
Loading in …5
×

Eye Tracking & Design

9,672 views

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
  • Try GazeRecorder WebCam Eye Tracking for usability testing https://sourceforge.net/projects/gazerecorder/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×