eye tracking at xero
DESCRIPTION
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 CooperTRANSCRIPT
![Page 1: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/1.jpg)
Trent Mankelowand Annika Naschitzki (she did all the real work)
Eye tracking
![Page 2: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/2.jpg)
![Page 3: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/3.jpg)
What is eye tracking?
![Page 4: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/4.jpg)
What is eye tracking?
![Page 5: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/5.jpg)
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
![Page 6: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/6.jpg)
From http://www.ojr.org/ojr/stories/070312ruel/
![Page 7: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/7.jpg)
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
![Page 8: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/8.jpg)
Xero home page –eye tracking findings
![Page 9: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/9.jpg)
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)
![Page 10: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/10.jpg)
![Page 11: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/11.jpg)
� 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.
![Page 12: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/12.jpg)
� 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.
![Page 13: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/13.jpg)
TelstraClear home page –eye tracking findings
![Page 14: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/14.jpg)
![Page 15: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/15.jpg)
![Page 16: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/16.jpg)
![Page 17: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/17.jpg)
Features page - eye tracking findings
![Page 18: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/18.jpg)
![Page 19: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/19.jpg)
![Page 20: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/20.jpg)
� 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.
![Page 21: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/21.jpg)
Tip 1: Minimise noise
![Page 22: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/22.jpg)
29 107vs.
![Page 23: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/23.jpg)
![Page 24: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/24.jpg)
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/
![Page 25: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/25.jpg)
![Page 26: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/26.jpg)
![Page 27: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/27.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/
![Page 28: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/28.jpg)
![Page 29: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/29.jpg)
Tip 2: Create a clear visual hierarchy
![Page 30: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/30.jpg)
![Page 31: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/31.jpg)
![Page 32: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/32.jpg)
![Page 33: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/33.jpg)
Tip 3: Design based on visual saliency
![Page 34: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/34.jpg)
![Page 35: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/35.jpg)
We are attracted to:
1. People and faces
2. Movement
3. Familiarity
4. Brightness
5. High contrast
6. Vivid colour
7. Strong pattern
![Page 36: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/36.jpg)
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
![Page 37: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/37.jpg)
From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
![Page 38: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/38.jpg)
![Page 39: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/39.jpg)
From http://www.valentinemoore.co.uk/trv/Attractive.pdf
![Page 40: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/40.jpg)
Tip 4: Design for scanning
![Page 41: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/41.jpg)
40,000,000
![Page 42: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/42.jpg)
40,000,000
![Page 43: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/43.jpg)
![Page 44: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/44.jpg)
Tip 4: Use pictures
![Page 45: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/45.jpg)
![Page 46: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/46.jpg)
Hear a piece of information, and three days later you’ll remember 10% of it
![Page 47: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/47.jpg)
Add a picture and you’ll remember 65%
![Page 48: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/48.jpg)
![Page 49: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/49.jpg)
An exercise
![Page 50: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/50.jpg)
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
![Page 51: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/51.jpg)
In conclusion
![Page 52: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/52.jpg)
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.
![Page 53: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/53.jpg)
Eye tracking advantages
�We can tell exactly where people are looking
� Give some insights into behaviour
� Sexy deliverables!
![Page 55: Eye tracking at Xero](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c78e3d4a7959af108b45f0/html5/thumbnails/55.jpg)