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

1. Eye tracking & Design
All 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 - 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

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 lot
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.
in here, somewhere…
8

9. How we ‘look’
Fixation
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
Saccade
fixation is happening!
9

10. 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

11. How can a monitor tell what I look at?
tobii
11

12. 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

13. What the eye tracker sees
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.
tobii
13

14. Monitors - No strings attached
It 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. Eye Tracking & Design

16. Develop and design
There‟s lots of decisions to make in all stages of the design process:
16

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

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

19. … and these:
Does
Design A
work
better?
… or
Design
B?
19

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. Using eye tracking –
an example

22. 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

23. 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

24. 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

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 the
sparks her interest, she listed offers, but shows
looks at the offer no reading behaviour
details, e.g. the price. there.
25

26. What drew most attention on this design?
26

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 options
got 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. Design principles – revealed
by eye tracking

29. Face Effect
Humans are programmed to recognise
faces. Everywhere.
This effect can be seen in eye tracking.
Faces always draw attention!

30. The Face effect – an example
Yep, there’s
attention on
certain… … the face,
areas, however, is
the strongest
point of focus!
bunnyfoot
30

31. Using the Face effect
The ‘Face effect’ Version A Version B
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.
humanfactors.com
31

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. 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. 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. Banner Blindness
Did we learn to ignore them?

36. 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

37. 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

38. Main focus: Navigation options
Eye tracking results
show: When looking Task: „What concerts are happen in Auckland this month?‟ Task: „You want to send an email to customer service‟
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.
38

39. 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?
Task: „You want to get in touch with customer service‟ Participant was asked just to look at the homepage
39

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

41. Let’s talk about colours
Research shows that saturated
colours and strong contrasts
work best to capture attention

42. That must mean that this design is ideal:
42

43. … 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

44. How do these different designs compare?
44

45. 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

46. 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

47. The bottom line:
Design + Eye tracking
=
a more complete
understanding of your user’s
experience

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