Eye Tracking & User Research

Eye tracking & UXAll 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 reddots and red lines.A camera displays theparticipant, so you cansee their facialexpressions andbody language. 4

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

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

How does it work?

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

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

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

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 from as photo flashesuse infrared light.The eye tracking monitor makesuse of this effect! 12

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

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

Eye Tracking & User Research

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

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

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

The Check-upHow is my design, websiteor product performing?

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

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

Examples: Testing website designsWhat do you thinkdraws the user‟sattention on this site?The listed offers inthe centre or thespecial offerbanners on theright? 22

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

What drew most attention on this design? 24

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

Inform your designUse eye tracking data to support your design process

Design processThere‟s lots of decisions to make in all stages of the development process: 27

Decision like these… Where should the ‘Pay now’ button be? Will users notice this if I put it here? 28

… or these: How does my Does my design design perform draw enough compared to attention? others? visuality-group.co.uk 29

… and these: DoesDesign A work better? … or Design B? 30

Design principles – revealed by eye tracking

Face EffectHumans are programmed to recognisefaces. Everywhere.This effect can be seen in eye tracking.Faces always draw attention!

The Face effect – an exampleYep, there’sattention oncertain… … the face,areas, however, is the strongest point of focus! bunnyfoot 33

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 34

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 35

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 36

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 37

Banner BlindnessDid we learn to ignore them?

Central bannersCentral banners areused on a lot ofhomepages.They use prime realestate on thehomepage.That means they mustbe in the centre ofattention, right? 39

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

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

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

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

Banner Blindness: The trick is… … don’t make your banners look like banners! 44

The bottom line:User research + Eye tracking =a more complete understanding of your user’s experience

Thank you.Got questions? Get in touch: anni@optimalusability.com 04 498 57 42 optimalusability.com

http://stephenslighthouse.com	618
http://www.conseilsmarketing.com	195
http://lonewolflibrarian.wordpress.com	128
http://blue-rorqual.tistory.com	7
http://newsnjoyus.tistory.com	7
http://www.library.ceu.hu	6
http://accept-infrabel	4
http://translate.googleusercontent.com	2
http://us-w1.rockmelt.com	1
http://www.onlydoo.com	1
https://si0.twimg.com	1
http://news.google.com	1

Eye Tracking & User Research

by Optimal Usability

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 971

Statistics