FREE! Eyetracking and the Web

While recently looking over some of the articles in Linda Goin's recent series Web Design Mysteries, I was struck by how much design I just completely overlook when I scan a Web page. Many of her insights, while familiar to a skilled artist like herself were a complete revelation to me. 

Then while I was surfing the Web I came across a reference to eyetracking, sure I've heard of it before, but combined with Linda's articles this prompted me to delve a little deeper and try to find out what eyetracking studies had been done on Web sites and what the implications to Web developers may be. 

Here I aim to share what I've found in my brief investigation – feel free to share any of your insights by adding comments to the bottom of the article.

Readability – Not Going There (Today)

Now it's merely a short leap from understanding how an eye moves around a page and pauses over items, to talking in detail about how to increase the amount of time spent at that item.

I'm not going to stray too far into readability and usability today – I figure it's best to confine this discussion to the structural aspects of Web page layout than delve into debates on font-size and developing text that can be easily scanned.

Early Results and Implications

One study carried out in 1998 by User Interface Engineering on an effectively three-column layout above a large single column content area indicated that, at that time, users employed a visual scanning strategy that rapidly evolved from a printed book style left to right style to a centre-left-right approach.

Users rapidly worked out how to avoid content they didn't think they wanted and quickly acquired a mental awareness of where they expected good content to be (in the centre, probably not at the bottom of the page). This study also highlighted the influence of peripheral vision; advert borders would neatly deflect vision elsewhere, although the users seemed to be able to 'assess' the content of the ads. Furthermore, and I'm guessing this was a study that didn't use mice with scroll wheels as it was commented on, users rarely looked directly at the scrollbar even when using it.

Eyetools are an interesting outfit, intimately linked (as far as I could tell) with the development of this area of technology. They are a spin-off arising from the Stanford-Poynter Project that also started to conduct eyetracking research in 1998 or so.

Their report released in 2000 seemed to support work that had been done in the mid-90's by Jakob Nielsen.

So what did Jakob pick up on? He observed that text seemed to attract attention before graphics, that headlines should be simple and direct, that information should be facilitate fast scanning and that a site should allow fast re-orientation for users that return to it (based on observations of interlaced browsing – flipping between sites).

Now Web technologies have moved on a long way since then – mice have scroll wheels, broadband connections are commonplace, even in the home. Similarly Web design has moved on – standards-based programming and more efficient browser rendering coupled with 'accepted practice', but this practise does of course build on the early studies.

So what can we find from more recent times, that takes into account our high bandwidth using, blog reading, Web literate society?