Reading the web - How visitors interpret your website

Jakob Nielsen does an interesting analysis of reading patterns on the web. By tracking the eye movement of hundreds of visitors while visiting thousands of websites, he’s come up with a visual map showing how these users examine, read and interpret a website. It turns out they mostly do an “F” pattern on the page, scanning first across the top, then slightly below, and finishing by slowly tracking a vertical line on the left. Important stuff for web publishers and designers, it seems.

[full text of article =>] F-Shaped Pattern For Reading Web Content (Jakob Nielsen’s Alertbox)

According to Nielsen, the study’s “implications for Web design are clear and show the importance [of not simply] repurposing print content:

• Users won’t read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won’t.
• The first two paragraphs must state the most important information. There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second.
• Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They’ll read the third word on a line much less often than the first two words.”

Without reading the complete study (it will be presented at a Nielsen Usability Seminar) or looking at the websites used for analysis, it’s hard to draw the correct conclusions from this information.

• Are readers using this pattern because that is were the relevant information is (or where they expect it to be)?
• How do users from different cultures look at web pages? Do right-to-left readers scan webpages in a backwards F pattern?
• I read magazines back-to-front… do I scan web pages differently?

Though I agree it is interesting to look at this eyetracking heat-map, I’m not quite sure that it should dictate how we layout content on a website. The F-pattern is not necesarily telling us where users look on a webpage, but rather reflecting where content lies on the webpage.

The eyetracking pattern will obviously fall towards the left side of the screen, simply because this is where all of our sentences begin. Whereas not every sentence will reach the right side of the screen, all of them will begin on the left. Consequently, the pattern will show a bias towards the left.

Most users will read the first line of content on the page, usually a title or headline. If interested, they will follow with the sub-heading or the opening paragraph. Readers will continue until they lose interest - this happens in a top-down manner: you read until whichever paragraph you get tired. Since a smaller number of readers will read the full length of the text, the pattern will be biased towards the top of the screen.

Finally, if you’re going through a list, scanning search results, or deciding whether an article is interesting, the logical approach is a top-down scan. This pattern will be biased towards the left side of the screen, simply because there’s always information on that side. Even if you are scanning whole lines, your eyes tend to pause at the beggining of each line -on the left side- because this is your anchor point to begin your scan.

All these behaviors lead to F-patterns, E-patterns and Inverted-L-patterns. I’m not surprised the eyetracking charts reflect this. What I’d like to see is how the user adapts his scanning behavior to different types of websites (i.e., photo galleries or video websites). Have we, as web surfers, learned to see webpages in a certain way? Or do we adapt our scanning behavior to each website we visit?

Comments, as always, are welcome.

Tags: usability, web design