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

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  5. 5. From http://www.ojr.org/ojr/stories/070312ruel/
  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 http://caterwauls.ca/new_page_15_files/berry%20jams.JPG/
  17. 17. “No matter how cool yourinterface is, less of it would be better.” – Alan CooperFrom http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  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 http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  22. 22. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  23. 23. From http://www.valentinemoore.co.uk/trv/Attractive.pdf
  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?@trentmankelowtrent@optimalusability.com(021) 389-494Sign up to our newsletter at optimalusability.com!