Eye Tracking and Style Guides
We’re well aware by now that eye tracking studies have given us a good idea of where readers look on a page. It seems like most eye tracking studies – usability wise, anyway – are based around exactly this: where do readers look first. We’ve been following eye tracking news in depth for about a year now, and time after time we see the same results.
Gaze maps repeatedly show us that a visitor’s eyes hover in the same areas on a page, and a recent eye tracking study for Yahoo! is consistent with the standard findings.
- People scan the main sections of a page to determine what it’s about and whether they want to stay longer.
- They make decisions about the page in as little as three seconds. That means designers and web engineers have a three second window to impress the reader and get them to stay for a spell.
- If the reader then decides to stay, they tend to pay most attention to the content in the top part of the screen.
When a visitor to a website does decide that they’re interested in the page, they typically start to explore from left to right, with their eyes sweeping across the page from left to right. Gaze patterns tend to stick to a roughly triangular area in the upper left corner of a page. We’ve seen this referred to as an “F” pattern as well. There’s normally a lot of content in the upper left (which begs the question: chicken or egg?) and so people tend to fixate in that area.
Of course, the pattern varies depending on the layout and purpose of the web page. A visitor’s eyes will travel differently over, say, a page of text versus a photo blog, slideshow, or a page with a two- or three- column layout. Next time you take a look around the web, try to be conscious of your eye movements and see if you can create a virtual heatmap based on where you look. But don’t think about it too hard – it might alter your natural patterns!
Related articles:
- Eye Tracking and F Patterns: Recurring Theme in Web Usability
- Eye Tracking Shows We Start At The Top
- Moodle Using Eye Tracking to Study Usability and eLearning
- Eye Tracking: Evaluating Landing Page Usability With Surveys
- Framework for Eye Tracking Patterns and Usability Problems: Pt 3
- Shocking Revelation: Eye Tracking Has Problems
- Eye Tracking: Readers Run Out of Gas Below the Fold
- Eye Tracking: Helpful Tips For Your Site Design
- Eye Tracking Studies Suggest Google is Making Us Stupid
- Framework for Eye Tracking Patterns and Usability Problems: Pt 2