What the…? The F-shaped Pattern

Earlier this month I spoke at the first BuggyCon, a conference for small businesses organised by the Buggy Network in London. I talked about blogging (I know, don’t I go on about it?!) and mentioned the F-shaped reading pattern and its implications for online content (if you’d like to see the whole presentation check it out here).

People read web pages in an F-shaped pattern

In 2006, web expert Jakob Neilsen of the Neilsen Norman Group carried out eye-tracking tests to find out where our eyes focus when we’re online. The pages he used were an ‘About Us’ page, a product page and a search engine results page (SERP).

Here are the results…

F-shaped patternWe spend most of our time looking at the red areas, then the orange, then yellow, then blue and we don’t look at the grey areas at all. Interesting huh? We read from the top left across to the right, then down, left to right again, then we breeze down the left-hand side, forming an ‘F’.

What does this mean for the layout of blogs, online articles and website pages?

It means that readers scan-read, they don’t read every word unlike when they read printed material. It also reveals that people spend more time (up to 69%) reading the left-hand side of a page and the information at the top.

So how should this inform your layout?

Use headings and sub-headings

The key learning is to make good use of headings and sub-headings. They  should get across the basics of what you’re saying so that someone can scan-read your writing and still pick up the gist of it. They still have some bearing on SEO (Search Engine Optimisation) too as Google knows that your headings and sub-heads are more important than your paragraph text.

Include white space

Your readers aren’t going to wade through dense prose, they want bite-sized nuggets of info surrounded by zen-like white space. You can create white space by using short sentences and paragraphs, lots of writers I know swear by the “four sentence rule” – no paragraph can be more than four sentences in length.

Don’t make your pages too busy.

A crowded page is off-putting and with an attention span of about three seconds – that’s only one second more than a goldfish – readers don’t need any encouragement to click away.

Make sure pages are visually interesting

If you look back at the F you’ll see that people look at the images on a page as much as the text.

Our eyes are naturally drawn to contrast, colour and images so always include at least one image on a blog post and on the pages of your website if you can. A picture speaks a thousand words they say, and online readers are much more likely to look at a picture than actually read 1000 words, however insightful and erudite your writing.

A smattering of bold and italics make text more interesting too as does a SHORT CHUNK IN CAPS  – but don’t overdo do it.

Put the most important information at the top

If you pick up a newspaper – any newspaper, yeah that one will do – you’ll see that this is exactly what journalists do, they start an article with the ‘lead’, then write in an ‘inverted pyramid’. The wide part of the pyramid is where the key facts go with less important info further down the piece so no matter how much of it you read you’ll get the essentials.

It’s believed that the origins of this method date back to the American Civil War (it’s not necessarily true but it makes a nice story) when news was sent by military telegraphs which could stop transmitting at any point, the vital information had to be sent first, with more detail added later in the transmission.

And finally…

So my final piece of advice is to start your pages with the info you really want your readers to glean. Don’t keep them guessing until the last paragraph or that life-changing snippet will rarely get read.

I hope this is useful, I find studies like this fascinating. If you’ve got any tips, comments or questions please feel free to leave them below.

Thanks for reading.

Sally

P.S. If you’re interested in reading more about the inverted pyramid, Chip and Dan Heath talk about it in ‘Made to Stick’ – an excellent book I’ve written about before in this post.

2 thoughts on “What the…? The F-shaped Pattern

  1. Pingback: 5 Copywriting Tips to Overcome Buyers' Inertia | WordNerd
  2. Pingback: Six Really Useful Sites & Apps You Should Know About

What are your thoughts? Feel free to leave a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.