Skip to main content

Using website heatmap tools to improve UX & conversions

27. April 2020

From colored cell blocks to complex heatmap software

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. 

Heatmap colors range from dark red to cold blue, to indicate the level of interaction with a page element. You can easily see your website hotspots, the way users navigate and the areas that are most or least interacted with. The warmer the colour, the more the interest

Based on this color scheme, you can adjust the website design to match the attention focal points shown in the heat map. Moving important elements from the cold (blueish) areas to the hot (red) areas would be advised. 

Types of heatmaps

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.


Why use heatmaps?

Website heatmaps give you fast access to insights about how your website is being used. You may get similar data from 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.

 

Heat map examples and case studies

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.

Heatmaps from Visitor Analytics

Keeping an eye out for errors and opportunities on your website is crucial for its success. They help you, as a website owner, make critical business, design, and technology decisions fast. You can use them as a diagnosis tool, and find out what is wrong with your website’s performance. 

The information that heatmaps provide is intuitive and has a lot of uses. They are a great addition to have in your arsenal of analytics tools.

The purpose of Visitor Analytics is to give users a truly all-in-one app, that can combine data from heatmaps with other relevant sets of stats: visitor paths, number of unique visitors and other user behavior features including funnel analytics.

Watch the video to understand more about how heatmaps from Visitor Analytics work.

Start using Heatmaps
Traffic stats + recordings + heatmaps - from $0/month

Write a comment

No comments found!