How Heatmaps and Eye Tracking Help to Optimize Sales | Sales Layer

How Heatmaps and Eye Tracking Help to Optimize Sales

Vero Gascó · January 20, 2020

Table of Contents

What are heat maps?

A heatmap (or heat map) on a web page or app is a digital analysis tool that displays, through a range of warm and cold colors, the areas that attract users’ attention to a greater or lesser degree, as indicated by clicks and interactions.

Generally, the reds and oranges indicate the most viewed areas, and the blues and greens show those areas where the user is spending less time. The spots with the most activity on a web heat map are called hotspots.

The scientific basis and statistical nature of heatmaps comes in very useful for their application in UX analysis and marketing, since heat maps offer quantified information about aspects that were previously very difficult to measure: namely, which features serve best to attract people's interest.

Advantages

Heat maps are visual tools. This means that they are easy to interpret and you don't need much analytical knowledge to understand the data as shown. The 'hot' areas are the most popular on a page. Period.
They allow performance analysis in different versions of a website (web or mobile version). You can also create a heatmap with WordPress Plugin.
They are implemented quickly. No need to configure for days or hours: heatmap services are very simple and you can start using them soon after you hire them.
They require little investment and offer good results immediately. You can even create heat maps for free, as you’ll see in a minute!

Drawbacks

A heat map is just as convenient and has few disadvantages. They offer usage data that’s very precise, and tailored for the place and time you need it.

However, bear in mind that these are a tool with a very specific, and therefore limited, purpose. A heatmap will show you in which areas of a webpage (titles, texts, banners, CTA, form...) users stop more often. But it won’t tell you why.

For this you’ll need further assessment tools to help explain your users’ behavior; and you’ll have to use all your ability to deduce why some features work better, whether they are the ones you intended to highlight, or if you should change your design in order to get different results.

Tools for creating heat maps

Free heatmaps

Hotjar: This is a heatmap service that includes a free unlimited basic plan, for life. Its only limit is its 2,000 page views per day.
Yandex Metrika: This belongs to the Russian giant Yandex, an online search engine that offers free analysis tools such as heat maps.
Dugwood: This is a free open source software that you can download and install to create free heat maps from any HTML page.

Paid heatmaps

Crazy Egg: This is one of the most popular heat maps services; to start with, for its affordable price, from $24 a month.
VWO: This is another paid software that offers a complete range of analysis based on heat maps.

What is eye tracking?

Eye tracking is a sensor technology that measures the user's eye behavior including eye movement, pupil dilation and blinking, when looking at a web page or other visual stimulus.

This technology is based on the theory that a person's gaze reveals whereabouts their attention is focused, what elements cause them to be more or less interested, and what they miss out. A user's ocular response is linked to their emotional and intellectual response.

Advantages

It gives feedback about how well a design works for the user, which elements are attractive and which are not.
It enables adapting your webpage layout to achieve better patterns of reading and browsing attention, creating a more natural design.
It reveals improvements that can be applied to a page for users with special needs or problems with their vision.

Drawbacks

Eye tracker technology is quite expensive. Sessions with test users and specialized equipment, such as glasses designed for eye tracking, are needed; both of these are expensive and it takes time to conduct experiments.

Tools for eye tracking

Free tools

As yet, they don't exist. Measuring the eye movement of an anonymous user would involve having access to the camera of their computer or mobile phone.

Paid tools

If you want to invest in an eye tracker service, you have two options:

Measuring by means of a screen: The eye measurement is done directly by sensors applied to a screen.
Measuring with glasses: The user wears special glasses to measure how his or her eye reacts to a screen.

For these two eye tracker technologies there are specialized companies like Tobii, Pupil Labs and Smart Eye.

How to optimize conversion using heat maps and eye tracking

Apart from the usual web heatmap, there are more variants you can use to analyze the performance of your pages:

Scroll map

A scroll maps shows the manner of scrolling performed by users on the webpages (whether they scroll all the way and where they stop).

Mouse tracking heatmap

A mouse heat map shows where the mouse travels on a page, and where pauses and changes in movement occur.

Confetti, or clickmap

Visually these look crazy: confetti maps show in color all the clicks that have been made on a web page.

Practical examples

Website redesign

Often the low conversion figures on a website are due to its design.

Shopping experience analysis

In an online store, providing a fast and easy browsing and payment process is essential for achieving sales.

A/B Testing

Whether you want to try a new design for your website or landing page, or variants of a CTA or ad, it’s a good idea to use heatmaps and eye trackers for evaluating different options.

Conclusion

You won't be needing to hire a weatherman to explain your website’s heat map every morning — using one of these simple software packages will enable you to receive plenty of important information.