VWO Logo
Request Pricing
Dashboard

We tweet useful stuff daily

Related content:

How Eye Tracking Can Help You With Website Optimization?

10 Min Read

Eye tracking enables business owners and marketers to understand user interaction with their websites and landing pages. They can draw a lot of startling insights by using eye tracking with heatmaps, and strategize the design of your landing pages.

Are you struggling to meet the desired business goals and want to consider eye tracking to peep into your user’s mind to uncover why? If yes, please read on.

What is Eye Tracking?

Eye tracking is the process of measuring and analyzing patterns of visual attention of your prospects when they land on your website. Fixation of eye movements is the typical metric of an eye-tracking system.

When collated over a period of time, the data can provide you with crucial insights, such as where on a web page or other pieces of digital content a visitor has looked and paying most of their attention. Analytical tools like heatmaps serve very handy when it comes to mapping eye movements.

What Eye Tracking Can Do to Your Website Design?

Eye tracking can provide you with valuable insights, such as:

  • Where your site visitors are looking and for how long are they looking
  • How did their focus move from one item to another on your web page
  • What parts of the user interface do they miss
  • How are they navigating through a particular page
  • How the size and placement of various page items are affecting their attention

Having said that, below mentioned are ten smart ways to use eye tracking to enhance your site’s design and improve conversions.

1. ‘Fold’ Isn’t as Important as You Think

People do scroll. You just need to give them the right design cues to prompt their curiosity and move beyond the first page fold. 

For instance, many marketers argue that placing your call-to-action(s) above the fold is always a better option as the chances of your visitors easily identifying and clicking on them are comparatively high. Several success stories prove otherwise. They’ve concluded that it typically depends upon your visitor’s motivation.

If, after looking at your audience’s eye movements, you think that placing your call-to-action on the left side of the page is not getting you the number of clicks as anticipated, change its position. Develop a hypothesis and run an A/B test. Rule out the guessing game and use actual data.  

2. Visuals Attract Instantly

Our brains are far more engaged by storytelling, especially when they’re accompanied by images and videos than heavy text placed all over the page. The reason being, people are more drawn towards visuals as they enrich their experience. 

See Google search results below from Moz’s eye-tracking study:

an eye tracking study of Google's SERP

Clearly, results with video thumbnails are getting more attention than textual results. 

Your prospects tend to look first at the image and then read on the text if the visuals are captivating enough. With this human behavior, the ball lies in your court as it can facilitate the rise in conversion rates by fast tracking the decision-making process of your prospects. 

Furthermore, the placement of your visuals and the kind of visuals you’re using matters. Exact Target, global SaaS provider of digital marketing services, increased their conversion rate by 40.18% by simply replacing their landing page image.

Formerly, the image on their landing page showed a laptop screen to draw attention to the announcement of the conference, giving a false impression that the event was a virtual conference instead of a live event.

control version of the landing page for ExactTarget
Control

However, their CTR shot to 40%, when they replaced the laptop screen with an image of a conference as shown in their variation below confirming that relevant images play a crucial role in pushing visitors down the conversion funnel:

variation version of the landing page for ExactTarget
Variation

3. Apply the Contrast Principle

Before-after examples allow easy comparison and force people to pay attention to everything you intend to bring to their notice.

Robert Stevens of ThinkEyeTracking.com experimented to confirm this behavior in real life. The first group of people was shown only the promotional items. 

The second group of people was shown promotional items stacked with full-price items. The eye-tracking study showed that these believed-to-be useless ‘pre-sale’ prices were not that useless after all.

Consumers from the second group took note of the full-price of items during the purchase. They were more satisfied with getting a good value for money rather than their counterpart, which was shown promotional items only.

contrast principle highlighted in the eye tracking study in an ecommerce mart
Encircled image shows consumers engaging with the full price of items that were stacked with promotional items.

4. Adapt to F-shaped Reading Pattern

It’s a human tendency to begin reading from the left side of the page and move towards the right. F-shaped reading pattern authenticates the same.

As a visitor lands on a page, they automatically pay attention to the elements placed on the left side of the page than the right ones and that follows even when they move further down.

a screenshot of a F-shaped reading pattern

So, this makes one thing clear — try and keep all your important content on the left side of the page. Underwater Audio, one of the leading eCommerce companies, used the F-shape pattern to their advantage and increased their sales by 35.6%.

They shifted important testimonials from the right side of the page to the left side so that they’re prominently visible before the call-to-action. As hypothesized, the testimonials influenced prospects’ thought sequence besides enhancing their user experience, helping them increase their sales as anticipated. 

Similarly, Baby Age website challenged the standard eCommerce design convention of keeping call-to-action (CTA) buttons on the right. When they switched the CTA to the left, they got a 16% sales boost.

screenshot of the website of Baby Age

F-shaped pattern also suggests that a website’s header gets a lot of attention. You should put information, such as free shipping, contact number, search bar, money-back guarantee, et al. in a strategic position to increase visibility and optimize the website’s conversion rate

5. Guide Them with Directional Cues 

Human eyes tend to follow the direction they’re pointed in. As the call-to-action is your most important page element, you must point your prospects towards it.

Notice in the image given below how the arrow brings attention to the search bar immediately, making the purpose of the page very clear for prospects:

an example of how arrows on a website give directional cues

However, using a pointer is not the only way to guide an individual’s attention in a particular direction. With images, it gets more subtle than that.

Eye-tracking studies have shown that it matters where subjects in images are looking. Subconsciously, people tend to follow the gaze of subjects and look in the same direction. This is illustrated in the image below, taken from an eye-tracking study[1]: 

a screenshot from an eye-tracking study involving the placement of photos

Make your subject look or point in the direction of your call-to-action (or important information you’re trying to convey) and test it to see how it impacts your conversion rate. 

ConversionXL conducted a research on which visual cues drive the most attention. They created variations of a lead gen page featuring different visual cues. 

The variations had one of the cues each from the following: 

  • Human looking away from the form 
  • Human looking towards the form 
  • Arrow 
  • Triangular graphics
  • Line 
  • Prominent form 

The following graph shows the results of how different cues impacted the average time of users looking at the form. Clearly, the variation showing an arrow pointing towards the form won.

a  graph showing the results of how different cues impacted the average time of users looking at the form

6. Don’t Make Them Dwell on the “Dead Weight”

The Fitt’s law[2] principle states that an element’s ‘weight’ in the visual hierarchy determines the attention it gets. Your call-to-action should ideally have the highest weight on the page. But if a less critical, non-clickable element carries the weight that diverts visitors from the call-to-action, you must take measures to fix the visual hierarchy. 

A great example here is TechWyse’s case study[3]. See their original page below followed by its heatmap:

screenshot of the landing page for Truckers Asset website

Heat map of the above landing page:

heatmap of the landing page for Truckers Assist website

The ‘No-Fee’ badge is attracting maximum attention on the page. But the problem is that it is a non-clickable element and hence, stealing away the thunder of the main call-to-action button. Removing the badge fixed the flaw in the visual hierarchy of the page, allowing the call-to-action button to get the attention it deserved: 

heatmap of the alternate version of the landing page for Truckers Assist website

7. Use Whitespace Wisely

Any space that is free from images or text is whitespace, no matter what color it might have. Appropriate use of whitespace increases legibility and allows natural eye flow on the page. As a result, essential page elements get the necessary traction and improve the chances of more conversions. 

Placing call-to-action and headline on whitespace helps to make them stand out on the page. When you use a larger-than-life image as the backdrop, it serves as a perfect whitespace to reel people in. 

Square Space pulls this off nicely: 

screenshot of the website of square space

Whitespace is extremely important to improve readability as well. 

an example of how whitespace is important to improve readability

The use of whitespace comes with a disclaimer, though. Too much whitespace can also give a sense of disconnect between your page elements. This is why when Trinity Insight displayed their product price closer to the ‘Add to cart’ button, it increased their sales manifold.

Their control looked as shown below:

an example of the control version of an ecommerce store

Their variation that lifted their conversion to 10% applied an efficient buy box strategy, as shown below:

an example of the variation version of an ecommerce store

8. Tune Your Typography

How you style or present your text is what makes people decide whether or not they’d want to explore and engage with your site. Crammed text like the one shown in the image above will dissuade people from reading it. But only taking care of text spacing isn’t enough either. 

Headings and subheadings must stand out to adapt to online scan behavior. Give them relevant h1, h2 tags. Use short paragraphs and sentences, and a font style and size that’s easy to read. See how you can easily spot headline and subheads in the squint test[4] below in the left image: 

a screenshot from the squint test conducted

Bullet points in the text also come handy when it comes to giving a quick overview to readers about the important points. Sometimes knowing what to emphasize can make a big difference. 

Royal Discounts, a leading eCommerce company, increased the font size of their sale price on their product page only to see their conversions improve by 36.54%.

Their control looked like as shown below with the sale price mentioned as standard text which was not standing out from the rest of the content:

screenshot of the control version of the website

Their variation, as shown below, had the price emphasized in the bold font that resulted in a massive rise in CTR as well as in revenue:

screenshot of the variation version of the website

9. Encapsulate What’s Important

The foundation of good visual hierarchy is based on prioritizing your website goals that are aligned with your business goals. Call-to-action buttons, lead-generation forms, or even some important points listed in a box can all work really well for your conversions. 

Frames draw eyes to what’s inside them. For example, Ozscopes rests buyer anxiety by addressing their main concerns in a neatly-designed box that cannot be missed on their product pages. Check out the image given below:

an example of how we can address the major concerns of visitors on product detail page

Conclusion

All the above points are necessary to understand how you should guide visitors’ eyes on your webpage for better conversions. 

However, you must do your research and ensure that your business goals are well-aligned with your expectations from the eye tracking tool, before finalizing it as a potential website marketing strategy for your enterprise.

More from VWO on Website Optimization
7 Thank You Page Examples That Can Boost Visitor Experience

7 Thank You Page Examples That Can Boost Visitor Experience

Typically, a thank you page loads after a conversion has happened on your website, making…

Read More
Astha Khandelwal

Astha Khandelwal

8 Min Read
Website Copywriting: The Ka-Ching in your Conversion Rates

Website Copywriting: The Ka-Ching in your Conversion Rates

Website copywriting that sells sizzle AND steak is part art, part science. There is a…

Read More
Astha Khandelwal

Astha Khandelwal

10 Min Read
A/B testing case study: removing navigation menu increased conversions by 100%

A/B testing case study: removing navigation menu increased conversions by 100%

Usually navigation menus are common across all pages of a website. But, should you have…

Read More
Paras Chopra

Paras Chopra

3 Min Read
Shanaz Khan from VWO

Hi, I am Shanaz from the VWO Research Desk.

Join our community of 10,000+ Marketing, Product & UX Folks today & never miss the latest from the world of experience optimization.

A value for this field is required.

Thank you!

Check your inbox for the confirmation mail