This article, by Steve Outing and Laura Ruel, originally appeared on Eyetrack III. While the article is geared toward the designers of news websites, it provides invaluable insight into how visitors’ eyes track across any website—information you can put to use when designing or redesigning your own website or blog.
News websites have been with us for about a decade, and editors and designers still struggle with many unanswered questions: Is homepage layout effective? … What effect do blurbs on the homepage have compared to headlines? … When is multimedia appropriate? … Are ads placed where they will be seen by the audience?
The Eyetrack III research released by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools could help answer those questions and more. Eyetracking research like this won’t provide THE answer to those questions. But combined with other site metrics already used by news website managers — usability testing, focus groups, log analysis — the Eyetrack III findings could provide some direction for improving news websites.
In Eyetrack III, we observed 46 people for one hour as their eyes followed mock news websites and real multimedia content. In this article we’ll provide an overview of what we observed. You can dive into detailed Eyetrack III findings and observations on this website — use the navigation at the top and left of this page — at any time. If you don’t know what eyetracking is, get oriented by reading the Eyetrack III FAQ.
Let’s get to the key results of the study, but first, a quick comment on what this study is and is not: It is a preliminary study of several dozen people conducted in San Francisco. It is not an exhaustive exploration that we can extrapolate to the larger population. It is a mix of "findings" based on controlled variables, and "observations" where testing was not as tightly controlled. The researchers went "wide," not "deep" — covering a lot of ground in terms of website design and multimedia factors. We hope that Eyetrack III is not seen as an end in itself, but rather as the beginning of a wave of eyetracking research that will benefit the news industry. OK, let’s begin. …
At the core: Homepage layout
While testing our participants’ eye movements across several news homepage designs, Eyetrack III researchers noticed a common pattern: The eyes most often fixated first in the upper left of the page, then hovered in that area before going left to right. Only after perusing the top portion of the page for some time did their eyes explore further down the page.
(image copyright Eyetrack III, The Poynter Institute)
Depending on page layout, of course, this pattern can vary. The image above is a simplistic representation of the most common eye-movement pattern we noticed across multiple homepage designs. (In other words, don’t take what you see above too seriously.)
Now also consider another Eyetrack observation: Dominant headlines most often draw the eye first upon entering the page — especially when they are in the upper left, and most often (but not always) when in the upper right. Photographs, contrary to what you might expect (and contrary to findings of 1990 Poynter eyetracking research on print newspapers), aren’t typically the entry point to a homepage. Text rules on the PC screen — both in order viewed and in overall time spent looking at it.
A quick review of 25 large news websites — here’s a list of them — reveals that 20 of them place the dominant homepage image in the upper left. (Most news sites have a consistent page design from day to day; they don’t often vary the layout as a print newspaper would.)
We observed that with news homepages, readers’ instincts are to first look at the flag/logo and top headlines in the upper left. The graphic below shows the zones of importance we formulated from the Eyetrack data. While each site is different, you might look at your own website and see what content you have in which zones.
Read the rest of the article on Eyetrack III.