What are You Looking At? Eye Tracking and What it Means for Your Website

What’s drawing people’s attention first on your website? Is it your call-to-action button as you’d hoped, or is it something else? Eye tracking is the study of the movements of the eye with regard to different stimuli (such as images or videos). We’d like to think that our eyes are constantly taking in information and sending it onto our brain for processing. But the truth is – we tend to visually “graze” as we surf the web. Here’s how you can apply the knowledge of eye tracking to your site.

Keeping Best Practices in Mind

How long have you been navigating the internet? During that time, you were probably a little uncertain at first, but you gradually learned your way around. You came to notice that most sites had their logo in the upper left and their navigation bar across the top. It became a standard practice when developing websites to follow this format – and that’s good, because it’s exactly where people are looking first.

where your attention goes on a website

Our eyes naturally look to the upper left to “get our bearings”, but our attention immediately goes to the center of the page.

We look at the top-left of a site first to “get our bearings” and learn how to more efficiently navigate the site. We have certain expectations as to where things should be – and if they’re not there, we don’t spend much time looking – we just go elsewhere. Since many languages are designed to be read from left to right, starting in the upper left corner, it makes sense that our eyes would follow this natural pattern when reading on the web as well.

But More Importantly….Where Does Attention Go First?

Surprisingly, our attention doesn’t immediately go to the upper left of the page – but to the middle. Our eyes are focused there for around a third of a second before moving to the upper left. This same information applies no matter what industry your site is in, and it will likely also apply to mobile websites and smartphone applications, although there’s no data yet out definitively prove that. Essentially, our eyes are doing what they’ve been trained and conditioned to do all these years.

Even more fascinating, a recent eyetracking study showed that when the person in the hero shot is looking at the call-to-action, people’s eyes migrate from that center or top left area to the button or text. By following this kind of visual path, your visitors will mentally investigate what’s gotten the hero shot’s attention. Keep this in mind when considering which product photos and models to include on your website!

what is known in web marketing as the hero shot

When the person in the “hero shot” is looking at the call to action, we subconsciously turn our attention to it as well.

How Can You Use This to Your Advantage?

  1. Put your best information – including your offer, and a contrast-colored call to action button, above the fold and either in the center or near the top left to immediately engage your visitors.
  2. Make the button text actionable as well, using power words like “download”, “get” and “buy”. Not only that, but by coupling the button text with an added sense of urgency, such as “Get a Free Quote in Less than 3 Minutes”, you can foreshadow what the user should expect after clicking.
  3. Our brains are wired to pay close attention to human faces. If there’s a noticeable one on your page, you can bet that’s where the user’s focus will instinctively go first.
  4. Maximize the impact of your images by adding captions below them – international eye tracking studies have shown that readers will recall the caption text nearly 100% of the time.
  5. Place your “hero shot” to the center or left of your page. It requires too much visual effort to direct the eye to a right-aligned image.
  6. Making the font size smaller on your page increases the likelihood of more close-up reading of entire sentences. Larger fonts promote scanning content in “chunks”. The downside to decreasing font size is that it can also tire our eyes out faster.
  7. Take a closer look at making your web forms more user-friendly such as adding header groupings only to divide up important segments of your forms, and including tooltips or real-time feedback before the user submits the form.
  8. A Nielsen/Norman Group eyetracking study for journalists found that articles and blog posts had better recall when writing was tighter, the article included bullet points, and subheadings to break up the text.

CrazyEgg + KISSMetrics = An Unbeatable Combination

crazyegg heatmap

A Carnegie Mellon study showed a CrazyEgg, which uses state of the art heat-tracking analysis to determine where the majority of users clicked on your page.

Heatmaps go far beyond anything that even high-profile companies like Google offer website owners through their free analytics package. With heatmap eye tracking, you can see precisely where people are focusing on your page, and make adjustments if necessary to increase conversions.

crazyegg scrollmap

Secondly, using CrazyEgg can also tell you where they stopped scrolling. Sure, you may already know that whatever’s located in the first third of your site’s “screen space” (above the fold) gets the most attention – but what happens after that? A scrollmap shows you precisely how far down visitors are going before abandoning the page. This will help you figure out where to add actionable elements (like a “Download Now!” button) to engage readers and spur them on to continue down the page.

What’s more, CrazyEgg integrates nicely with KISSmetrics. Don’t just track where people clicked – find out what they did once they got there. Using both tools together will help you see exactly where changes should be made, and track conversions across all platforms – social, email, product and more.

About the Author: Sherice Jacob creates beautiful, high-converting landing pages, in addition to designing blogs and writing compelling content. Learn more at iElectrify or @sherice on Twitter.

  1. Useful stuff.

    I’ve found on my sites through using tools such as this that my images on the sidebar were often being mistake for ads.

    Definitely info that you need to know.

  2. Well, noobs are really going to make something out of this post.I was in search of some ways to promote our new venture, http://www.3dollargigs.com , the most affordable graphic solution on the planet.

  3. loved this post! Another wonderful factual aid to help my clients. Thanks again.

  4. I agree with the prvious comments, a useful post for beginners. Definitely some action points to test and evaluate with some split testing.

  5. WOW, didn’t know that out attention goes first to the middle of the website. I ‘ve read somewhere that it goes to the upper left. It’s interesting!

  6. This is awesome i will actually love to have one

  7. People read how they read: in an ‘F’. Left to right and look for headings. If you can afford it it is a very useful exercise. Couple that with expert reviews and usability testing and you should have your site on the way to the unobtainable ‘perfectly optimised’ status.. unless of course it suggests a full site redesign :)

    If you’re in Melbourne or Australia even, I’ve seen some great work done by Access Testing (http://www.accesstesting.com.au/)

  8. Sherice – Great article. However, the transition from Eye-tracking to Crazyegg (heatmaps) was not clear. Eye-tracking & Heatmaps are different. Eye-tracking represents how users looked at the areas of a webpage vs Heatmaps represents where exactly users clicked after looking at the webpage. Both represent different set of data. For example – users could have looked the image of person (represented by Eye-tracking) but clicked on Call-to-action button (represented by Heatmap). Not to say, that Heatmaps are great set of tools to use.

Comments are closed.

← Previous ArticleNext Article →
Buffer