Do you have your own blog or Web site, or are you responsible for the site of another individual or an organization or company? If so, remember that the medium is (also) the message — how the information is presented affects how it is received.
So, to help site visitors engage with your content, consider the F — not the letter f, but the online-design principle of the F-shaped pattern.
One way people who study engagement with online content measure that engagement is by eye tracking: observing the eye movements of test subjects as they navigate within and between pages on a Web site. Research results have shown that most site visitors scan Web sites with eye movements roughly corresponding to the F shape.
Because Western culture is, well, acculturated to engaging in text-based visual stimuli from the top left of a piece of content, Web designers have learned to put the most important visual information in that position on a Web page. (Quick — what do you see at the top left of this page? That’s right, the logo form of the site name — its brand.)
And because readers of English (and all other Indo-European languages) read from left to right, it is natural for our eyes to move to the right from our first point of reference. That means that usually, our first eye-tracking movement is a line like the top horizontal line in the uppercase version of the letter f.
Then, accustomed as we are to return to the left margin of a page, we backtrack horizontally or return diagonally to that location (as opposed to reading boustrophedon, or in a zigzag pattern). At this point, we skim from left to right again, as if forming with the movement of our eyes the letter f’s second horizontal element.
A snapshot of an eye-tracking study (which often employs heat-mapping technology and connect-the-dots lines to record the ocular oscillations) may show multiple horizontal sweeps, but these lines generally extend less and less as the eyes travel downward, and a vertical line along or near the left margin of the page is also an almost invariable artifact of such studies, demonstrating that many site visitors scan down the page at about the same short distance from the margin.
Variations occur, of course, especially when the page designer incorporates an arresting textual or illustrative element elsewhere on the page, but the F shape is the default setting for displaying written content online. (This pattern doesn’t necessarily apply when the home page features a block of text, but it’s typical on home pages dominated by a table of contents or a directory.)
The take-away: As you’ll see from studying this site and many others, the F-shaped presentation of content is a pervasive and persuasive scheme of organization. There’s more to it than that, of course — and I’ll share more tips in subsequent posts — but this outline starts not with a, but with f.
This article is good enough, and the concept of the F shape is interesting enough, but above everything…. superb headline! It really drew me in, and with a less savory title I might have skipped this post.
I admit, the title drew me in and the article caught me by the tail. I had a feeling what you were going to say and even through all that, it was good information. I didn’t quite think about the F pattern but it makes sense. I’ll have to take a look at my blog and see what it looks like, see if there is some tinkering I can do. Thanks for sharing!
Fascinating. Is there a difference in pattern when readers are reading on screen as opposed to on paper?
What does this study have to say about the fact that for most of the time we read only the mid section of the screen and the right and left columns are taken up with adverts?
I must say I find this intensely annoying and make a conscious effort to read only the middle of the page.
Mary:
I haven’t read any results of eye-tracking studies with books or other print publications, but I’d say it depends on the content format. Most Web site home pages are designed to offer multiple points of entry, so the F-shaped skim is natural. A traditionally formatted printed page, with columns of paragraphs, won’t encourage this eye movement, but a reference work or a publication with bullet lists or similar formats will.
Awesome information! F for FAST.
I think therefore that the first two paragraphs must state the most important information. However, most sites place an ad on that important positions which is really annoying.
Great article! Thank you for sharing. I’m wondering if you have any visual representations of this concept?
F pattern is a natural phenomenon for net surfers. If you observe your eye skimming habit closely when going through the SERP ( Search Engine Results Page) , you will notice that you are one of those who follow the F pattern. Because of this F pattern searching and skimming habit, some of the websites get better traffic each day than their preceding ranking sites in a search engine.
Thanks for the great post. It’s interesting and discuss the issue in depth.
Theresa:
Eye-tracking expert Jakob Nielsen’s Web site useit.com has several illustrations of eye-tracking results generated by heat maps.
I’ve utilised the F in my website layout too. I believe it is very effective for browsing, as well as being more cosmetically pleasing to the eye.
I was a newspaper reporter and editor for awhile, and learned a bit about layout. In that medium, studies showed that the eye went first to the upper right corner in a two-page spread. It then moved back to the upper left corner, then down to lower right (or center, if there was something special there), and finally to lower right. This was justification for charging more for ads in the upper corners and for reserving dead center for a major headline or photo. Of course, the eye will always go to a graphic before text and will also be pulled off course by movement, bright color, large size, or white space around an object.