What is a Heat Map and How Can it Help You Improve Your Website?

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 home page 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.

What you need is for your users to tell you themselves what has to change. And for that, there’s heat maps.

What is a Heat Map?

Heat Maps 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:

heat map
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 Heat Map on my Website?

Heat maps are extremely useful. They measure attention, engagement and even number of clicks on your website.

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

  • To Measure Engagement.  Do you write online articles, and wonder up until what point your audience stops reading? Using a heat map can help you visualize the ‘scroll’ of a user, and where they inteact 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? Heat maps 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.
heat map
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 idea of ‘heat maps’, you might be wondering if there is more than one kind? Well,  you were right to ask.

What Heat Map(s) Should I Use?

Most heat map solutions 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.

Heat Map or Click Heat Map

This type of  map allows you to quantify actions. It’s a visual representation of all of the clicks vistors 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 heat map marks the spot with a light dot.  If you see large areas of white, this is where the majority of visitors are clicking.

click heat map
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-Map or ‘Content Analysis’

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.

scroll map
source: nguyenvincent.com

If we look at the above screen shot 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” Heat Map

The ‘percentage of clicks’ heat map compliments the classic heat map. 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
heatmap-click-percent
Source: nguyenvincent.com

 

The “Confetti” Heat Map

Although similar to the classic heat map, the confetti heat map lets you see each individual click on a page, as apposed 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!

confetti-heatmap
Source: CrazyEgg

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

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

The Difference Between Heat Maps and Eye-Tracking

If heat maps 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.

eye-tracking
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 technolgy that’s a bit more difficult to put in place than heat maps. It requires specific equiptment that most agencies don’t have.

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

Key Heat Map Features

When looking for a heat map solution, keep in mind the following points:

  • Behavioral Segmentation: The heat map tool should allow you to create heat maps 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 heat map specific to each page can make the analysis tricky if your page is a 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 Heat Maps: The heat mapping tool has to work on pages accessed from a mobile device. Actions specific to these device 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 Heat Maps: You should be able to see clicks on dynamic elements: drop-down menu, slider, carrousel, elements loaded using AJAX or using a JavaScrip framework like React.js or Angular.js.
  • Retroactive Heat Map: Has your site design changed since your last heat map?  A heat map solution 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 Heat Maps and A/B Testing

Let’s imagine that you’ve used a heat map 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.

By combining heat mapping and A/B testing, you’ve got yourself a 3-step method:

  • Identify problems thanks to heat maps
  • Test potential solutions thanks to A/B testing
  • Choose the highest performing solutions

Download our guide to learn all there is to know about A/B testing!

On this home-repair website, a preliminary heat map reveals that users’ attention and engagement are split between too many competing elements.

Insight: attention is divided and conversion is low.

heatmap-ab-testing
Source: KissMetrics

With the help of A/B testing, the company made a few changes to the home page in order to refocus visitor attention on one call-to-action.

A second heat map is made after the modifications.

Insight: attention is refocused on the phone number, the main call-to-action, and conversions increase.

heatmap-ab-testing-results
Source: KissMetrics

The Takeaway

Use heat maps and A/B testing to:

  • Analyze visitor behavior and engagement
  • Reveal strong and weak areas on certain web pages
  • Find specific ways of increasing conversion rates
  • Test these solutions until you see your conversion rates go up
Robin Nichols

Robin 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.

Related Posts


Tweet
Share
Share
Buffer
Pocket
X