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
Stop using intuition as the basis for your site modifications! Click here to start using a data-driven method for website optimization.
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 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:
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?
Heatmaps 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 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 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? 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.
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 ‘heatmaps’, you might be wondering if there is more than one kind? Well, you were right to ask.
What Heatmap(s) Should I Use?
Most heatmap 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.
Heatmap or Click Heatmap
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 heatmap marks the spot with a light dot. If you see large areas of white, this is where the majority of visitors are clicking.
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.
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” 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
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!
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.
The Difference 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.
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 heatmaps. It requires specific equiptment that most agencies don’t have.
Key Heatmap Features
When looking for a heatmap solution, 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 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 Heatmaps: 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 Heatmaps: 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 Heatmap: Has your site design changed since your last heatmap? A heatmap 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 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.
By combining heat mapping and A/B testing, you’ve got yourself a 3-step method:
- Identify problems thanks to heatmaps
- Test potential solutions thanks to A/B testing
- Choose the highest performing solutions
On this home-repair website, a preliminary heatmap reveals that users’ attention and engagement are split between too many competing elements.
Insight: attention is divided and conversion is low.
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 heatmap is made after the modifications.
Insight: attention is refocused on the phone number, the main call-to-action, and conversions increase.
Use heatmaps 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