Trent Mankelowand Annika Naschitzki (she did all the real work)

Eye tracking New Zealand’s banks

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/

6 participants looked at the public websites of ANZ, ASB, BNZ, Kiwibank, National, and Westpac.

Each participant had 2 tasks:

� Participants were taken to the home page and told to “take a moment to look around”

� After 30 seconds, we asked participants to “find out what kind of credit cards this bank offers”

What we did

National

Q: Which element on this page gets the most attention?

a) Top navbar

b) Online services

c) Canterbury earthquake

d) 2.99%

e) Small pictures

� The ‘Canterbury Earthquake Information’ draws a lot of attention within the first 30 seconds. Current buzzwords often have this kind of effect.

� Participants pay a lot of attention to the balance transfer box. Banners placed next to a buzzword are more likely to be perceived by visitors.

� The small central navigation options gets relatively little attention.

� The home page offers a large number of options and boxes, it is possible that the users eye isn’t guided through the page.

� The participant in this example skims over the entire page, with very little structure to their gaze pattern. There are very few long fixations, and the fixations move in different directions.

� The home page offers a large number of options and boxes, it is possible that the users eye isn’t guided through the page.

� The participant in this example skims over the entire page, with very little structure to their gaze pattern. There are very few long fixations, and the fixations move in different directions.

Tip 2: Create a clear visual hierarchyTip 2: Create a clear visual hierarchy

Tip 1: Minimise noiseTip 1: Minimise noise

Tip 3: Design based on visual saliencyTip 3: Design based on visual saliency

Cards Overview

� On the credit card overview, participants behaved in two ways: Some participants started reading through the list of credit cards, skimming over some details. After a few items, they turned to the left-hand navigation and looked for other sections.

� Some participants started looking for sub-sections in the navigation straight away.

� Participants didn’t seem inclined to read through the list of credit cards.

Cards Overview

� On the credit card overview, participants behaved in two ways: Some participants started reading through the list of credit cards, skimming over some details. After a few items, they turned to the left-hand navigation and looked for other sections.

� Some participants started looking for sub-sections in the navigation straight away.

� Participants didn’t seem inclined to read through the list of credit cards.

Tip 4: Design for scanningTip 4: Design for scanning

Tip 5: Use picturesTip 5: Use pictures

Tip 1: Minimise noise

126 42vs.

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/

From http://www.smashingapps.com/wp-content/uploads/2010/08/rescue-princess-usability-engineer.jpg

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 5: Use pictures

Research participants remembered more than 2,500 pictures with 90% accuracy

Hear a piece of information, and three days later you’ll remember 10% of it

Add a picture and you’ll remember 65%

The rest: Home pages

The rest:Credit card landing pages

In conclusion

National Bank - Findings

� The number of boxes and options on the home page, together with the saturated colours, may cause users to miss important navigation options.

� Using buzzwords such as ‘Canterbury Earthquake’ draw a lot of attention, which may potentially pull visitors away from other important elements.

� Users may find the list of credit card too long for an overview. The participants showed a tendency to look for overview options, possibly in a shorter, more table-like format.

Overall

Based on the participant’s rating and the findings from the single pages, a banking website appears to be favoured if:

� The homepage is visually clean, offering only a limited number of options at first glance

� The main navigation is clear and visually prominent at the top

� Second-level landing pages use clear tables or tools instead of lists

Eye tracking advantages

�We can tell exactly where people are looking

� Gives some insights into behaviour

� Sexy deliverables!

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

Next steps:

• Attend How to Design a Seductive Website on 28 June

• Winter expert review special - $4,995 till 15 June• Sign up to our newsletter at

optimalusability.com!