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!

Questions?

@trentmankelowtrent@optimalusability.com(021) 389-494

Sign up to our newsletter at optimalusability.com!