AB TASTY BLOG

How to Use Heat Maps for Website Optimization

Heat maps are visual representations of attention, engagement, and interactions generated by your visitors as they navigate through your website. Free or paid heat map software help you generate different maps to better understand user behavior.

Any website looking to monetize their traffic knows that the crux of the issue is holding the attention of their visitors.

And yet, there is a long, long list of sites that choose to experiment ‘kind of randomly’ with their optimizations. Is their homepage two years old? A few chance modifications later, inspired by an article someone read on their commute to work, and they’re set for another two years!

This is a big mistake. In reality, making random changes to your site is the best way to:

lower conversion rates

lose out on sales

scare away visitors

The truth is that every site is different. What worked for Jim, Jane or Peter won’t necessarily work for you, and vice versa. It is best to use a data-driven strategy suited for website optimization.

What you need is for your users to tell you themselves what has to change. And for that, there are heatmaps.

What is a Heatmap?

Heatmaps are visual representations of attention, engagement, and interactions generated by your visitors as they navigate through your site.

You can then use this analysis to make a ‘map’ highlighting which areas attract the most attention or engagement on your site.

Let’s take a look at this:

Source: www.pixeller.co

Warm colors indicate areas where attention is greatest, whereas cool colors show overlooked spots on this home page.

By analyzing how your visitors behave on specific pages of your site, you can make precise changes to increase your conversion rates.

It’s a pretty great solution, no?

Let your own visitors show you the areas of improvement on your site to help you boost sales, then simply make the appropriate changes and measure how well it’s working, perhaps using A/B testing.

When Should I Use a Heatmap on my Website?

Heatmap softwares are extremely useful. They measure attention, engagement and even number of clicks on your website. They are a key component to your optimization toolkit (to learn more, read our complete guide to Conversion Rate Optimization).

To give you some concrete examples, here are some of the main reasons to use heatmaps:

To Measure Engagement. Do you write online articles, and wonder up until what point your audience stops reading? Using a heatmap can help you visualize the ‘scroll’ of a user, and where they interact with your site. If you notice that only a tiny percentage of people actually reach your CTA, it might be time to make a change.

To Measure Actions Taken. Where do my visitors click? Are they clicking the right button? Heatmaps help you see if your visitors are completing your desired actions, and also highlight where they might be getting stuck.

To Measure Attention. What headlines attract the most attention? What images attract the most attention? What elements are distracting from the main content? Do my visitors see my form? Once you have solid answers to these questions, you can start making changes that will increase your conversion rates.

Source: Unbounce

Gaining the answers to the above questions can help you answer even more nagging questions:

Where should I place my most important content?

What’s the best way to use images and videos?

Where are my visitors getting distracted?

Where should I talk about my product/service?

Now that you’re a bit more familiar with the concept, you might be wondering if there is more than one kind? Well, you were right to ask.

Most heatmap software will let you generate maps that show user interactions from different points of view.

The idea is that you should refer to all of them in order to reveal your visitors’ behavior.

Heatmap or Click Heatmap

This type of map allows you to quantify actions. It’s a visual representation of all of the clicks visitors make on your page. This ‘map’ generates precious data since it allows you to see precisely where people interact with your site.

Each time someone clicks on a precise area on a page, the heatmap marks the spot with a light dot. If you see large areas of white, this is where the majority of visitors are clicking.

Source: Sumo

By quickly identifying the ‘hot spots’ on your site, you can immediately tell if people are clicking where you want them to click. On the above image from Sumo, we can see that the ‘SHARE’ and ‘IMAGE SHARER’ are the least popular areas.

The Scroll Heat Map

The scroll-map lets you see how far down a page visitors scroll, and especially: what elements attract their attention and what do they linger on?

By using a scroll-map, you can determine if users ‘see’ the right parts of your site, or if they get distracted by unimportant elements.

source: nguyenvincent.com

If we look at the above screenshot of an article that talks about SEO, we can see that the image and the two lines of text below it are the most popular: about 85% of visitors have seen these elements.

The Percentage of Clicks Heatmap

The ‘percentage of clicks’ heatmap compliments the classic heatmap. It lets you see, element by element, how many clicks were generated by a certain image or CTA. The ability to quantify clicks by element is extremely important.

This allows you to:

Understand how much importance users give to each element

Avoid allowing users to click on images without links

Source: nguyenvincent.com

The Confetti Heatmap

Although similar to the classic heatmap, the confetti heatmap lets you see each individual click on a page, as opposed to a view that shows a ‘density’ of clicks. It allows you to see if people are trying to click on non-clickable areas, and to fix the problem if so!

Source: CrazyEgg

By now, you already know a lot more about how to use different types of heatmaps.

But there’s yet another way of analyzing user behavior on your site: eye-tracking.

Differences Between Heatmaps and Eye-Tracking

If heatmaps rely mostly on tracking a user’s mouse movements and clicks, eye-tracking analyzes their gaze.

The point of eye-tracking is to see exactly how your site users look at your site, to analyze the zones where they pay the most attention.

Source: Nielsen Norman Group

As with heat mapping, the areas highlighted in warm colors show the areas where readers pay the most attention.

Although it’s certainly useful, eye-tracking relies on technology that’s a bit more difficult to put in place than heatmaps. It requires specific equipment that most agencies don’t have.

If you’re interested in eye-tracking, there is software based on AI, like Feng-Gui or EyeQuant, that allow you to simulate eye-tracking with the help of algorithms.

Key Heatmap Software Features

When looking for a heatmap software, keep in mind the following points:

Behavioral Segmentation: The heat mapping tool should allow you to create heatmaps specific to certain audiences that you define using certain targeting and segmentation criteria (ex. new visitors, visitors who have converted, visitors from sponsored link campaigns…)

Map Comparison: You should be able to easily and visually compare the results of different maps from different user segments.

Organize by Page Template: Having a heatmap specific to each page can make the analysis tricky if your page is an ecommerce product page, and you have hundreds or even thousands of them. You need to be able to aggregate results for all pages of a certain type.

Responsive Heatmaps: The heat mapping tool has to work on pages accessed from a mobile device. Actions specific to these devices should be recorded, such as touches, scrolls, and swipes. During the analysis, you should be able to distinguish between behaviors and navigation sessions seen on mobile vs desktop devices so that you can correctly interpret the data.

Exportable Maps: This important feature lets you easily share your results with teammates.

Dynamic Heatmaps: You should be able to see clicks on dynamic elements: drop-down menu, slider, carousel, elements loaded using AJAX or using a JavaScrip framework like React.js or Angular.js.

Retroactive Heatmaps: Has your site design changed since your last heatmap? A heatmap software should be able to conserve previous results as shown on the then-current website design, and not simply superimpose the results on your new design – the results wouldn’t make any sense.

Increase Conversion Rates: Combine Heatmaps and A/B Testing

Let’s imagine that you’ve used a heatmap to better understand how your website users interact with your brand. You’ve identified strong and weak points on your site, and you’d like to make the appropriate changes.

Question: How can you measure how effective these changes were? There’s only one solution – A/B testing your modifications.

The idea is to create different versions of your web pages, ads, landing pages, etc. in order to compare how they perform.

Robin NicholsRobin is a Content Marketing Manager at AB Tasty. Interested in the crossroads of technology and culture, her aim is to produce practical, on point content to help marketers of all stripes improve their conversion rates.