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”
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.
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/
19.
20.
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/
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!