10 tips for scannable webpages

Easily scanned web pages mean your content gets read, and your visitors return.

Few of your website’s visitors will read every word on a page, and most will decide in just a few seconds whether to read on or click away. So however great your content, if it isn’t arranged it in a way that can be quickly scanned, it won’t even be seen.

1. The F-shape

Web pages are typically scanned from the top left corner, across to the right, and then top to bottom along the left side of the page, in an f-shape. So get the important words into the headline and first sentence, and at the beginning of paragraphs where they’ll be seen.

2. Headline

Always have a headline, and keep it meaningful and direct. Remember the f-shape – use the important words towards the beginning. Your headlines might appear in many other places as a link to the page, so make sure they describe it well.

3. Standfirst

The first 1 or 2 sentences that many pages have below the headline, emphasised in bold or a larger font size, is known as a standfirst. But don’t just bold the first sentence – a well written standfirst will succinctly describe the whole story, and act as a teaser to tempt the reader on.

4. Short paragraphs

Short paragraphs are easier to scan, and a lot less off putting than a page of dense text. Paragraphs should have just one idea, and be a maximum of 3 – 4 sentences, though will often have just 1 or 2.

5. Subheads / cross heads

Pages can be broken up with crossheads, perhaps 2 or 3 for longer pages. Keep them short and meaningful, describing the text to come. And remember the f-shape – always left-align your crossheads.

6. Lists

Lists can be great for displaying easily scanned ideas. But don’t overuse them, and keep the items short – just putting a bullet at the beginning of your paragraphs doesn’t make it a useful list.

7. Links

Your links should be formatted in a way that makes them stand out from the rest of the text. So make sure they’re highlighting words that help visitors understand the content of the page – definitely no ‘click here’, ‘read more’ or ‘this ‘report’.

8. Pullquotes

A pullquote is a very short quote displayed in a large font. If the main text runs around it (and it probably should), make sure the pullquote is right-aligned, so it doesn’t interfere with the easy scanning down the left side

9. Images

Images can work well for breaking up text. But use with caution – some studies have shown that text is better for scanning than images. And make sure your pictures are extremely clear and graphically strong, and simply convey a single idea.

10. Captions

Images should always have captions, and should add new information and help the understanding of the page – a simple description of the picture doesn’t make a good caption