The results of eye tracking New Zealand's major banks

1. Eye tracking New
Zealand’s banks
Trent Mankelow
and Annika Naschitzki (she did all the real work)

3. What is eye tracking?

4. What is eye tracking?

5. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

6. From http://www.ojr.org/ojr/stories/070312ruel/

7. What we did
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”

8. National

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

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

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

12. The home page offers a
large number of options
Tip 1: Minimise noise and boxes, it is possible
that the users eye isn’t
guided through the page.
Tip 2: Create a clear visual
hierarchy The participant in this
example skims over the
entire page, with very
little structure to their
Tip 3: Design based on
gaze pattern. There are
visual saliency very few long fixations,
and the fixations move in
different directions.

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

14. 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
Tip 4: Design for scanning few items, they turned to
the left-hand navigation
and looked for other
sections.
Tip 5: Use pictures
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.

15. Tip 1: Minimise noise

16. 126 vs. 42

18. 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/

21. “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/

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

23. Tip 2: Create a clear
visual hierarchy

26. Tip 3: Design based
on visual saliency

28. We are attracted to:
1. People and faces
2. Movement
3. Familiarity
4. Brightness
5. High contrast
6. Vivid colour
7. Strong pattern

29. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

30. From http://usableworld.com.au/2009/03/16/you-look-where-they-look/

32. From http://www.valentinemoore.co.uk/trv/Attractive.pdf

33. Tip 4: Design for
scanning

34. 40,000,000

35. 40,000,000

37. Tip 5: Use pictures

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

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

40. Add a picture and
you’ll remember 65%

41. The rest:
Home pages

48. The rest:
Credit card landing
pages

54. In conclusion

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

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

57. Eye tracking advantages
We can tell exactly where
people are looking
Gives some insights into
behaviour
Sexy deliverables!

58. Questions?
@trentmankelow
trent@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!