What we did6 participants looked at the publicwebsites 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”
Q: Whichelement on thispage gets themost attention?a) Top navbarb) Online servicesc) Canterbury earthquaked) 2.99%e) Small pictures
The ‘CanterburyEarthquake Information’draws a lot of attentionwithin the first 30seconds. Currentbuzzwords often have thiskind of effect.Participants pay a lot ofattention to the balancetransfer box. Bannersplaced next to a buzzwordare more likely to beperceived by visitors.The small centralnavigation options getsrelatively little attention.
The home page offers alarge number of optionsand boxes, it is possiblethat the users eye isn’tguided through the page.The participant in thisexample skims over theentire page, with verylittle structure to theirgaze pattern. There arevery few long fixations,and the fixations move indifferent directions.
The home page offers a large number of optionsTip 1: Minimise noise and boxes, it is possible that the users eye isn’t guided through the page.Tip 2: Create a clear visualhierarchy The participant in this example skims over the entire page, with very little structure to theirTip 3: Design based on gaze pattern. There arevisual saliency very few long fixations, and the fixations move in different directions.
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 aTip 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.
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 purchasePhoto from http://caterwauls.ca/new_page_15_files/berry%20jams.JPG/
“No matter how cool yourinterface is, less of it would be better.” – Alan CooperFrom http://usableworld.com.au/2009/03/16/you-look-where-they-look/
National Bank - FindingsThe number of boxes and options on thehome page, together with the saturatedcolours, may cause users to miss importantnavigation options.Using buzzwords such as ‘CanterburyEarthquake’ draw a lot of attention, whichmay potentially pull visitors away fromother important elements.Users may find the list of credit card toolong for an overview. The participantsshowed a tendency to look for overviewoptions, possibly in a shorter, more table-like format.
OverallBased 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 advantagesWe can tell exactly wherepeople are lookingGives some insights intobehaviourSexy deliverables!
Questions?@firstname.lastname@example.org(021) 389-494Next 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!