Eyetracking can be thought of - perhaps oxymoronically - as quantitative contextual inquiry, where a user sits before an ostensibly ordinary computer monitor and simply reads web pages. They are given no other special instructions, but instead are simply encouraged to "just behave normally".
The sophistication of the technique is largely in the technology being used. Typically, this will involve small (and hidden) cameras on the computer monitor and (again, small hidden) infrared emitters. The cameras and emitters together record and capture every single saccade (or ballistic movement) of the user's eyes.
Software is then used to contextualise this raw movement data in terms of locations on the actual web page, so that wherever a user has looked on the page is rendered as a graphic representation with "hot spots". The "heat" of a hot spot corresponds to the length of time the user spent fixating on that spot.
In this way, eye-tracking is able to show what areas of a web page most capture a user's attention. The findings are fascinating:
- Users read fast - in just a few seconds, a user's eyes move at amazing speeds across a website's words in a pattern that's very different from the linear, line-by-line progression that you learned in school
- Reading behaviour is consistent - user' main reading behaviour is (fairly) consistent across many different sites and tasks. This reading behaviour has come to be called the F-shaped reading pattern.
F-shaped reading pattern
Detailed eyetracking studies and their resulting heatmap visualizations reveal that users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
In the image below, the areas where users looked the most are coloured red; the yellow areas indicate fewer views (fixations), followed by the least-viewed blue areas. Gray areas didn't attract any fixations.
F-shaped reading pattern revealed by eyetracking heatmaps
This dominant reading pattern has the following three components:
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar
- Next, users 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 element forms the F's lower bar
- Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.
Implications of the F-shaped reading pattern
The F pattern's implications for user-centred design are clear:
- Users won't read your text thoroughly in a word-by-word manner
- 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-behaviour