Eye Tracking Heatmaps

Etra, the usability and accessibility experts, are currently publishing their eye tracking heat maps for some very well known UK sites. Eye tracking is a system involving cameras following eye movement of users browsing websites. These sorts of tests are useful for indicating user trends on your websites literally recording what users look at and crucially what they miss. Eye tracking results are displayed as a heat map indicating the areas covered on a scale from light green to bright red being the strongest focus.

So far they have used Curry’s and Dixon’s websites as a comparison of sites with similar purposes. Interestingly the retailers are both part of the same group, aiming at the same market yet they have achieved quite different results. It would appear while both are offering competitive deals the structure of the Curry’s website with the ‘Top 10′ column along the left hand side would appear to draw the most focus. While advertising the best sellers and drawing viewers attention to them, it appears to be at the detriment to the rest of the site. Meanwhile Dixon’s heatmap displays a less concentrated viewing, while still attracting viewers more evenly across the rest of the page.

This technique can be invaluable to e-commerce sites in particular in gauging how successful a sites design is, but extensive testing has drawn results that can be applied to all websites. Jacob Nielsen‘s, the highly regarded usability expert, has drawn conclusions from extensive testing using eye tracking, that users habits when browsing bear a resemblance to the letter F.

“Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Users appear to read first across the header part of a site, traditionally the logo and navigational areas of sites. Next the move down and horizontally again followed by vertically down the left hand side of the page.

This implementation of these trends should really be considered when developing websites. Maximising the design of your next site considering these critical areas could be the difference between making a success of your web presence and losing your reader to another site that’s only a click away.

Share and Enjoy:
  • Yahoo! Buzz
  • Digg
  • StumbleUpon
  • Fark
  • Reddit
  • Slashdot
  • del.icio.us
  • Propeller
  • NewsVine
  • Facebook
  • Technorati

Leave a Reply