How to read a heatmap like a pro and boost conversions

To boost your site's conversions, you have to understand how your visitors are using and engaging with your site. And the best way to read their minds is by using heatmaps. But installing a heatmap software is only step one…you need to know how to read the heatmap to understand and act on its data.. That's why we put together this complete guide on how to read heatmaps.

From the basics to the powerful filters and features that let you drill down to find juicy insights, we've got you covered.

What is a heatmap?

First, a quick refresher. Unlike the name suggested, a heatmap isn't a map that's hot to the touch. What a heatmap is, is a software system that's connected to various pages on your website to track user behavior. Heatmaps use color-coding to show areas on a page that are “hot” and receive the most visibility and engagement. On the flip side, they also show you “cold” parts of the page that are being missed or avoided.

How do I read a heatmap?

Don't worry about grabbing a pair of sunglasses to read a heatmap, it's much less intense than that. What you'll want to do is login to your heatmap software then go to the page you want to analyze. Have a look at the various colors laid out on the page. Each colored section tells you something different depending on the type of heatmap you're looking at and the metrics available (which depends on the heatmap program you're using). Hover over the colored sections to reveal more data and really drill down into their meaning. (We'll get into this more below.)

Here's a full breakdown of how to read a heatmap:

1. Get to know the colors
2. Consider the F
3. Separate the phones from the laptops
4. Filter until you can't filter anymore
5. Know what type of heatmap you're looking at

1. Get to know the colors

At the most basic level of reading a heatmap, you first need to understand what the colors mean.

What does each color mean on a heat map?

On a heatmap, red means high engagement, yellow and green means moderate engagement, and blue means low engagement. Engagement means anything from visibility to clicks to conversions.

2. Consider the F

No, not that F... we're talking about the F pattern that frequents many types of heatmaps. People naturally read screens in an "F" pattern (left to right and top to bottom). So a heatmap's views and clicks will naturally look like an F pattern.

It would be wrong to say that the left-most and/or highest button on the page is the most compelling just because it's the "hottest" area. That's to be expected. What's unexpected, is when the heatmap doesn't match an F pattern. For example, if the rightmost and/or bottom button is most clicked, this tells you that something is bucking the norm—this could be for a good or bad reason, but you'll want to drill into it. Ask yourself what's so special about that button? Is the copy compelling? Is the design eye-capturing? Is content within the F boring or uninformative? Use this finding to A/B test a design change to really understand what's going on.

3. Separate the phones from the laptops

Obviously, people navigate sites differently on their phones than they do on their laptop or desktop. Make sure you're reading mobile and desktop heatmap data separately. Mobile heatmaps focus entirely on scroll depth and clicks, whereas desktop can actually track the movement of the mouse.

Compare the data to see if users are behaving the same way across platforms. Are they scrolling to the same depth? Are they trying to click on the same un-clickable elements? Is important content below the fold on mobile devices versus desktops?

4. Filter until you can't filter anymore

Familiarize yourself with the filters available to you on your heatmap. Every heatmap program is different, and some offer better filtering than others. Heatmap.com, for example, offers filtering options like:

• Sessions
• Purchases
• Revenue per click
• Revenue per session
• Order value
• Entry page
• Traffic source
• Total pages visited
• Viewed pages
• User locations
• Returning users
• New users
• Time on site
• Page bounces
• Clicked elements
• Rage clicks
• Abandoned carts
• Custom date ranges

Heatmaps act as a secondary analytics platform where you can drill down into granular and specific data to understand what your site visitors are doing, how they're interacting with your content, what they're looking for, how they're navigating, and how they're purchasing.

5. Know what type of heatmap you're looking at

To read your heatmap, you need to understand what type of heatmap you're looking at. The most common types of heatmaps are click heatmaps, scroll maps, and mouse-tracking heatmaps. These heatmap examples help you see what parts of a page are the most attractive and engaging to users, and what parts are being overlooked. They also help you understand how visitors engage with your site.

Types of heatmaps

Here are the 3 most common types of heatmaps you'll read, what their data is measuring, and how to use them to make profitable changes to your site:

1. Click heatmaps
2. Scroll heatmaps
3. Mouse tracking heatmaps

Click heatmaps & how to read them

Click maps show you where the most (and least) clicks happened on a specific page. They use the classic heatmap color scheme to show you the hottest spots. To recap, red means that section had a high volume of clicks, yellow and green means there were a moderate number of clicks, and blue means there was a low volume. Space on the map that doesn't have any color means that it got zero clicks.

Engagement & conversions: Click maps show you what page elements are the most (and least) engaging and what's converting best. If important sections of the page aren't in the red, use areas that are to determine how you can make improvements. Use this data to back proposed design changes or A/B tests. Then, use ongoing click map data to circle back afterwards and see if your changes were successful or not.

Heatmap.com takes things a step further by showing you the value of clicks, not just the number of clicks. This allows you to clearly what clicks lead to what profits.

Dead clicks: With click maps, you can quickly see non-clickable elements that are getting clicked on. These are called “dead clicks” or “wasted clicks” if the user is clicking on something that does nothing. If you see this, the page is confusing to the user, and you should update the design to improve UX.

Remember, not all click heatmaps are created equal. Most click heatmaps show the number of clicks a page received and end it right there. Heatmap.com goes a step further and gives you insights into the quality of the clicks and what those clicks did for your button line. Our click maps show you the revenue per session, average order value (AOV), conversion rate of clicks, and more.

Scroll heatmaps & how to read them

Scroll maps show you how far down on a page a user scrolls—this is referred to as scroll depth. Scroll maps use colors to indicate which areas of the page receive the most to least views. The part of the page that received the most views is in red and the color fades to yellow, green, then blue to indicate how far a user scrolls down the page.

The top of a webpage always scores the highest when it comes to scroll depth because this is the first section of the page the user sees. As the user scrolls further down, it's common to see more drop off as it receives fewer views. Scroll maps also show you the page's fold line, which. is the bottom of the page that a user sees when they first land on the page.

Visibility: Scroll maps help you identify when and if important information on the page isn't being reached by a large percentage of visitors.

Interest: Scroll maps tell you how much interest a site visitor had on your page. The further down they scroll on a page, the more interested you can assume they are to learn about your company, product, service, etc.

Priority: Use the fold line on a scroll map to decide what content should be above and below it. Prioritize important content and make sure major conversion opportunities are above the fold with less important content below.

Usability: Watch for sharp changes in color on your scroll map. This means users are dropping off at a specific spot on the page. But why? Is it because they think it's the end of the page? Drill into the usability and design of the page if you see a sudden changes on your scroll map.

Mouse tracking heatmaps & how to read them

Mouse tracking heatmaps track the movement of a site visitor's mouse during their time on a page. They provide a visual representation of a visitor's mouse movement. They're used exclusively for desktop analysis as there's no mouse movement to track on a mobile device or tablet. They can record where the site visitor hovered, clicked, scrolled, and paused.

Mouse heatmaps are often represented by color as well, using the same red, yellow, green, and blue color scheme as a click map and a scroll map. They may even have lines connecting the colored areas that show you exactly where the mouse moved to and from.

Mouse tracking insights

Interest: Similar to an eye-tracking heatmap (which requires special equipment), mouse tracking maps can indicate what sections of your page are most interesting and eye-catching to the user. If the mouse commonly moves to a specific button or conversion field, you could conclude that this section is more interesting than others to the user.

Non-interest: On the flip side, you can also assume that other areas of the page which don't receive a high volume of mouse tracking hovers, etc. are some of the least interesting or commonly overlooked.

Get more heatmap data with Heatmap.com

Don't pay for a generic heatmap service that just tells you how many clicks your site is getting. Get insights that actually mean something with Heatmap.com.

Unlike our competitors, Heatmap.com:

• Collects revenue data straight on your website.
• Creates custom box mode that allows you to group different aspects of website navigation and analyze them together.
• Segments recordings down to a single element that users are interacting with.
• Offers an intuitive data filtering system that tracks purchasers and user behavior.
• Won't slow your site's speed or affect your site's performance in a negative way.

Heatmap.com offers 3 heatmap packages so there's something that works for every site. Track up to 100 million pageviews per month and analyze an unlimited amount of desktop and mobile pages. Get real-time statistics, conversion tracking, and template analysis.

Start a free trial for 7 days. Premium access starts at $47 per month, and you'll only need to upgrade as your store grows in web traffic.