Heat maps don’t just show you what links are being clicked on any given page, they also track where visitors are moving their mouse and where they are clicking, even if it’s not on a link. The visual representation looks a bit like an infrared image. Areas on the page that see the most activity appear bright yellow to red, while the least amount of activity appears blue to green. The hotter the color, the more activity is occurring in that spot. As a result, you can easily see where people are interacting and where they are not interacting at a quick glance.
Using heat maps gives you some insight into your visitors’ behavior and how effective your webpages are at driving engagement. It also gives you the opportunity to identify what parts of your pages are working and aren’t working so that you can make adjustments. For example, if a CTA (call-to-action) is colored blue, it means you’re probably not getting as much interaction with it as you would like. Moving the CTA to a part of the page that is indicated as having more engagement might make it more effective.
Types of Heat Maps
You can customize your heat maps to make use of a variety of different user behavioral data. This allows you to get more specific information about any given webpage. A few of the different heat maps that you can implement include:
Click and Tap
Click and tap heat maps show you where visitors are clicking on your page (or tapping if they’re on a mobile device). Click and tap heat maps are helpful for several reasons. You can see what clickable elements they are clicking on and what clickable elements they aren’t clicking on. If certain links aren’t being clicked on, you may need to move them to a space that’s getting more interaction. They may also be clicking on the links that are distracting them from your CTA. You can remove certain clickable elements to help streamline their experience.
You can also see where visitors are clicking on elements that may not be clickable. This can provide you with information about certain elements that visitors may think are links that aren’t, thereby pointing out a design flaw that could be frustrating your visitors.
A move/hover heat map shows you where visitors are moving their mouse on screen even if they’re not clicking on anything. This can be very useful since it essentially works as an eye tracking test. By tracking where visitors are moving and hovering their mouse, you can get a general idea of what they are looking at. This, in turn, provides information on what elements are attracting their attention and what elements aren’t, which can be very helpful in improving existing web pages or designing new ones. For example, if you post blog content accompanied by an image, you can use a move/hover heat map to determine whether people are actually looking at the image or not. If they’re not, you may want to reposition the image to a space where they tend to hover more often so that it has a bigger impact.
Move/hover heat maps can also show you why they may not be clicking on certain links (if they don’t move across it, they may have missed it) and whether they are using your product recommendation carousel or not.
A scroll heat map lets you see how far down your page visitors are scrolling before they leave. If you’re posting a lot of long-form content, this can give you an idea of whether the content is good or relevant (visitors who don’t like the content will leave the page without scrolling to the end) or if the content is simply too long. If you notice a trend of visitors leaving after only scrolling halfway through your content on multiple pages, then maybe short-form content is more suited for your audience. Scroll heat maps are also effective for determining the best place to position your CTA.
Attention heat maps use the browser data available from visitors to display how much time they are spending on your pages. Think of them as the broadest version of the heat maps available since they provide the most general view of how users are interacting with your website.