Eye tracking online shows where people look

Change how your reader sees your page with 6 eye gaze patterns

Here’s a paradox: 1) Reading is the No. 1 thing people do on websites. 2) People try to read as little as possible on most of the sites they visit.

Instead of reading, they skim the surface of your page, trying to find what they’re looking for. Or so say eye trackers Kara Pernice, Kathryn Whitenton and Jakob Nielsen, the authors of How People Read on the Web.

They should know. The authors conducted online eye-tracking research on more than 300 people using hundreds of different websites to view 1.5 million eye movements. These webcam-based eye-tracking studies show how users experience screen-based information in real time.

This data collection showed that web visitors skim in one of five key gaze patterns. On mobile devices, another set of researchers found, they skim in a sixth pattern.

So how do these eye-tracking tests show that your readers are looking at your webpage? In one or more of these ways:

1. F-shaped eye-gazing pattern

What happens? Visitors rely on visual signposts, like subheads, to guide their skimming. No signposts? No guidance.

Why? Without signposts, visitors skim in a path that forms the letter F. That is, they read most of the way across the first few lines, then read less and less of each subsequent line.

How to help? Add magnetic elements to help guide visitors’ eyes. Those include headlines, decks, subheads, links bold-faced lead-ins, bulleted lists and highlighted key words.

2. Spotted eye-gazing pattern

What happens? Visitors rely on visual signposts, like subheads, to guide their skimming. No signposts? No guidance.

Why? If you haven’t provided elements that help web visitors find their way, those visitors try to spot keywords that might answer the question they’ve brought to your webpage. They look, specifically, at all caps, numerals, long words, colored text, links, and quotation marks and parentheses.

How to help? Add magnetic elements — headlines, decks, subheads, links, bulleted lists, bold-faced lead-ins or highlighted key words — to help guide visitors’ eyes. Those elements will help visitors find what they’re looking for — and avoid letting their spotted-gazing defense mechanism set in.

3. Layer cake eye-gazing pattern

What happens? It’s a piece of cake to skim a webpage that layers on white space, subheads and blocks of text.

Why? Readers go for the frosting, making their way down the page by skimming subheads. If the section is relevant, they’ll read; if not, they skip.

How to help? To encourage this efficient skimming pattern, organize pages into sections, then label those sections with clear subheads. And use formatting to make subheads stand out.

4. Bypassing eye-gazing pattern

What happens? Sometimes — not typically — visitors skip the first part of the text on the left of the webpage.

Why? Visitors skip repetitive information (like repeated words in a list), sections that might be blah-blah text (like welcome text on websites) or words that look less important than the other words on your page (sections that are formatted differently, for instance).

How to help? Don’t repeat words in a list. Write an intro that says something. And use consistent formatting to avoid signaling that some sections are less important.

5. Mobile eye-gazing pattern

What happens? Mobile visitors look at search engine results pages the same way they look at a TV: They focus on the center screen.

Why? They spend 86% of their time on the center, top two-thirds of the screen.

How to help? Meet them in the middle: Design mobile webpages to put the most important material front and center.

6. Commitment eye-gazing pattern

What happens? Sometimes — “in far less-common cases” — visitors read some or all of your webpage.

Why? Visitors commit to pages that are:

• Interesting to them, provide a benefit or make them feel good about reading
• Skimmable and that make it easy for them to find what they’re looking for
• Credible and thorough

How to help? Write about a topic readers are interested in; focus on reader benefits and entertainment; design the page to be easy to skim.

Mix and match.

Visitors might use several — even all — of these patterns on a single page. They might, for instance, start by skimming the subheads in a layer-cake pattern, get interested in one section and read that in a commitment pattern.

Understanding these patterns can help you create webpages that help people find what they’re looking for. But some of these ways are better than others. (You don’t want to get an F on your webpage, after all.)

The good news is, you can change visitors’ eyetracking patterns by improving the writing and layout of your webpage.

3 ways to change readers’ paths through your page

To help visitors get more from your webpage, Pernice et al. suggest that you tweak:

1. Page layout. A simple, consistent, chunked-up layout makes your webpage easier to scan, which increases scanning. Make sure your webpage is:

• Easy to scan. Use headings and spacing to break up the text. List lists. Divide the content into obvious chunks, then label the chunks with subheads and sub-subheads.
• Predictably designed. Use page templates and cascading style sheets to ensure consistent subhead, link and table treatments and other design elements throughout the site.

2. Writing. Make sure your message is:

• Relevant, compelling and thorough
• Enticing, with fascinating facts and stories
• Readable, with short paragraphs, sentences and words
• Accessible — not too technical
• Conversational — sounds the way you speak
• Authoritative and trustworthy

3. User motivation. User motivators include interest, desire, need — even a threat. Ask:

• Do readers want or need to read your page?
• Will there be a quiz? Or is there some other reason they must read now?
• Does your page offer a reader benefit?
• Is your page simply so enjoyable that readers can’t stop scanning?

And, how credible is your site? If your site is highly credible — if a friend strongly recommended it, if it showed up at the top of a search engine results page or if the visitor has had a great experience on other pages on your site — that can motivate stronger scanning, as well.

___

Sources: Kara Pernice, Kathryn Whitenton, and Jakob Nielsen; How People Read on the Web: The Eyetracking Evidence; Nielsen Norman Group; Sept. 10, 2013