Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Eye tracking at Xero


Published on

Join Trent Mankelow from Optimal Usability for an introduction to eye tracking, including:
* What people really look at on and, 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 home page at

* See the gaze plot of a person viewing the Xero features page at

Published in: Design, Business, Technology
  • Be the first to comment

Eye tracking at Xero

  1. 1. Eye trackingTrent Mankelowand Annika Naschitzki (she did all the real work)
  2. 2. What is eye tracking?
  3. 3. What is eye tracking?
  4. 4. From
  5. 5. From
  6. 6. What we did12 participants (non-accountants) looked at Xero.com2 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”
  7. 7. Xero home page –eye tracking findings
  8. 8. a) Q: Which element on thisb) c) page gets the most attention? a) Top navbar b) Pleasure doing d) business e) c) Hero image d) Find an Accountant e) Faces
  9. 9. Initially, the users’attention is mainlyfocussed on the heroimage and the ‘Try Xerofor free’ button.The tiles underneath –especially ‘Find anAccountant’ also get ahigh amount of attention.The top navigationoptions are skimmedwithin the first 30seconds.Overall, most elementsare perceived by theparticipants.
  10. 10. The participant’s gazepatterns appearconsistent on the Xerohomepage.Generally people startwith the key message andthe green button, skimover the sample pictureand then move on toexplore the top navbarand the elements below.Longer fixations indicatethat one of theparticipants (greenbubbles) was especiallyinterested in the ‘Find anAccountant’ option.
  11. 11. TelstraClear homepage –eye tracking findings
  12. 12. Features page - eyetracking findings
  13. 13. On the ‘Features’ page,participants have differentgaze strategies whenexploring the page. Still,all participants engagewith both halves of thepage.The short fixations in thebottom half indicate thatparticipants werescanning for buzzwordsof personal relevance.Longer fixations (largerbubbles) indicate thatthey found a relevantbuzzword.
  14. 14. Tip 1: Minimise noise
  15. 15. 29 vs. 107
  16. 16. 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 purchasePhoto from
  17. 17. “No matter how cool yourinterface is, less of it would be better.” – Alan CooperFrom
  18. 18. Tip 2: Create a clearvisual hierarchy
  19. 19. Tip 3: Design basedon visual saliency
  20. 20. We are attracted to:1. People and faces2. Movement3. Familiarity4. Brightness5. High contrast6. Vivid colour7. Strong pattern
  21. 21. From
  22. 22. From
  23. 23. From
  24. 24. Tip 4: Design forscanning
  25. 25. 40,000,000
  26. 26. 40,000,000
  27. 27. Tip 4: Use pictures
  28. 28. Hear a piece of information, and threedays later you’ll remember 10% of it
  29. 29. Add a picture andyou’ll remember 65%
  30. 30. An exercise
  31. 31. How might youimprove thedesign of thispage? Minimise noise Create a clear visual hierarchy Design for visual saliency Design for scanning Use pictures
  32. 32. In conclusion
  33. 33. Overall, the Xero website was perceivedvery 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.
  34. 34. Eye tracking advantagesWe can tell exactly wherepeople are lookingGive some insights intobehaviourSexy deliverables!
  35. 35. Questions? 389-494Sign up to our newsletter at!