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 & UX
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 & User Research

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

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

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

19. The Check-up
How is my design, website
or product performing?

20. Set-up of an eye tracking test
User tests are often run in 45 to 60
minute sessions with 6 to 15
participants:
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

21. 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 website, design or
product.
The next slides are a couple of examples.
21

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

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

24. What drew most attention on this design?
24

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

26. Inform your design
Use eye tracking data to support
your design process

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

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

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

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

31. Design principles – revealed
by eye tracking

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

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

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

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

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

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

38. Banner Blindness
Did we learn to ignore them?

39. 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?
39

40. 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!
40

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

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

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

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

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

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