I recently ran across a research study called Eyetrack III, which was conducted by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools. The study tracked the eye movements of research subjects browsing mock news Web sites and real multimedia content. The results of this study provide some interesting insights into the way visitors view Web sites and what page elements attract their attention.
The study was relatively small—only 46 subjects were observed for one hour each, as they viewed a limited selection of page designs. As a result, the authors warn against extrapolating the numerical results to apply to larger populations. However, despite its limitations, the study provides an interesting data point for Web builders as they strive to understand and anticipate viewer reactions to Web page designs.
And the study says...
Most of the results of the Eyetrack study reinforce conventional wisdom about the viewing patterns of Web site visitors, but with some interesting twists.
For example, the study confirms that visitors start in the upper-left quadrant of a typical page and then proceed to the right and down. The study confirms that observation by plotting the path of visitors' eye movements and how long their gaze stayed in each area.
One interesting detail is that the movement down the page was not a smooth progression, but a series of jumps and regressions. On a typical test page, the subjects not only started in the upper-left portion of the page, they explored that area before moving on to adjacent areas to the right and immediately below the starting area. Subjects tended to linger in the upper portion of the page before gradually moving down. One detail that surprised me was that subjects tended to move up to the top-right corner of the page last; however, this finding may have been a result of the design of the test pages.
The study showed that top navigation is most effective, as measured by the time viewers spent looking at that part of the test pages. However, the study authors caution against concluding that top navigation is the one best solution. There are many other factors to consider; for instance, the study found that side navigation (both right and left sides) also worked well, especially at the article level.
One interesting finding that seems obvious in retrospect is that a navigation bar played a greater role on compact home pages than on pages with more content and opportunities to follow links dispersed within that content.
About text and headings
As you might expect, test subjects showed a preference for shorter paragraphs and articles that were broken up with headings, blurbs, and bulleted lists. No surprises there, especially since the study was partially conducted on mock news sites, where it's likely that visitors would want to scan for quick information.
The study's authors took particular note of the fact that subjects concentrated on the left third of headings and blurbs and concluded that the first words of a heading carry particular weight. However, I'm not so sure that this finding is significant. Another article I read recently points out that a normal reader takes in a word or so to the left and several words to the right of the fixation point, so it's reasonable to assume that the test subjects were reading an entire headline without moving their eyes past the half-way point of the line.
The study found that larger font sizes for body text encouraged scanning rather than more deliberate reading. That's an expected result, but the finding that surprised me was the test subjects' reaction to smaller text sizes. Instead of becoming frustrated by the fact that smaller text is harder to scan and abandoning that text, the test subjects took the time to read the smaller text. Consequently, the study authors recommend that Web builders consider using smaller text to encourage detailed reading. I have to wonder whether the study participants, tasked to read the sample pages, might be more motivated than an average Web site visitor to put forth the effort to read the small text. It'll be interesting to see how future studies fare on this point.
Another finding was that an introductory paragraph that was set apart with special text treatment, such as italic text, was effective at gaining readers' attention. Oddly, that extra attention did not translate into higher readership for the rest of the article. In fact, the opposite was true.
The test subjects' responses to images on the sample Web pages were predictable. Larger images got more attention than smaller images, and human faces were the focal point of most of that attention. Large pictures containing multiple faces got the most attention. The difference between small images and medium images was quite pronounced. Large images got even more attention, but the difference between medium and large images was slight by comparison.
The study found that test subjects recalled factual information best when it was presented as text, but that multimedia presentation (sound, images, and animation) worked better for unfamiliar concepts, such as describing a process. Furthermore, the test subjects typically paid attention to only two media at a time. For example, when information was presented as an audio track accompanying images with captions, subjects often ignored the text captions.
Even though the Eyetrack III study was small, it still provides an interesting look at the way visitors view Web sites. The results are definitely worth thinking about as you design and develop your own Web pages. I, for one, will be very interested to see the results of a much larger study that uses the same eye tracking methodology on a much larger test population and a broader sampling of Web page designs.