December 13, 2004
A breakthrough new eyeball study was conducted in September that revealed how consumers see major newspaper sites online, what ads they look at, what ads they don't, what parts of the page get the most eyeballs, what parts nobody ever looks at, and what kinds of headlines capture people's eyes instinctually. In other words, what really works in online design when you want visitors to read what you have to say. Today, in our exclusive interview with the team behind the eyeball study, you'll learn how eyeball studies work and how you can apply the findings to your own site:
Web analytics -- even the best of them -- lack a key ingredient in tracking visitors' behavior:
Say you have 100,000 visitors in a day, and your analytics program tells you that 3% clicked on a specific link. You're still faced with a question: Given that people won't click on something they don’t see, what percentage of those 100,000 visitors even saw that link?
Is the link failing because 80% of visitors saw it but only 3% clicked? Or, is the link in an under-performing spot of your page where only 6% of visitors' eyeballs registered its existence but 50% of those viewers clicked?
Without some way to measure how eyeballs view the screen, designing your home page or landing page is a shot in the dark.
We interviewed Greg Edwards CTO Eyetools Inc, a unique tracking service that reveals how your visitors and email viewers actually view your materials on their computer screens.
7 Web design rules of thumb revealed by recent eyeball studies
Edwards has learned much about what people do and don't see on specific Web sites, but he's hesitant to make generalizations about what works. "It depends on the site," he says.
However, there are a number of elements that can potentially make a huge difference, and those are the elements that are worth testing. Consider them general rules of thumb:
Rule #1. Variability in how people see is less than you think
Surprisingly, despite the fact that persona-based design is the hottest trend today, turns out that people in all demographics and psychographics view your pages pretty much in the same way.
There is great consistency in how human beings respond to visual stimulus. Because of that, you can get very informative insight from how even a small group of people look at something. So you don't need heaps of traffic to conduct an eyeball study.
(This is great news for marketers in extremely niche areas who don't get enough traffic to reliably test pages using a/b tests.)
In general, the biggest difference in viewing pattern will be due to how familiar a visitor is to the Web page -- people seeing a Web page for the first time will look at different things than frequent visitors.
Rule #2. Prime real estate
Marketers often assume that the top left corner is going to get the highest degree of viewing, but this idea oversimplifies the issue. While there is a cultural predisposition to start at the top left, your page's visual elements can override this tendency.
Where people look is like a feather in the wind, says Edwards. The point of eye gaze is the feather. The visual elements are the wind.
The feather may start falling in the upper left hand corner, but if the visual elements blow it to a different part of the screen, it will go there immediately and effortlessly. It is important to understand what kind of wind is blowing across your page.
Rule #3. When white space can hurt you
While white space is soothing on the eye and helps guide and focus the eye, white space that runs from one side of the page to the other -- as if you could draw a line and not have it hit anything -- makes it look like the page is complete.
"It's what we call scroll inhibitors," Edwards says, "It looks like the page is done and people will stop."
Rule #4. Columns
If you have a list of things, a single column will get more viewing. If you break a list into two or three columns, people *generally* will see fewer of them.
Rule #5. Headlines and blurbs
Headlines with blurbs increase reading and clickthroughs, but only *if* the style of the headline and blurb are integrated. In that case, people will read the blurbs and click on what interests them.
"But if you make the font of the headline much bigger, and particularly if you underline it, people will skip from headline to headline and they won't read the blurb. So if you want them just to scan, make the headlines big and different."
Rule #6. Avoid big blocks of black
Look at your page and squint: if everything looks like a big block of black with no visually distinct elements, it will not be looked at, Edwards says.
He had a client who had a poorly designed element on the page. "People were looking above the element, to the right of it, to the left of it, and were literally avoiding this one area of about three square inches. They were subconsciously deciding to ignore it and that was a bummer, because it was one of the areas of the site that generated revenue."
Rule #7. Images and photos
Images, such as small icons next to a paragraph to draw the eye, work well, says Edwards. "They're mostly not directly viewed but they draw attention to the content next to it."
Faces, too, draw attention, but they focus attention on themselves, so they're not as effective at drawing attention to the elements around them.
How eyeball tracking studies work
Edwards brings anywhere from 10 to 20 people into a lab where they each sit down in a room with a computer running Eyetools data collection tools that has an eyetracking camera.
Edwards' team does a calibration, which takes about 20 seconds. "At first, they're like, 'Oh, cool, it's tracking my eyes, but after that we ask a couple of questions and have them go check the news online or something, and then people forget almost instantly," he explains.
Participants then read a description of why there are going to a Web site, which might instruct them to do something specific or may be completely open-ended like "do whatever you want," after which participants are free to spend as much or as little time on each Web site as they wish.
The camera follows the participant's eyes, and later the client is given an Eyetools "heat map" that shows how participants' gazes traveled across a page.
In effect, it's a way of testing out different design or copy elements.
So when would you actually use this stuff? As soon as you have any page or even a prototype that you want to optimize.
One great idea -- test your competitors' sites a swell as your own, because they're the best free prototype that you can learn from.
Useful links related to this story:
Fascinating 2004 Poynter Institute eyeball tracking study showing how consumers view major newspaper's home pages and the ads on the pages: http://www.poynterextra.org/eyetrack2004
Eyetools, Inc. http://www.eyetools.com