Using website heatmap tools to improve UX & conversions

The term heat map or heatmap was trademarked by Cormac Kinney in 1993, and the first large-scale application of it looked like a table of colored rectangular cell blocks. The purpose was to try to show data from stock markets in a user-friendly way that could help identify trends and beat financial markets. Simply put, they were data visualizations that used color to represent values in a matrix. 

30 years later, they have earned a place in the website analytics niche, too.

Why are heatmaps such a powerful data analysis tool when it comes to web analytics and understanding how users interact with websites?

Heatmaps are a lot more visual than your usual analytics reports. It makes them more accessible, particularly to people who are not accustomed to analyzing data. 

There are at least five different types of heatmaps available in most heat map software:

Click maps show where on a certain page visitors click most often. The areas with the most user clicks will display a “hotter” color

Movement maps track all mouse movement across the page and show the most hovered over elements 

Tap maps are the equivalent of click maps, but for mobile devices. They track screen taps.

Scroll maps are a measurement of scroll depth. They use colors to display where most users stop scrolling. With scroll maps, the above the fold section of the page will, of course, be the hottest. The footer will, most likely, be the coldest, as less people scroll to the end of the page.

Attention heatmaps are a type of tool that only some heatmap software offer. They adjust data from scroll maps to display colors also based on time spent on each section of the page.

Website heatmaps give you fast access to insights about how your website is being used. You may get similar data from website visitor session recordings, but you probably won’t have time to watch thousands of recordings one by one. Heatmaps function as aggregated data of these recordings and provide information at a glance.

You can find out the following things about your users and take action:  

• Are they interacting with the important elements on your page: CTAs, buttons, videos etc.? If not, change their size, color, fonts or position.

• Do visitors fail to reach content you think is important, by not scrolling enough? Move this content higher up on the page.

• Do visitors click on non-clickable elements? Either make them clickable or

change their design.

1. Dan, the blogger, and his poorly formatted text

Dan had a moderately successful blog and tried to monetize it by joining affiliate programs. He started linking anchor texts from his posts to his partner pages to earn commission. 

One month later, more than 3,800 users had read his brilliant review of a recent best selling e-book. There were also many comments on the post and the content had been shared by some. Yet, looking at his analytics, Dan saw that only 3 visitors had clicked the affiliate links in his text. He thought it was too little, but had no idea about the reasons behind this.

For his next post, he also used a heatmap tool. What he found, surprised him. Looking at the click heatmap for the page, he noticed users were actually trying to click, but in the wrong places. Some text fragments were highlighted in such a way that people thought they were clickable. On the other hand, the styling of the actual links didn’t get enough attention and clicks.

Dan decided that the easiest way to solve this, was to make the fragments that were “hot” his actual affiliate links. He also decided to use that particular styling on all his future affiliate links. For good measure, he added a visible CTA button to the text. The results were massive. His CTR went from less than 0.1% to 6% after the edits. 

2. Company X and their CTA button position

Company X had a very organized and well-structured website, and yet they were struggling to get conversions from their visits. They placed a CTA button on the homepage, but, even so, their conversion rate was under 0.5%. Only 1 in 200 visitors would actually click the CTA button. 

To understand why, they installed a heatmap tool and used it to make a movement map. After one week, they were able to notice that people were hovering a lot more on the left side of the homepage. The CTA button was on the right. The solution was to move the button to a “hotter” area. After another week, the percentage of people clicking it increased to 2.8%. This had an immediate effect on sales.

3. Company Y and the cold areas in their scroll map

Company Y published a series of blog posts on subjects connected to their product. At the end of each post, they would encourage users to subscribe to their newsletter. Although, on average, they welcomed 11.700 visits per week on their blog posts, new subscribers were 3-4/week. 

In order to find out why, they used Visitor Heatmaps and found out that just 5% of the visitors scrolled down to where the “Subscribe to Newsletter” button was. So they placed a copy of the same button higher up, under the first paragraph of their blog posts, in a “hot” area. The next week after the change, the number of subscribers had increased by 43.