May 11
16
Designing web content to suit web usage
It is very easy to fall into the trap of developing web content on the assumption that everyone who visits your website is going to read all of the information you provide in the order you provide it. Sequentially. Word by word. Top left to bottom right.
Nothing could be further from the truth.
A recent eye-tracking study that investigated how 232 consumers viewed thousands of web pages shows that web users typically scan content in an “f-shaped pattern” … two horizontal scans, followed by a vertical scan.
The following heatmaps are drawn from the eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations. These particular heatmaps show how users typically read three different types of Web pages:
- an article in the “about us” section of a corporate website (far left),
- a product page on an e-commerce site (center), and
- a search engine results page (SERP; far right).
Implications of the F Pattern
The F pattern’s implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of 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.
For further information you can view the full article I have paraphrased above at http://www.useit.com/alertbox/reading_pattern.html
Sign up for AdMail's Quarterly Newsletter today