Web marketing experts have done some fascinating research into how people read web pages.
Using eye tracking studies, they’ve found people tend to scan pages in an F-shaped pattern. It’s worth bearing this in mind when you are writing the content for your website. Unless your content is very compelling, most of it won’t get read. It’s sad … but true.
One study, by useit.com, recorded how 232 users looked at thousands of web pages. It confirmed the dominant reading pattern looks somewhat like an F and has the following three components:
1. People first read in a horizontal movement, usually across the upper part of the content area. This forms the top bar of the F.
2. Next, they move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
3. Finally, people scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan. Other times, people move faster.
The ‘heat map’ above shows how readers’ eyes scan web pages in a F-shaped pattern. The red areas of the page get the most attention.
So, what does the F Pattern mean?
Firstly, it means the way people scan web pages is different to the way they read printed pages. So you shouldn’t simply duplicate your print materials on your website.
People will not read your text thoroughly, word-by-word. They will very rarely read everything on a web page, especially when they are doing their initial research into which product or service to buy.
This means, the first two paragraphs on your web page must state the most important information. Then there’s some hope that your visitors will actually read this material. They will probably read more of the first paragraph than the second.
So put a compelling headline on your page, which spells out the main benefits of your product or service.
You should also use sub-headings and bullet points, so people will notice them as they scan down the left side of your content in the final stem of their F.
The ‘heat map’ of this e-commerce site also shows people scan the page in an F-shape pattern.
What about placement of buttons? We try to have only 1 or at most 2 ‘action’ buttons on a page — the indicated action we feel consumers will desire to take. We try and make them a large and colorful element on the page so they are very easy to find.
Where do you think these should be – lower left or lower right?
Hello Tom,
I just happened to be reading your comment on this story, so I thought that I would take the opportunity to reply to your button question. First, where you place the button and how big it should be will depend on how your web page is designed. Eye tracking research of users while on your pages will help you to identify the best areas in which to insert your button. However, generally, I would advise you to avoid placing a button in the far right hand corner of the page. If your web page is mostly text (eg. a news story), embedding a button in the midst of the article might work. A button or image or video will draw a user’s eyes and guide them as they scan the adjacent text content. Again, generally…
But surely it depends on what kind of page is being viewed. After all, who’s going to maintain an F-shaped scan if the material is say, in the bottom right corner? What was the control in this experiment?
Hi Ryan,
This particular eye tracking study was done by Jakob Nielsen who recorded how 232 users looked at thousands of web pages. They found as a general rule, people scanned the page in an F-shaped pattern. But as you say, if there was something of great interest positioned in the bottom right corner, people’s eyes would eventually go to it.
It’s just that the first place people look on the page will be the top left corner, so it makes sense to put your most important element there, rather than at the bottom right where it will take them longer to see it.