8 Powerful Takeaways from Eye Tracking Studies

eye tracking

When it comes to data, I’m convinced you can’t have enough. Crunching numbers, running tests, poring over metrics, analyzing trends — that’s what helps build great businesses and awesome websites.

One fascinating field of study of consumer behaviour is eye tracking. The information gleaned from eye tracking can help you become a more proficient web designer, content writer, conversion optimization expert, or online marketer.

I’ve summarized the bottom line results of some of these eye tracking tests and placed them into your hands so you can start seeing better results in your businesses.

Before we get started, let me explain what eye tracking is. Eye tracking basically measures where people look on a web page and for how long. Eye tracking data is presented visually, overlaid on the screen that the subjects were looking at, similarly to the image above.

With eye tracking, you can discover where a person looked first, second, third, and so on. You can find out what the user considers to be the most interesting part of the screen and how long he or she looked at certain areas.

Like any powerful data research, eye tracking studies aren’t cheap. The least expensive eye tracking devices cost around $5,000, which isn’t very affordable. But by analyzing public eye tracking studies, I came up with 8 takeaways that can help your online business.

Takeaway #1: Put your most valuable content above the fold

Not surprisingly, above-fold-content is looked at the most. This is where your most important content should go.

eye tracking fold

Even though it’s the most important real estate on your page, this doesn’t mean you should neglect the rest of your space. Cramming everything above the fold can completely destroy the usability of an otherwise functional website.

You have only 8 seconds to grab your visitors’ attention, so make sure you are placing enticing information above your fold. When doing this, be careful: don’t try to make your sell above the fold cluttered by cramming in tons of calls to action.

Work on making your messaging and copy appealing. That’s what will encourage people to read more and potentially purchase from you.

For example, I just ran an A/B test on my new design of NeilPatel.com and found that placing a call to action above the fold decreased conversions by 21%.

Takeaway #2: Put calls to action at the bottom of the page

Although the top of the page is the most-viewed portion of the page, the bottom is the second-most viewed portion of the page. People do scroll down. When they do, they go straight to the bottom of the page, where the scrolling stops. That’s where you want to hit them with your call to action.

I use calls to action at several points on my site. I recommend you do the same.

eye tracking crazy egg

If you look at the Crazy Egg heatmap, you’ll notice that the call to action that’s located towards the bottom of my Quick Sprout membership page gets a large portion of clicks. It actually gets 39% more clicks than the call to action button in the middle of the membership page.

Takeaway #3: People read big, bold headlines

The bigger and more obtrusive your headlines are, the more people are likely to read them. Various studies, including the popular F-shaped pattern study, demonstrated that headline size is important.

eye tracking f pattern

A significant study on this subject from The Poynter Institute concluded, “Dominant headlines most often draw the eye first upon entering the page.”

I’ve previously discussed the importance of headlines and how to write them. But in addition to the readable sizzle, a headline should also have dominant design elements — big and bold.

I sometimes use some sweet visual panache for my headlines:

eye tracking headline

More often than not, I just use a big typeface:

quicksprout eye tracking headline

Takeaway #4: Chunks of information are best

You’ve probably heard that you should break up your content into short paragraphs, provide headings, use bullets, and create numbered lists.

The reason for this is intuitive. We can’t easily absorb massive blocks of text.

An eye tracking heatmap shows the gaze duration on a page, pointing out the need for digestible chunks of information.

eye tracking chunks

Evidently, people look at chunks. This page isn’t necessarily a great example of a successful layout design. It does, however, illustrate the idea that people look at the headings with strong visual elements — central positioning, strong colors, and well-thought-out spatial organization.

Takeaway #5: You need a lot of white space

White space, otherwise known as negative space, is an important part of web design. The evidence from eye tracking studies confirms this:

eye tracking whitespace

In the examples above, you can see that the more expansive layout with negative space encourages clean movement and better intake of the data.

Negative space seems wasted. Why not put something there, right? In reality, negative space is valuable because it facilitates movement through the rest of the page. The human eye wants a place to “rest,” as it were, from the various components of the page. The eye also needs to know where to go next.

Negative space provides a way for this to happen.

Takeaway #6: The left side of your page is important

Eye tracking studies indicate that users spend most of their time with their eyes on the left half of the page.

eye tracking left

Many written languages use a left-to-right reading pattern. In web design conventions and reading habits, this viewing pattern has become ingrained. We tend to look left.

When designing pages or positioning content, maximize the left side of the page by placing important elements there.

Takeaway #7: Get rid of banners

People ignore web banners. This decline in attention to banners began right around the time when banner ads were at their heyday.

Banner ads started out fairly innocuous. They were just ads. Then they started vibrating to get your attention. Or they looked like a system error. Or they told you that you were the millionth visitor to a website and would therefore receive your own gold Ferrari….

Click on the ad!? Yeah, right.

Dubbed “banner blindness,” this was one of the first and most talked about usability phenomena in the early days of eye tracking studies. Jakob Nielsen started uncovering this data in 1997.

Banner blindness is now accepted Internet wisdom and usability common sense. It’s such an important feature that it has its own Wikipedia article. And if you don’t believe me when I say people ignore banners, just look at the eye tracking study below.

eye tracking banners

Unless you have no other way to monetize your site, you shouldn’t use banners.

Takeaway #8: Pictures of people are good

From LinkedIn studies to other usability studies, the experts agree: pictures of people are good. Looking at someone else, even in a photo, prompts – usually – a positive physiological reaction of attraction, understanding, or identification.

A page that has pictures of a person’s face encourages interaction and viewing and decreases a bounce rate.

There are at least four takeaways from the eye tracking studies on this subject:

  • Use pictures of people as design elements - you may wish to use images of people on your home page. People look at other people and, as a result, stay longer on the page.
  • Use a picture on your About page – people are more likely to believe you, trust you, and do business with you if they see what you look like.
  • Use your picture on your LinkedIn profile - it engenders trust.
  • Work on Google authorship – people click more often on SERP entries that have authorship images.

Conclusion

You can improve your website, your conversions, your business, and your product simply by paying attention to eye tracking studies.

Where people look is incredibly important because it affects what they learn, what they do, and what they buy. A look precedes a click.

What other powerful takeaways have you gained from eye tracking studies?

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Trackbacks

Comments

  1. Great info neil.

    First of thanks a ton to share this with us.

    And yes heat map of kissmatrics are great.

  2. I am a big proponent of white space! So many websites are overcrowded and the message gets lost.

    Also takeaway #4 makes a lot of sense when you think about browsing behaviors and how people like to skim longer articles to pull out important details.

  3. Another great post Neil! Gotta question. Actually two

    As the eye tracking study shows “users spend most of their time with their eyes on the left half of the page.” – so

    1) Does this mean we should place the sidebar on left? Thoughts?

    2) As we have seen banner blindness, have you came across any eye tracking study on social sharing buttons? Do visitors have “social share button blindness” too :) ? Thoughts?

    • 1. If your important elements are within your sidebar, then yes test placing it on the left.

      2. I have not seen an eye tracking study on social buttons… would be interesting on the results.

  4. This is a great article! |

    So many websites put to many options in front of their users. I hate it when i see call to actions above the primary content users come to see.

    They are on your page for a reason, don’t make them hunt for your content!

    Great work and better takeaways!

  5. Great ideas, mainly takeaway #2 and #6 are useful for biz, thanks for sharing.

  6. Hi,

    As asked by Saurav I would like you to do a study and let us know that whether it is better to have a sidebar on the left or the right side.

    Does the right hand usage affect clicking if it is placed on the left or right side of the page at the same location.

  7. If people have become banner blind what do you suggest people do to as far as affiliate marketing?

    • Facebook paid ads

    • Kathleen,
      Maybe put your aff links naturally into related blog post?
      Or you may use plugins that automatically turn some words of your content into affiliate links, e.f. ThirstyAffiliates plugin.

    • Best bet is to promote offers within your blog content. That tends to convert better as well.

    • Hi Kathleen,
      I think the answer’s in the question – sort of.
      Always offer a range of ways into your offer – just as the same way a switched-on shop allows multiple ways to pay,(credit/debit/paypal/online bank/wire transfer/etc) or a site allows multiple ways to get in touch (email/phone/call-back/sms/fax/post).
      Offer – dare I say it – banners, text advertisments, text-based content, picture-based content, video-based content, interactive content (polls/games/etc).
      Track the lot!
      And zero in on where your audience is actually participating on your site. Do more of that! It *might* even be the banners – I dare you :)
      So, the answer – diversify, and measure your results. If you don’t measure, you can’t succeed. There is nothing better than following a “feeling” you have, and justifying it with the numbers afterwards. Oh wait – yes there is: it’s finding out that your feeling was wrong – and you now have to get creative all over again. THAT is the beauty of the online game we are all in.
      Thanks, Neil, for getting my juices flowing :)

      • ADDENDUM
        Tracking our ad placement in various email newsletters has shown us we need a text-based ad for one readership, and a banner for another – same product, same message – supposedly same market segment – but very different results.
        Stop the second-guessing right now, and measure, measure, measure!
        “What gets measured gets done”

  8. So banner ads are not good?Thank a lot for clearing that,I always use banner ads on my blog.Very helpful post.

  9. Thanks a lot of sharing this article. It’s really helpful everyone who are don’t know about this.

  10. Awesome eye tracking studies Neil. This post is most helpful for both web designers as well as internet marketer to understand readers.
    Thank you for sharing this valuable content with us….. :)

  11. Excellent article Neil. Never thought about this.
    thanks again :)

  12. Learned something great and fascinating today, including that People mostly notice on Left side rather than left side because of the habit of looking that side. Perhaps, I too want to give a try to Crazy Eggs heatmap and hope I get one very soon.

    Thanks a lot Neil Patel for such great contribution.
    – Bishal Biswas

  13. You are right mister Neil ! Thank you !

  14. Great info as usual, Neil!

    I have this simple question if you don’t mind?

    Please how does the eye tracking technology work? Does it read your mouse movement, or does it activate the camera on the user’s computer and then tracks the movement of the eyes?

    Please don’t mind my ignorance :)

    Thanks again!

  15. Newcomer to your blog and I have to say that so far I am very impressed.

    My 2 favourite takeaways for this article are chunk content for readability and use people and faces. It reinforces what I have seen discussed in other articles and I really need to embrace it.

    Thanks for your insights.

  16. What a Wonderful and Eye tracking Article Neil. Thanks for sharing this. I never seen this kind of informative article with an Extra ordinary Information.

  17. Thank you for this post.It is very helpful to me and now i try to follow this instruction in my post.

    Thanks and regards,
    raj savani.

  18. Great advice all around. It’s what I’ve noticed works over the years – compelling content is handy as well, of course. People skim in the internet era, and large amounts of white space, sub-headings, and things such as bold words tend to get people’s attention. Lists, too, seem to work. The “Top 10″ craze has been pretty alarming – it makes for lazy writing, in my opinion, but it gets lots of views.

  19. Hi Neil,

    Very interesting. Thanks for sharing this with the world.

    Were you able to do the eye-tracking on things like “color”, “shape” or “placement” (horizontal or vertical or obliquely placed)?

    Once again, we really appreciate your initiative and the sharing spirit. Thank you.

  20. Neil, thanks for this post. I actually read the headline yesterday and thought ‘not really interested’ :-) then today I noticed it again and thought I would have a quick read. Funnily enought I really enjoyed it.

    You’ve definitely made me think again! Thanks

  21. Hey Neil, you have a lot of experience with heatmaps and eye-tracking.

    I’m curious as to how you would rate their importance as a conversion optimization tool wrt other tools that exist, like user testing, copy testing, etc.

    Here’s how I feel about them: most of the time, results that are presented seem to me kind of a “duh”.

    People look at images? No kidding. Stuff above the fold gets a lot of attention? You don’t say!

    It seems to me those are quite minor insights for anyone with a modicum of knowledge about UI/UX and copywriting (people have known for ages that people scroll down to the bottom to read the P.S.).

    Now, I can see how heatmaps could be useful in a comparative setting: e.g. how two segments interact differently with the same page.

    But obviously, I’m a big sucker for new ways to use tools to get a good lift, so I’d LOVE to see some contradictory evidence.

    • They are very useful. You can use a heatmap instead as there is a direct correlation between heatmaps from mouse movement and eye tracking.

      Typically you can boost your conversions with ideas from mouse/heatmap studies.

  22. I like #1 Neil. The other day I posted my best content and pics above the fold, but I’m also pulling user eyes down by stretching out my posts with intelligent design. Cool stats dude!

  23. “Get rid of banners” this advise seems crazy as we can see this in so many websites, including mine :(
    But it’s not because everybody do this, that you have to do the same!
    Thanks for this post Neil!

  24. That’s a very scientific way of looking at it.

  25. Ashi, great points. Thanks for reading :)

  26. Great article Neil. Point #5 is something many people struggle with. I am a big believer in keeping a website simple and making sure your visitors focus on what is important. Too many websites fill up all of their white space and the pages become overwhelming to the reader. I think they believe, as you stated, that they are wasting the space if they don’t put something there.

  27. Really great takeaways you provide here Neil.. I am working on making my messaging and copy appealing. Want to keep readers on my page. Thanks for sharing.

  28. Very useful article, especially for web designers and copywriters. Thank you very much Neil.

  29. Well, getting one study done isn’t affordable at all, for many folks out here. But hey, no worries as you have mentioned some killer tips and observations, which we can make use of on our blogs and sites.

    Putting valuable content above the field has been a priority of mine. I’ve been using the site analyzer here on Quicksprout and been following that suggestion ever since. Also, taking it too seriously and arranging too much stuff up there is harmul though, like you said.

    Headlines are being given due importance by me. Further, I make it a point to highlight important text. Hope this will help them get noticed by people.

    Regarding the ‘people loving left side of the site’ part, I’ve read that there is an F pattern that people generally follow, when it comes to surfing sites. They start of with the left most part, making an ‘F’ pattern in the process. Reading this part, that theory came to my mind.

    Much useful post Neil! Thanks for sharing. I found the link to it on Kingged.

    Arun

  30. Hello Neil,
    I really didn’t new this information you shared. Well, would you like to guide for Video Optimization for Search Engines? I want to rank higher for my videos in search engines. Please guide me.

  31. Hi Neil,

    Thought provoking post. I’m wondering if you could offer more feedback on the banner blindess phenomenon – it seems most of the feedback and references are to sites that include paid advertising (in the form of banners/graphics). Do you think that same phenomenon applies to more information rich/brochure style sites as well?

  32. Hello, its good article about media print, we all know media is a great source of information.

  33. I’m a big fan of keeping things simple! This is a fascinating article. Thank you for sharing.

  34. I pay a visit e?ery day some web p?ges ?nd ?nformation sites t? read articles,
    ?owever this weblog presents quality based writing.

  35. Aw, this was a very nice post. Spending some time and actual effort to generate a top notch article… but what can I say… I procrastinate a whole lot and never manage to get nearly anything done.

Speak Your Mind

*