Take Advantage of Eye Tracking Tests

Sure, eye tracking studies designed specifically for your web site could cost you tens of thousands of dollars. So, until you're ready to spend that kind of money, you might want to take advantage of data garnered from studies of other websites.

Most eye tracking studies yield certain consistent results that can be applied across the board. Let's discuss a few of the data, and then you decide how it can be applied to your own site.

You've probably heard the statistic that says 70% of the people landing at your site will leave the page within 8 seconds. But what exactly does your reader look at during those 8 seconds, and how can you use this information to improve your conversion rates?

According to eye tracking tests, generally, the first place your readers look is the upper left hand corner of the site. This is where most designers put the logo or other bit of useless, egocentric information. This space would be much better utilized with a call to action or a headline.

And speaking of headlines, there is a huge trend going on right now that eye tracking studies definitely do not support. Have you noticed how many web sites have been using centered headlines in red text? Studies show that red headlines get glanced at, but not read. And centered headlines do not get read as often as left-flushed headlines, especially if the headline spans multiple lines.

The best practice is to put your headline in the upper left corner, use black text and keep it left-aligned. (Obviously, you'll want to make sure it's benefits-oriented, but that's a copywriting trick that has nothing to do with eye tracking.) Another interesting phenomenon is that people don't necessarily read your headline word-for-word. They read the first word, skim through the next few words, read the center words, skim through the next words, and practically ignore the last few word. So, for instance, the eye would look like this:

Read Read Skim Skim Skim Read Read Skim Skim Ignore Ignore

To take advantage of this, you'll want to use a very eye-catching word at the beginning of your headline, such as "Attention!" or "Finally!" and another extremely powerful word at the center of the headline (consider a power verb).

OK, one final note about headlines. Eye tracking studies give us some interesting insight into the length of the headlines: the headline on your web site should be no more than 52 characters long. To be more specific, the headline should be no longer than twice the length of the alphabet it is written in. Since the English alphabet is 26 characters long, we've got a 52-character headline to work with. Any longer than that, and not only will the end words be ignored; you run the risk of the entire headline being ignored.

All of this information definitely goes against the grain of what we're seeing on the web today: super long, center-aligned, red text headlines. If you have a hard time going against what appears to be conventional wisdom, I urge you to do several A/B split tests and prove for yourself what works best.

OK, the upper left gets looked at first, then what? Well, the next thing visitors look at, in general, is images, and especially photos of people. And the area of the photo that gets looked at the longest is the eyes and upper portion of the face.

However, it's interesting to note that stock photos simply get glanced at while photos of "real" people get an actually look. Many designers believe they are making their site look more professional by using stock photographs, but instead they are just wasting valuable real estate. Another benefit to using "real" photos: it increases your credibility factor and improves the trust level visitors place on your site.

Moving along, visitors go from the images to the text that is directly below the images. Oddly enough, most web sites do not use captions with their photos, even though both on and off line tests prove that captions do get read. If you do not want to use captions with your photos, be sure to put your most important text under the photos. And position the photos so they lead the eye into the text and not off the page. A popular design technique is to place the photo or graphic on the left side of the page. You're better off placing the photo on the right side of the page in order to drag the reader into the page.

And a final note on graphics – when creating a graphic representation of a product (think especially of e-book covers and infoproduct boxes) many designers simply create a thumbnail of the product by resizing the image. Unfortunately, the text within the image now becomes unreadable. Eye tracking tests prove that if the text is readable, the graphic will get read and clicked on. You'll get much better results by creating an entirely new image that is meant to be read at a small size.

(Don't worry if the image is not the exact cover that appears on the e-book. By creating something similar, but readable, you will have better conversions.)

So, how do you take this eye tracking data and design a page for optimal conversions? First, decide what you want your visitors to do on the page, and then lay your page accordingly. Try starting with a banner-like header with your logo at the very top of the page.

Follow that with a black text, flush-left headline of 52 characters or less. Under that, place a left-aligned photo of yourself or another "real" person or a legible reproduction of your product or e-book. Next to the graphic, place a black text, flush-left sub-headline using power words in the front and center of the headline.

Time To Implement: Implementing eye tracking data can be relatively simple or extremely complex depending on your current site layout. If you have a template-based site or if you use a WYSIWYG editor, you should be able to reposition the various elements of your page in under two hours.