Trent Mankelow and Annika Naschitzki (she did all the real work) Eye tracking
Jan 27, 2015
Trent Mankelowand Annika Naschitzki (she did all the real work)
Eye tracking
What is eye tracking?
What is eye tracking?
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
From http://www.ojr.org/ojr/stories/070312ruel/
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”
What we did
Xero home page –eye tracking findings
Q: Which element on this page gets the most attention?
a) Top navbar
b) Pleasure doing business
c) Hero image
d) Find an Accountant
e) Faces
b)
d)
a)
c)
e)
� 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.
� 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 navbarand the elements below.
� Longer fixations indicate that one of the participants (green bubbles) was especially interested in the ‘Find an Accountant’ option.
TelstraClear home page –eye tracking findings
Features page - eye tracking findings
� 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.
Tip 1: Minimise noise
29 107vs.
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/
“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/
Tip 2: Create a clear visual hierarchy
Tip 3: Design based on visual saliency
We are attracted to:
1. People and faces
2. Movement
3. Familiarity
4. Brightness
5. High contrast
6. Vivid colour
7. Strong pattern
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
From http://www.valentinemoore.co.uk/trv/Attractive.pdf
Tip 4: Design for scanning
40,000,000
40,000,000
Tip 4: Use pictures
Hear a piece of information, and three days later you’ll remember 10% of it
Add a picture and you’ll remember 65%
An exercise
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
In conclusion
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.
Eye tracking advantages
�We can tell exactly where people are looking
� Give some insights into behaviour
� Sexy deliverables!