Easily scanned web pages will make sure your content is read, and your visitors return. Here’s 10 tips for creating scannable pages.
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.
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.
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.
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.
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.
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.
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.
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’.
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
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.
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
This resource was created by Simon Williams who runs the Writing for the Web and Build Your Own Website workshops for NUJ Training Wales. Simon’s website
