Eye Tracking and F Patterns: Recurring Theme in Web Usability
Again, the F pattern. It’s a frequently recurring topic worth noting, as it really seems to be the strongest and most consistent trend we see coming out of the various web usability studies throughout the industry.
When designing a site, a paper, or a page, it’s important to know how a person reads, where they look, and what they can expect to find. If you want to catch a visitor’s eye, there are certain rules to follow which remain consistent.
Through eye tracking and the resulting heatmaps (which highlight the frequency and location of the user’s gaze), we can see that people typically scan the main sections of a page to determine what it’s about and whether or not they’re interested. Since users tend to make decisions about a webpage in as little as three seconds, it’s crucial to know where to place important or significant information to catch their eye within this short time window.
If a web visitor decides to stay on a page, they tend to pay the most attention to the content at the top part of the screen. In the newspaper and web media industries, this is called “above the fold”, a pretty logical phenomenon which reflects people’s only reading the top half of the front page for the headline. The most topical and immediate information goes there, and if you’re walking past a newsstand, that’s what is going to catch your eye.
When people do decide to check out a webpage, eye tracking has shown that their eyes sweep horizontally from left to right, focusing on what is roughly a triangular area in the upper-left corner of a website or the upper left corner of a block of content. Of course, there is some variance to patterns like these, but it’s for the most part pretty consistent when it comes to text on a page. It’s the classic “F” shape, readers scanning across and down from the top left portion of the page.
On a page housing many individual photos, the pattern tends to vary. A person’s eyes move differently over a photo-heavy slideshow than a blog filled with text. There’s a difference between two- or three- column layouts too. The point is, it’s important to know what kind of information you’re working with and to pay attention to how it’s presented. More often than not, someone just slaps a bunch of information up on a page and leaves the reader to sift through – in most cases, way more trouble than it’s worth.
Related articles:
- Framework for Eye Tracking Patterns and Usability Problems: Pt 3
- Framework for Eye Tracking Patterns and Usability Problems: Pt 4
- Eye Tracking: Evaluating Landing Page Usability With Surveys
- Framework for Eye Tracking Patterns and Usability Problems: Part 1
- Framework for Eye Tracking Patterns and Usability Problems: Pt 2
- Eye Tracking and Style Guides
- Eye Tracking: Readers Run Out of Gas Below the Fold
- The Latest in Eye Tracking Web Usability Research pt2
- Moodle Using Eye Tracking to Study Usability and eLearning
- The Latest in Eye Tracking Web Usability Research pt1