Date post: | 27-Jan-2015 |
Category: |
Economy & Finance |
Upload: | optimal-experience |
View: | 177 times |
Download: | 0 times |
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?@[email protected](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!