The Zen of the Eyeball

Here’s another fascinating study from Greg Edwards of Eyetools.com.

For those unfamilar with Eyetools, the company specialises in website usability studies based on direct, real-time tracking of a user’s eyeball movements as they interact with a site.

As they say “Clients typically use our data to guide the redesign of their website (or shopping cart, or email campaign, or landing pages) to make sure that what they want people to be reading on their website is, in fact, read.

The pay-dirt from these studies is the ‘heatmap’. These diagrams use overlayed, color to demonstrate the relative appeal of the various page elements – typically bright red for attractive, high ‘eye traffic’ areas, yellow for medium traffic areas, and green and blue for progressively less attractive content. Very informative stuff indeed. You can speculate on what a user may or may not do till the proverbial cows come home, but it’s hard to argue with a swarm of free-wheeling eyeballs.

I think the thing that’s always impressed me the most with the Eyetools studies, is the consistency of the results from user to user. It seems that while more experienced users are certainly more likely to move through a given page with more speed and confidence than their less savvy brethren, they’ll still generally follow the same well-worn paths.

The particularly cool thing about this recent test case is they’ve chosen a site we’re (almost) all very familiar with – CSSZenGarden.com. Here we have the unusual situation of being able to witness users interacting quite differently with alternative layouts, even though we know the content and markup is identical.

Besides the more predictable conclusions — for example, users tend to scan headings first, and ‘above the fold’ is better — the example seems to show users paying signicantly less attention to navigation elements when they’re placed on the right-hand side. Of course, color, size and other elements are coming into play in the example, but I still think it’s quite instructive.

Fascinating reading.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.johandahlstrom.se Johan Dahlstr

    This is very interesting. Just by looking at some of their examples, you get a pretty good idea of where the eye moves during a site visit. Especially Google was fun to see.

  • http://www.addictedtonew.com/ jnunemaker

    Completely fascinating. Thank you for the post. Definitely will make me think a bit more about how I design.

  • CasualNerd

    Very interesting study, I’ve seen so many people speculate about where people focus on a page, but this is real data.

  • Cailean

    So, how long before clients start coupling eyetools reports with design contracts to ‘prove’ the new design they’re paying you for will actually work better – and not just look better?
    Makes a strong argument for ‘functional’ design as opposed to ‘aesthetic’ design. Wouldn’t it be great to see a heatmap for each of the ‘official’ ZenGardens?

  • http://www.sitepoint.com AlexW

    It would be great to see that, Cailean. I’m guessing that the Zengarden studies are attracting new traffic to Eyetools, so I think there’s a good chance of them working through some more of the designs on ZenGarden over the next few months.