Website heatmaps

Want to know what's really going on with your website visitors? Website heatmaps are the ultimate tool for uncovering user behavior and making your website better.

James Larson

What is a website heatmap?

Why should I use a website heatmap?

What are the different types of website heatmaps?

What’s the best website heatmap software?

Unlocking user behavior with heatmaps

Frequently asked questions about website heatmaps

Want to know what's really going on with your website visitors? Look no further than website heatmaps. These handy tools give you a visual representation of where users are clicking, scrolling, and moving their cursor on your site, helping you make informed decisions about design and marketing strategies.

In this article, we give you the lowdown on all the different types of heatmaps and the best tools to use. So, let's dive in and unlock the secrets of your website visitors.

What is a website heatmap?

If you’ve ever looked at a weather forecast, you’re familiar with a heatmap. It’s a graphical representation of an area with color-coded sections that represent where temperatures are warmer or hotter. But what’s a website heatmap? This highly adaptable tool can quickly convey vast quantities of information to help better inform design and marketing decisions for your website.

Most commonly, a heatmap is a visual representation of where users click on a page, with the “hottest” areas being those that receive the most clicks. “Heat” is indicated by warmer colors, showing high engagement with a portion of the page. Cooler colors indicate areas with low engagement.

Heatmaps were first designed by a German scientist named Hermann von Helmholtz in the 1800s, who had the idea to use colors to more quickly convey the scale of data in a given chart. Today, they’re a go-to tool for marketers and designers looking to better understand user behavior and identify areas of a website that may be in need of improvement. They transform hard-to-understand tables of data about conversion rates and click rates into visualizations that can quickly be comprehended by different groups of people within an organization.

An example of website heatmap results from a first click test in Lyssna.

Why should I use a website heatmap?

Before using any tool, you should consider why you want to use it in the first place. While website heatmaps provide interesting data on their own, it’s best to engage a sophisticated tool like this with a particular goal in mind.

Here are a few high-level reasons to consider using a website heatmap:

To refine the marketing funnel. A website heatmap can help you find places on your site where conversion fails. Perhaps a CTA or form isn’t receiving the attention you expected – a heatmap can help you decipher the cause of this failed point of conversion. If you’re working on segmenting users, you can also use heatmaps to compare and contrast the way different segments use the website.
To understand your users better. A heatmap can show you where users are particularly drawn or where they aren’t. This can be useful if A/B testing with different elements, for example. Color changes or slight design tweaks may lead to different heatmap results, which can then be used to nudge user behavior more intelligently.
To identify areas of confusion. If users are consistently getting lost on a particular page, or not paying attention to an area that you had intended to receive more attention, a website heatmap could aid immensely in figuring out what’s distracting them. In other words, this is a great way to help you remove distractions and create a more purposeful website.

What are the different types of website heatmaps?

While we’ve primarily talked about website heatmaps in terms of clicks, they can aggregate user information related to a broad variety of digital interactions. Let’s go through a couple of the most common.

Click heatmaps show where users are clicking on a page. They’re particularly useful in determining if graphical elements are appropriately routing users. They can also uncover the way CTAs and other buttons compete with each other.

Scroll heatmaps show how far down a page users are scrolling. They illustrate which portion of the page is rendered to all users immediately upon visiting the site. From there, they illustrate how interesting or “scrollable” the content is. If you have an important piece of information too low and users aren’t reaching it, a scroll heatmap can help you discover where they’ve dropped off on their journey. You can, in turn, make informed decisions about how to restructure that page. “Dropoff” points can also pinpoint areas where content or design should be made more interesting.

Movement heatmaps show how users are moving their mouse cursor around the page. Also sometimes called “hover” heatmaps, they illustrate the way some unconscious movements of the mouse show interest and visual attention even if they don’t result in a click. As with other types of website heatmaps, they can show whether your design works as intended. High attention on a visual element intended to convey important information to the user would be desirable, whereas high attention on a graphical element on a page where an important CTA is underperforming would indicate an undesirable design element.

Attention heatmaps combine data from all three of the above types to create a single visualization of user attention on a page.

While these are by far the most common types of website heatmaps, there are a few other types that can show highly specialized information. They’re worth keeping in mind in case a specific situation arises where they may be the perfect tool.

Eye movement heatmaps use specialized equipment to specifically track where a user’s eye goes on a page. These are more accurate than something like, say, a hover heatmap, but are labor- and cost-intensive.
Desktop vs mobile heatmaps allow you to compare and contrast user engagement on different platforms. If you have underperforming mobile engagement, for example, this type of heatmap can help you spot the differences in your design that may cause the underperformance.
Rage click heatmaps show you places that lead to users “rage clicking,” or clicking the mouse button repeatedly. This generally happens when something isn’t performing as expected. This can help you pinpoint misleading design or technical problems on your site.
Dead click heatmaps allow you to find the areas on the page where users clicked, but nothing happened. This may show a place where users think a button or interaction should occur but isn’t.

Your go-to user research platform

The best teams use Lyssna so they can deeply understand their audience and move in the right direction — faster.

What’s the best website heatmap software?

There are countless website heatmap options available. And many have free tiers.

Before deciding based entirely on price, think through the qualities of each piece of software and take advantage of any demos or trial periods available. A good heatmap can help boost conversion, which means they can be worth the investment for organizations at any scale.

Here are some options to choose from.

Lyssna

In Lyssna, you can also view and export heatmap results with prototype tests and first click tests. You can create highlights to analyze click clusters, including time-to-click, and filter to a cluster to analyze follow-up questions and find out why users were drawn to that area.

Hotjar

Hotjar is a great free option if you’re just looking to get your toes wet. It’s user-friendly but still provides robust reporting, including click maps, scroll maps, and mouse movement maps. It also supports session recordings that can be annotated and time-stamped, so you can provide detailed commentary to collaborators. At its free tier, it only records 35 sessions per day, so if your traffic needs are higher you’ll need to upgrade to a paid tier. ‍

Mouseflow

Mouseflow is another strong free option that will scale as your needs do. You can see clicks, scrolling, and session recordings, and it features real-time data. It also sorts users into funnels so you can track their paths through your website. Like Hotjar, its pricing options are tiered based on how many user recordings you’d like – in this case, it’s free for 500 recordings per month, with payment tiers boosting that number to 5,000 recordings per month and upward.

Crazyegg

Crazyegg is another strong option for startups and small businesses. Its “snapshot” system allows you to interpret the page through a click heatmap and scrollmap as well as a “confetti” visualization (which is a more granular type of analysis). You can also view your data via an overlay or a raw-numbers list. Crazyegg also supports A/B testing and error tracking. It doesn’t have a free trial, but its basic plan starts with 3,000 recordings per month.

Fullsession

Fullsession is a more robust option. Among its features is the ability to sort new and returning users. It also monitors realtime data, which can be a helpful way to get a snapshot of how your site is performing at a given moment rather than in aggregate. Fullsession offers a two-week trial before moving onto one of their payment plans, which are tiered like the others in terms of total session recordings.

Contentsquare

Contentsquare (formerly Clicktale) is good for enterprise-scale heatmapping. Besides all of the heatmapping features of most other options, it plugs into revenue performance, allowing you to view your site design in terms of financial goals. If you’re just looking to improve email sign-ups this is probably more than you need, but for major ecommerce operations it provides highly nuanced intelligence.

Unlocking user behavior with heatmaps

So, what's the bottom line on website heatmaps? Well, they’re a bit like a secret window into the minds of your website visitors, letting you see exactly where they're clicking, scrolling, and moving their cursor. And with all the different types of heatmaps out there, you can really get a full picture of what's going on.

By using this info to tweak your website design and marketing strategies, you'll be able to boost engagement and conversions in no time. Lyssna can help you gain these insights, and more.