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.
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!
How Can You Use This to Your Advantage?
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
A Carnegie Mellon study showed a 88% correlation between mouse and eye movement.
Want an analytical one-two punch for your website? First, figure out where your visitors are looking. This can easily be done through a service like 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.
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.