Join Trent Mankelow from Optimal Usability for an introduction to eye tracking, including: * What people really look at on xero.com and xero.com/features, and in what order (the results may surprise you!) * 2 videos, 6 heatmaps and 3 gaze plots – sexy visualisations galore * A half-dozen simple tips for attracting user attention * 3 photos of babies, and some funny differences between what men and women look at * 1 average usability joke, 2 psychology studies and a quote from Alan Cooper * See the heat map animation of 12 people viewing the Xero.com home page at http://slidesha.re/knVihl * See the gaze plot of a person viewing the Xero features page at http://slidesha.re/jU9oKz

1. Eye tracking
Trent Mankelow
and Annika Naschitzki (she did all the real work)

3. What is eye tracking?

4. What is eye tracking?

5. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

6. From http://www.ojr.org/ojr/stories/070312ruel/

7. What we did
12 participants (non-accountants) looked at Xero.com
2 tasks, focussing on 2 pages:
Participants were taken to the home page and told to “take a moment
to look around”
After 30 seconds, we asked participants to imagine that they wanted to
“find out more about the features of Xero”

8. Xero home page –
eye tracking findings

9. a) Q: Which
element on this
b) c)
page gets the
most attention?
a) Top navbar
b) Pleasure doing
d) business
e)
c) Hero image
d) Find an
Accountant
e) Faces

11. Initially, the users’
attention is mainly
focussed on the hero
image and the ‘Try Xero
for free’ button.
The tiles underneath –
especially ‘Find an
Accountant’ also get a
high amount of attention.
The top navigation
options are skimmed
within the first 30
seconds.
Overall, most elements
are perceived by the
participants.

12. The participant’s gaze
patterns appear
consistent on the Xero
homepage.
Generally people start
with the key message and
the green button, skim
over the sample picture
and then move on to
explore the top navbar
and the elements below.
Longer fixations indicate
that one of the
participants (green
bubbles) was especially
interested in the ‘Find an
Accountant’ option.

13. TelstraClear home
page –
eye tracking findings

17. Features page - eye
tracking findings

20. On the ‘Features’ page,
participants have different
gaze strategies when
exploring the page. Still,
all participants engage
with both halves of the
page.
The short fixations in the
bottom half indicate that
participants were
scanning for buzzwords
of personal relevance.
Longer fixations (larger
bubbles) indicate that
they found a relevant
buzzword.

21. Tip 1: Minimise noise

22. 29 vs. 107

24. 24 jams versus 6 jams
24 jams
• 60% of customers stopped for a
taste
• 3% made a purchase
6 jams
• 40% of customers stopped for a
taste
• 30% made a purchase
Photo from http://caterwauls.ca/new_page_15_files/berry%20jams.JPG/

27. “No matter how cool your
interface is, less of it would be
better.” – Alan Cooper
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

29. Tip 2: Create a clear
visual hierarchy

33. Tip 3: Design based
on visual saliency

35. We are attracted to:
1. People and faces
2. Movement
3. Familiarity
4. Brightness
5. High contrast
6. Vivid colour
7. Strong pattern

36. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

37. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

39. From http://www.valentinemoore.co.uk/trv/Attractive.pdf

40. Tip 4: Design for
scanning

41. 40,000,000

42. 40,000,000

44. Tip 4: Use pictures

46. Hear a piece of information, and three
days later you’ll remember 10% of it

47. Add a picture and
you’ll remember 65%

49. An exercise

50. How might you
improve the
design of this
page?
Minimise noise
Create a clear
visual hierarchy
Design for visual
saliency
Design for
scanning
Use pictures

51. In conclusion

52. Overall, the Xero website was perceived
very positively by the participants.
The homepage appears to provide a
good overview of the system,
participants explore and possibly
perceive most navigation options within
a short time span.
When asked to find out about the
features, all participants instantly find
the correct navigation option – they will
likely have perceived it before.
The gaze behaviour indicates that the
participants can easily engage with the
options offered in ‘Features’ –
depending on their personal interest.
No hurdles were detected.

53. Eye tracking advantages
We can tell exactly where
people are looking
Give some insights into
behaviour
Sexy deliverables!

54. Questions?
@trentmankelow
trent@optimalusability.com
(021) 389-494
Sign up to our newsletter at optimalusability.com!