eye tracking & design
DESCRIPTION
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 touchTRANSCRIPT
Annika Naschitzki
Eye tracking & DesignAll will be revealed.
What is eye tracking?
Eye tracking records what people look at
3
See the user’s gaze - Live
You can follow what the user pays attention to in real-time.
The participant’s gaze is marked by red dots and red lines.
A camera displays the participant, so you can see their facial expressions and body 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 lot
in here, somewhere…
Our pupils are constantly in motion.
When the pupil is moving, it’s called a ‘saccade’.
During a saccade, visual perception is unlikely or even impossible.
8
How we ‘look’
Fixation
Saccade
The pupil must focus on a point in order to perceive colour, faces, writing, etc.
That is called a ‘fixation’.
Eye Tracking measures the speed of the pupil and can thus detect when a fixation is happening!
9
What do these fixations tell us?
Fixations are linked to attention. Moving your eyes means moving attention.
A fixation does not mean that the participant definitely perceived an element.
But it is fair to say that elements that draw visual attention have a higher chance of being perceived (consciously or subconsciously).
10
How can a monitor tell what I look at?
tobii11
The red-eye effect
There’s a layer in our eyes that reflects infrared light.
This is where the red-eye effect in photos comes from as photo flashes use infrared light.
The eye tracking monitor makes use of this effect!
12
What the eye tracker sees
tobii
The eye tracking monitor uses infrared light to make the pupils of the person sitting in front of it light up and so become detectable.
This is what it looks like for the monitor.
13
Monitors - No strings attached
It used to be like this:
tobii
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
14
Eye Tracking & Design
Develop and design
There’s lots of decisions to make in all stages of the design process:
16
Decision like these…
Where should the ‘Pay now’
button be?
Will users notice this if I put it here?
17
visuality-group.co.uk
… or these:
How does my design perform
compared to others?
Does my design draw enough
attention?
18
… and these:
Does Design A
work better?
… or Design
B?
19
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
Using eye tracking – an example
Set-up of an eye tracking test
Design tests can be run in fairly quick sessions (10 to 15 min) with 10 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
What happens then?
The next step is to analyse the eye tracking data and the user’s feedback. We focus on:
what users saw,
what users overlooked
and
what they thought and
felt about the designs.
23
Examples: Testing website designs
What do you think draws the user’s attention on this site?
The listed offers in the centre or the special offer banners on the right?
24
The design suits browsers and focussed users
This participant thoroughly reads the
listed offers.
Whenever a destination sparks
her interest, she looks at the offer
details, e.g. the price.
This participant focusses on the right-hand banners.
He briefly gazes at the listed offers, but shows no reading behaviour there.
25
What drew most attention on this design?
26
The key visual and a box at the bottom
Note: Telstra Clear have since re-designed their homepage.
The key visual got
lots of attention.
Surprising: This box got heaps of 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 to you within 2 business days”.
Participants got the impression that Telstra Clear has trouble with their customer service.
The main navigation
and its options got almost no attention.
27
Design principles – revealed by eye tracking
Humans are programmed to recognise faces. Everywhere.This effect can be seen in eye tracking. Faces always draw attention!
Face Effect
The Face effect – an example
bunnyfoot
Yep, there’s attention on certain… areas,
… the face, however, is the strongest point of focus!
30
Using the Face effect
humanfactors.com
The ‘Face effect’ can be used to drive perception.
Here’s a great example from humanfactors.com
2 versions of an ad design were tested using eye tracking.
The goal of the ad is of course to draw attention to the product name.
Version A Version B
31
Using the Face effect
humanfactors.com
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.
32
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
Ways to focus attention
usableworld.com.au
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.
34
Did we learn to ignore them?
Banner Blindness
Central banners
Central banners are used on a lot of homepages.
They use prime real estate on the homepage.
That means they must be in the centre of attention, right?
36
Banner blindness
… or are they?
In this test, participants were given a task: Find the nearest ATM.
Participants focused on the main navigation and the footer navigation– this is where they found the ‘ATM locator’.
So, when visiting a site with a task in mind – as you normally do – the central banner can be ignored!
37
Main focus: Navigation options
Eye tracking results show: When looking for something on a website, the main focus of attention are the navigation options.
Maybe users have learned that they’re unlikely to find what they’re looking for in a central banner image.
Task: ‘What concerts are happen in Auckland this month?’
Task: ‘You want to send an email to customer service’
38
Task: ‘You want to get in touch with customer service’
When do users look at banners?
In this example, participants looked at the banner even though they were looking for something specific. What’s different?
Participant was asked just to look at the homepage
39
Banner Blindness: The trick is…
… don’t make your banners look like banners!
40
Let’s talk about colours
Research shows that saturated colours and strong contrasts work best to capture attention
That must mean that this design is ideal:
42
… or maybe this is a better example:
The Air New Zealand homepage uses strong colours.
The buttons are contrasted to the background.
The special offer uses both a high-resolution image and a prominent price.
43
How do these different designs compare?
44
Colours chaos = Attention chaos
This heatmap shows a chaotic, non-directed spread 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
In contrast: A structured design
This heatmap shows an overall more structured and 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
Design + Eye tracking
a more complete understanding of your
user’s experience
=
The bottom line: