Heat maps of how people look at websites
The F-Pattern is how most people read Web pages, in the shape of an F: after looking at any interesting pictures, their eyes go quickly across the top of the page, then move down a bit and go part ways across the page and then move slowly down the left side.
Ten seconds is all it takes for most to make a decision of whether to stay or go. And that decision is based on what they saw in the F. That is why Google calls the upper left-hand part of the page the golden triangle. It is the only part of the page that most will ever look at or read closely. It is there that you make your main points and gain their attention.
The F-pattern has been proved by eye-tracking studies done on hundreds of people looking at thousands of different websites. Not everyone looks at every website that way, but it is how most people look at most websites. Even those not designed for an F-pattern.
The Web is not print: many come to your page from a search engine or a link on some other website looking for something in particular. It might be something you said in passing. So they read your page in bits and pieces, not all the way through. Imagine if you wrote a book and found out that most people read it by using the index. It is like that.
Most readers will:
- Read the first paragraph and part of the second.
- Read the first two to three words of every paragraph, subheading or bullet that follows.
So when you write use:
- Inverted pyramid style: State the most important things first and then fill in with the less important things later. Like in a newspaper article or an ad. If you save the best for last and build up to it, like in a story or a joke or a scientific paper, it will be lost on most people. Because most will never get that far.
- Front-loaded sentences. The first few words in a paragraph or a bullet have to be the important ones. You do not say, “Then in 1945 at a roadside diner one cold November night he killed his wife,” but, “He killed his wife one cold night at a roadside diner in November 1945.”
- Topic sentences that come first in every paragraph. If people do not know what a paragraph is about up front, few will have any reason to go further. They will just jump to the next paragraph or just leave. The first sentence of the first paragraph must get across what the page is about.
Of course some will read your page all the way through, particularly regular visitors, so it still has to work at that level too. But even most of them made a decision at some point based what they saw in the F.
See also:
i heard about this in one of my classes, can’t remember which. nice post. sometimes i do go in the “F” pattern but don’t realize it. sometimes i just skim random pages and go to the last bit of the reading to the end where it gets summed up.
LikeLike
Hello,
I saw your blog and wanted to open a dialog with you about options of syndication. We are actively syndicating blog content across hundreds of thousands of domains. You would be placed in conjunction with our AP News content.
The service is free, takes under a minute to register and will provide exposure by way of page views to your blog content.
Please let me know if this is of interest.
Cheers,
Beaudon Spaulding
Bloggersyndication.com
321-277-3370
LikeLike
An addendum from the webcomic world: Much like the headlines of newspapers, one should always put the most important information “above the fold”. This means that the meat and bone of what you want to say (or to present, like in webcomics) should be imediately viewable when the page loads, much like how you see the headlines of newspapers that are folded up first. This is important because every additional step, like clicking a link or scrolling, will lose readers.
Just my two cents 🙂
LikeLike
Hah, yet another point for me to see how different I am. My reading of web pages tend to be an inverted “F”. I noticed myself doing this some time ago and never thought much of it. Nice to see there has been research on it, even if that research shows me as being different then the majority of web readers. lol
LikeLike
Very interesting! I do do this, even here to an extent, even though I come here every day. I definately do this whenever I follow a link. Thank you for writing about this!
LikeLike
Oooooh – thanks for the advice!
LikeLike
anytime I read articles like this I always get freaked out by how detailed and subconscious it is.
thanks Abagond.
Is this what we would call social psychology or cognitive studies?
LikeLike
very informative and very interesting. thanks abagond. i like this post. 🙂
LikeLike
what do you mean, ‘heat maps’ of where people were looking at websites? was Superman a study participant?
LikeLike
Interesting article. I’m only posting because I was curious if the little white dots moving diagonally across the webpage from right to left has anything to do with the topic. Or to just check if i’m going crazy.
LikeLike
Re: Yikum’s white dots:
Those are part of WordPress’s “Make it Snow” campaign. Distracting, aren’t they?
LikeLike
I agree
LikeLike
[…] The F-Pattern is how most people read Web pages, in the shape of an F: after looking at any interesting pictures, their eyes go quickly across the top of the page, then move down a bit and go part ways across the page and then move slowly down the left side. Ten seconds is all it takes for most to make a decision of whether t … Read More […]
LikeLike
only. and only because
there are so many adds in the far right and so on.
LikeLike
[…] The F-Pattern « Abagond Heat maps of how people look at websites The F-Pattern is how most people read Web pages, in the shape of an F: after looking at any interesting pictures, their eyes go quickly across the top of the page, then move down a bit and go part ways across the page and then move slowly down the left side. T en seconds is all it takes for most to make a decision of whether to stay or go. And that decision is based on what they saw in the F. That is why Google calls the upper left-hand part of the page the golden triangle . […]
LikeLike
[…] in the wake of the Charlottesville riot. The original has been edited to make it fit an F-pattern in an H.G. Wells style. I added a message from Superman in 1949 at the […]
LikeLike