Quality Web Content

One stop shop for free articles & web content

88 articles on writing web content and intranet content

Web Page Content Home

Eyes top left: lessons from Eyetrack III

Two welcome kitties

Where do your eyes go when you read articles on the Web? What do you notice, and what do you miss?

The upper left quarter of the screen gets the most attention, according to the Eyetrack III research of The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools.

Eyetrack III report online

Eyetrack III found some very common behaviour patterns.

Reconnaissance comes first. Eyes flick over the entire screen at whatever attracts their attention. The first hot spots include headlines, captions of images, subheadings, links, menu items and the page's logo.

The upper left corner of the screen gets special attention: I suppose that's where people expect to find the good stuff. According to Eyetrack III, the right-hand and lower part of the page consistently gets less attention.

For web authors, it is well worth knowing about this pattern. When significant content is outside that key upper left corner, it may be virtually invisible when people are making the big decision: whether to read more or quit the page.

That skim-reading reconnaissance has a purpose: it quickly identifies what people really want to read. When they start actually reading a news story on the Web, they read a larger proportion than if they were reading on paper.

Frontload everything especially at the top

Frontloading means starting headlines, paragraphs and links with significant words. The first words then communicate the subject of the headline, paragraph or link.

When you frontload your writing, especially at the top of the page, key information is easily caught by the wandering eye.

These good examples are frontloaded:

  • "Chicken recipes loved by all"
  • "The deadline for applications is 1 July 2006."

These bad examples are not frontloaded:

  • "Loved by all - Grandma's chicken recipes"
  • "Note: it is now agreed that the deadline for applications is 1 July 2006."

Avoid nested dot-points and numbers

1.0 Here's the start of a list.
     1.1 Here's a nested number.
        1.1.1 Here's a third-level nested number.

The last two items could be out of sight for many people when they skim-read.

A straight margin is much easier to skim-read on the Web.

Nested dot-points and numbers are often used in policy documents and management plans. Do you really need them? Find another way to show the hierarchy of ideas. Web users just don't like all those indentations, and you could lose some people before they even start reading.

Left-align links

People notice links in web content. Links are often bright blue and underlined, so they stand out during the preliminary skim-read. Many people even read link-text before headlines.

So make it easy for skim-readers by consistently presenting text links as a list, or at least aligning them to the left-hand margin.

Don't put your links in a sentence, or they could be in the invisible right-hand area of the content. That rule means saying goodbye to the dreaded "click here" convention.

Don't hide headlines in the centre

Do you centre your headlines and subheadings? That is common in paper publications and other documents, but on a web site or intranet, I believe it is downright foolish. Here's a tip: stop doing it.

Approximately 10-20 per cent of people in my workshops literally do not see centred headlines. They look in the top left hand corner of the content. They see empty space, because the centred headline starts some way off to the right. And instead of scanning right, they move their eyes down.

Centred headlines are wasted headlines. If you centre them, you hide them.

Obviously, it's even more foolish to align headlines on the right.

Tables are tricky too

The ideal table online is short, narrow, and used purely for data.

When a table is too wide or too long, part of it is out of the skim-reader's natural field of vision.


WebPageContent.com home