Eye Tracking is Eye Catching

February 16th, 2009

“75% of users say they make judgments about the a company’s credibility based on their website’s design.”

How Visitors “See” Your Site

The example above shows how your visitors see your site. Your visitors eye will follow the pattern in red. Your design elements should also follow the “sight line”

While the average click-thru rate for most sites hovers around 2% this sample site has an average click-thru rate of between 12% and 16%.

The visitor to this sample site will track the page like this:

1. The name of the site first
2. Move down, then left to the AdSense ads
3. Move up through the AdSense ads
4. Move right, down to the middle to the affiliate ads
5. Move left, down to more AdSense ads
6. Move across the bottom over the AdSense ads
7. Move up the right through the AdSense ads and the Affiliate ads

The purpose of this site is exclusively to garner clicks for AdSense and affiliate ads.

All the elements of the site that would take the visitor’s eyes away from the ads are “below the fold” so the eye will not be drawn away from the ads.

Here are some design rules to increase ROI on your website utilizing eye tracking.

1. Text will usually grab the “active” attention of your visitor before a graphic will. This seems counter-intuitive - but “active” attention is what your looking for. Something for your visitor to do.

Graphics are very important. No one will stay long on a site of text only, but to impart information you need text. Graphics are merely anchors for text.

2. The sight line begins with the upper left. Organize your elements so the beginning of the sight line has your most important information.

Keep headlines, sub-heads, bullet points, “H” tags and highlighted text along this sight line.

It has become common practice to put the navigation area in the top left and visitors are accustomed to looking there for navigation. It’s not unreasonable to change the navigation area, but it’s something to keep in mind if it works with your design.

3. If it looks like an ad – it probably is. Text ads work better because they don’t look like ads. Your visitor will leap right over banner ads and obvious text ads. Design your ads to blend in with the format of your site. If you have to, re-design your site a bit to make the ads look like elements of the site.

Ugly does sell – but not to repeat visitors. If you’re looking for one click per visitor than garish might be the way to go.

4. Font size – bigger is not better. Larger fonts are scanned, smaller fonts are read. Pick the size of your font to match your purpose. Lots of body copy in large type is going to be ignored. Long, small headlines will not be read.

5. Headings attract the visitor’s eye. Keep your headlines short and interesting. Something that will draw the visitor into the site.

6. Subheads should be the end of the sentence for your header. Both the header <h1> and the sub-head <h2> should contain the keywords for your site or this particular page. Google puts great weight on “H” tags at the beginning of the copy.

Example: A site about green high top sneakers.

Header: Will Iridescent Green High Top Sneakers Improve My IQ?

Subhead: Just buying Iridescent Green High Tops shows you’re a genius! No improvement possible!

7. Your visitor will scan the bottom of the visible page. Bullet lists, polls, widgets go well there – something for the visitors eye to catch on and compell them to some “call to action”.

8. Keep it short and sweet. Only 2 or 3 sentences in each paragraph. If you need more just break the paragraph at a logical point and keep writing. Visitors will read the top few words and the bottom few words of a paragraph and move on unless they are truly interested.

9. Single columns of body copy are easier to read, less distracting than multiple columns. Keep your body copy in the middle of your page with a maximum width of 5 inches.

Visitors read in “hops” and your eye can hop a couple of times before getting lost. A hop is about the width of newspaper column – about 2 ½ inches.

10. Get rid of the clutter. Keep it simple. You can have a lot of copy but you need to keep the font, font size and style, widths etc to around 6 different ones.

11. If you have an ad driven site, put the ads on the sight line and put the copy next to the ads. In our sample site above there is no copy, just affiliate ads that look like copy. Any of the photos could be replaced with copy because they are near the ads and on the sight line.

12. Your eye can only focus on one thing at a time. When selecting your images have one that dominates all the images. If it’s a great image the visitors eye will rest on it and whatever is in its proximity will be read.

13. Images of real people are the best, particularly when they have eye contact and are smiling. You don’t have to crop photos like they are boxes. Mix up the cropping. Close in implies intimacy. You can rotate the image a bit so that it’s somewhat off balance – this give the reader a feeling of action.

14. Visitors will look at menus and buttons. Do not over-design them. Keep them clean and uncluttered. Your visitors eye should be attracted by them but not confused.

15. People will avoid reading so lists are a great way to impart your information to fast moving visitors. Either numbers or bullet points work depending on your subject.

16. Again, people want your information, but they don’t want to read and you shouldn’t make them work to get it. Break up long paragraphs into bullet lists, headlines and sub-heads and highlighted areas along with small paragraphs.

17. Text formatting is very important to your reader and very, very important for the search engines. Bold text and “H” tags near the top draw your reader in and let the search engines know what your site is all about.

I would not recommend too much color, highlighting or italics – use very sparingly – too much is hard to read and cause the eye to turn away.

18. White space is your friend. Like a uncluttered house, you can find what you’re looking for quickly. White space is the accent for your images and text. It’s equally as important as your text or copy.

19. It has become customary for navigation to be at the top and the left. This doesn’t work for every design and can be boring and stilted in many cases. Start here if you can, but don’t build a boring site. Be flexible.

20. Most visitors have learned to ignore anything that blinks or moves, particularly banners. Banners can be good if they are designed to be a part of the site – almost a graphical representation of some aspect of the site.

Test, test, test - Amen.

Keyword Saturation: 3%
Keyword Value: 10/10

Questions? Call me at 206-335-6162 or email me at marketone[at]gmail.com - John

Related Blogs

• Related Blogs on Eye Tracking
• Google Eye-Tracking Studies…02.08.09 « The Proverbial Lone Wolf …
• Mixing eye tracking and qualitative user testing | BlobFisk.com
• Google Eye Tracking Usability Video