What we learned from eye-tracking research

What we learned from eye-tracking research

Most web designers know that the top left corner of the screen is the place where people look first when they arrive on your site. This piece of knowledge is one of many found by researchers who study the user behavior on the web via eye tracking technologies. If you’re interested you can read more about the study in their full 169 page report.

In this post, I want to highlight several takeaways from this research that you can use to improve navigation, get your message across and provide a great user experience on your site.

Attention grabbing headlines
Contrary to common belief, it’s actually the big headline that catches the attention on the page and not a picture. This is most effective with homepages, when a person first arrives on the site. Capture the moment and communicate key message of your product in a headline. A good example of this is news sites that bring the top message up front.

USA TODAY  Latest World and US News   USATODAY.com

Breaking News and Opinion on The Huffington Post

F-shaped reading pattern
A startling discovery made by Nielsen Norman Group in 2006 revealed that eyes scan the webpage with a two horizontal strokes followed by a vertical swipe along the left edge of the screen. 

f_reading_pattern_eyetracking

What this means is:

  • Users almost never read text carefully.
    Instead, most common behavior is to scan the page quickly by running across the lines of text. This is especially true if visitors to your page are doing initial research on your product.
  • The first two paragraphs must state the most important information.
    There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They’ll read the third word on a line much less often than the first two words.

Use this to your advantage by placing key messages about your product in the areas that are likely to receive the most attention.

Here’s a good example of this done right by an EA studio Ghost

Ghost Games is a new EA Games studio

Simple language and clear formatting win
We already touched on this briefly in our post Communicating Value in 9 seconds. To provide a good example we looked at another study by Nielsen Norman conducted on the site of U.S. Census Bureau’s homepage.

census-homepage-small

The study asked users to identify then current population size, which was clearly marked in red in the top right corner of the screen under Data Finders. An abysmal 14% of those surveyed were able to complete the task, even though it was right on the surface. The reason for this behavior was that  most users saw the big red numbers and immediately thought that it was a promotion, which caused them to ignore it alltogether.