7 Eye-tracking Lessons Every Website Owner Needs

by Lindsey Winsemius - Posted 7 years ago

Ever wondered what visitors are looking at on your website? 

Eye-tracking studies have been an important tool to scientifically analyze website visitor's behavior, and what they are looking at on websites. 

It’s been awhile since I’ve talked about eye-tracking, but if you’ve read my previous blogs about the subject, many of the same principles still remain, they’ve just become even more fine-tuned as our society becomes more and more immersed in Internet culture.

What are the eye-tracking trends, and why should you care?

Let’s talk about how you as a website owner can use eye-tracking to improve your website and increase conversions (the actions you want your visitors to take, like signing up for your newsletter).


Eye Tracking Lesson 1: Put the most important information at the top left.

Since we’ve learned to read in elementary school, the top left is always where you begin. This is no different on the web. The reader’s eyes look at the center of the page for a millisecond (a good time to push that pop up for them to sign up for your newsletter) and then go to top left corner.

In that first second, they’ve already formed a first impression of your website based on how cluttered it is, the font and colors, and images. 

Most websites have the company name or logo at the top left, which helps to orient the visitor, assuring them they are in the right place.

Action Items: 
 - Look at a random website for a second. What is your immediate reaction? Then look at your own website for a second and consider what users’ first impressions might be.

- What is your “prime real estate” location (the top left corner)? Are you making the most of it?


Eye-tracking Lesson 2: Users read in an F-shaped pattern. 


This has been true for years. Our eyes follow across the top of the page, down a little, and across, forming a letter “F”. What does this mean for you?

Headlines are the first thing they will read, and will tell them if they are in the right place. Make sure your headlines are clear and to the point, and the visitor to continue on your website.

They are also looking at the top of the page, so be sure the most important things you want visitors to know are located at the top, before they need to scroll on any device. Don't forget to check on your mobile site.

The call-to-action is the most important thing on your website. Where is it located? What action do you want the visitor to take? Is this suggested to them clearly, immediately, and without any need to scroll?


Action Items: 

- Read your headlines. Are they clear and enticing?

- Is the most crucial information on the top of your website pages? 


Eye-tracking Lesson 3: Readers ignore banners.

Web users have learned that if a block of text and image looks fancy, it is probably an ad, and then they ignore it. The industry term is “banner blindness”. If you are using ads, or have something you want users to click on, try to make ads look like a natural part of your website, or readers will skim over them.

Think of Google. They got rid of the right-hand side ads and instead incorporate ad results at the top of the page on the left side. They look just like all the other search results. The only way to know you are clicking on a paid ad is the little “ad” tag below the result, which is easy to overlook. 

Follow Google's lead and try to incorporate your ads into your page's text, and use minimal design or images.

Action Item: 

- Check how well your ads or banners are integrated into your website. If they look different (even if they are beautifully designed), your clicks will be lower. 


Eye-tracking Lesson 4: Images are less important than text.

A picture is worth a thousand words, but not all readers feel this way. Readers tend to spend less time looking at images than text. Most visitors arrive on your website looking for information, and an image often does not give information, which is why they are largely ignored. 

Use images sparingly to emphasize the text on your page that is most important. For example, we tend to look longer at faces, so using an image of someone looking at your headline or call-to-action will direct the eyes of your visitor to what you want them to see.
If you have an important image, making it larger will ensure it will be seen, since visitors are much more likely to look at a larger image.

Using images that don’t help the reader learn something or direct their eyes will just add clutter to your website, which will give your visitors anxiety as they read.

Action Item: 

- Check your images. Are they serving a purpose? If not, consider replacing or removing them.


Eye-tracking Lesson 5: Readers skim over the page.


No one is going to read every word on your page. 

What are readers going to look at?
- Headlines.

- Bolded text.

What do readers prefer?

- Short paragraphs.

- Easy-to-read fonts. 

- Single column websites.

- Lots of white space or blank space.

- Lists.

- Numbers instead of written numerals ( “6%” instead of “six percent”)


What do readers hate?

- Small, cluttered text in long paragraphs

- Colorful or decorative fonts

- Too much clutter.

Action Items: 

Check your website’s “skim-ability”:

- Do you have clear headlines?

- Is your font easy-to-read?

- Do you have plenty of blank space for users to rest their eyes?

- Are your paragraphs short?


Eye-tracking Lesson 6: You can direct readers' eyes (and attention).

There are several ways you can use design to direct visitor’s eyes.


How you can tell visitors what to do on your website:

Use images to direct their eyes. An image of a person looking at a headline or call-to-action will naturally direct the reader’s eyes to that location.

Tell visitors what to do in your headlines. Don’t underestimate the power of suggestion. Having a headline that clearly tells them what they can and should do on your website will help them make the decision. “Join our newsletter to learn about upcoming events in your area”, “Buy now and save 10%”, “Donate and make a different today”, and so on.

If you want visitors to read your text in more detail, consider using slightly smaller text. Large text encourage skimming, while smaller text encourages more detailed reading (just make sure it is still easy-to-read).


Eye-tracking Lesson 7: Buttons and Navigation are crucial. 

Visitors will spend a lot of time looking at buttons and navigation. This is because it helps to orient them, and lets them know where they can go next for more information.

Make sure your navigation is simple and easy-to-follow, as well as being clearly visible. Don’t try to be fancy or put it in a strange spot. It is like a street sign: you wouldn’t want fancy text or a creative place to put the sign. We want is right where we can see it so we know where to go. Navigation is best at the top of the page. This is where visitors will expect to see it. Navigation that follows the reader as they scroll down is ideal, so they can click to the next location they desire at any time.


The same goes for buttons. Don’t make them too fancy or people will find them unappealing. Clearly tell the visitor what clicking the button will do for them. Also, avoid too many buttons. Try to include only one call to action in any section of the page to keep click rates highest.

Action Item:

- Is your navigation simple and highlight the most important aspects of your website?

- Do you use buttons on your website? If so, are they clear, concise, and limited to one or two per page?