About

Posted September 8, 2004
← Go to home page
← See all articles

Article

Eyetrack III is a gold mine for web designers

I started designing almost a decade after the first Poynter Eyetrack study launched the modern newspaper design movement.

My first real discoveries as a beginning designer fell in line with what guys like Mario Garcia and Toni Majeri were doing — and the Eyetrack stuff had given them a lot of credibility. Basic principles (like using dominant art and big headlines to attract attention, designing with Z-shaped reading patterns in mind, and providing snippets of information to draw readers in) formed the foundation of my approach to newspaper design.

As I began to design web sites, it was only natural for me to bring these ideas along. A lot of stuff applies, but the web is clearly a different beast than print — and newspapers a medium apart as well. There are some ideas that worked equally well on the web, but I’ve certainly been known to overemphasize the relevance of newspaper design on the web. (Ask Charles and Nick about my stubbornness in designing for the Badger Herald.)

Thankfully, new Eyetrack research is here — this time focused on news web sites — and I’m in heaven.

As much as I know that you can never prove anything (and no two people are the same, and perception is not the same as reality, and I’m a bit of a PoMo-dweeb, etc.), there is a part of me stuck in high school science that likes to see “real research” backing up the things I believe and do.

And Eyetrack III is a beauty. It takes on a couple of myths that plague the field — here are my favorites:

People do like to read on the web, after all. Take that Jakob. Turns out, not only will people read what you have to say if you make the text small enough, but people typically enter the page through your text, not images. That, and text ads rule.

On our test pages, text ads got an average eye duration time of nearly 7 seconds; the best display-type ad got only 1.6 seconds, on average.

Yowsa!

Right-column navigation: Not a bad idea. Well, this sure slaps convention in the face. Too bad it’s not that simple…

It might surprise you to learn that in our testing we observed better usage (more eye fixations and longer viewing duration) with right-column navigation than left. While this might have been the novelty factor at play — people aren’t used to seeing right-side navigation — it may indicate that there’s no reason not to put navigation on the right side of the page and use the left column for editorial content or ads.

Recently, I’ve chosen to put navigation on the right side not becuase it garnered “more eye fixations and longer viewing duration,” but becuase it was presumed to be out of the way and secondary to the content. The idea is that we want people to spend their time with our content, not our navigation. We live in a left-to-right society, so it makes sense to put the good stuff on the left. But if people are skipping content to marvel at the right-hand navigation (“Ooh look! It’s got rollovers!”), then I’m achieving nothing.

However, I am confident that things will settle. Just as some recommend left-hand navigation for the sake of familiarity, you could make a case that right-hand navigation is now the way to go becuase it’s novel and people will see it. Both of these conditions are temporary, and once people have grown used to seeing navigation on the right, it will still be a good idea to visually rank everything on your page. Navigation is less important than new content, so it should be in a less obvious location.

Scrolling is not so bad, either. People are willing to scroll down to lower parts of the page, but they start to scan more and more once they get “below the fold.”

Eyetrack III found that people do typically look beyond the first screen. What happens, however, is that their eyes typically scan lower portions of the page seeking something to grab their attention. Their eyes may fixate on an interesting headline or a stand-out word, but not on other content. Again, this points to the necessity of sharp headline writing.

There are a couple of lessons here. One, don’t be afraid to make users scroll — if you have good content, there’s no sense in burying it a few clicks from home. Two, write good headlines on every part of your page. This is especially important near the bottom, but clear, action headline writing is the single most effective way to pull readers into your content.

» A fascinating summary of the results is available, as well as detailed pages for each area of research.