Here's what you'll learn in this article:

  • A heatmap is a visual way to look at trends in visitor behavior

  • In general, there are three different types of heatmaps: Click Maps (including precision interactions), Move Maps and Scroll Maps

  • Static heatmaps can’t show you real-time data or data on interactive features, such as drop-downs or hover-over menus

  • Dynamic heatmaps, on the other hand, act as an interactive overlay that lets you navigate your website, click on drop-downs, and open hamburger menus as data automatically populates in real-time—letting you analyze the entire website customer experience

  • Segmenting dynamic heatmaps by filters such as device type, source or behavior, can provide even more insight to analyze and understand your website and customers

What is a heatmap?

A heatmap is a visual representation of data of visitor interactions – such as clicks, moves, and scrolls –  as users navigate through your website.

Heatmaps provide an easy-to-use illustration to help businesses understand how visitors are using a website, identify pain points, validate design changes, and better insight into element placement, content, call-to-actions, and products.  Most heatmaps available on the market are seen as available only as a single image though there are dynamic, interactive heatmap options available, such as Lucky Orange's dynamic heatmaps.

Static vs. dynamic heatmaps

Heatmaps have traditionally been limited to a single screenshot of the website with data layered on top of it. It’s just a snapshot of the data.

Furthermore, because it has to be generated, it could take hours if not days for the heatmap report to be ready. No one has time for that, and as websites become increasingly more interactive, businesses need more than just a snapshot.

Dynamic heatmaps, on the other hand, show real-time data populate as you click, move, scroll, and navigate through your own website. Because it’s not just a static image, dynamic heatmaps let you analyze insight for interactive elements such as hamburger menus and drop-downs.

Types of heatmaps

Whether your use a static heatmap or a dynamic heatmap, heatmaps generally take the form of four different options: Click Maps, Precise Interactions, Move Maps, and Scroll Maps. Each one provides a different way to analyze data.

Dynamic heatmaps such as Lucky Orange provide all of this information in real-time. In addition, the data can immediately be filtered to isolate specific audiences, devices, sources, locations, behaviors, or other insights.

For example, selecting a mobile device will filter the dynamic heatmap to just those visitors who used your website on their mobile device and automatically resize the screen size to emulate the mobile device view.

See “A Note About Segmentation” below for more information.

Click Maps

What is it? Click maps show where visitors clicked their cursors (desktop devices) or tapped their fingers (on mobile and tablet devices).

Questions it answers:  Are visitors clicking on my call-to-action? What are the most popular drop-down options? Are visitors being distracted by anything on my website? 

Precise Interactions

What is it? Like Click Maps, precise interactions show where visitors clicked or tapped, depending on the device. These clicks/taps are instead shown as individual colored “dots” or interactions to represent highly specific interactions. Sometimes referred to as a “confetti map.” Collecting data like this can be extremely helpful when deciding which percentage of users complete a desired action.

Questions it answers:  Where exactly are visitors clicking? Are visitors clicking on non-clickable elements?

Move Maps

What is it?  Move maps show where visitors moved or hovered their cursor on their screen and are available only for desktop interactions. Sometimes referred to as “hover maps” or “attention maps.”

Questions it answers: Which product/content was more relevant or interesting? Where is the visitor looking on a web page?

Scroll Maps

What is it? Scroll maps show how far users navigated down a page, including what percentage of visitors reached a specific point of the page.

Questions it answers:  Are visitors seeing my call-to-action? Are visitors not scrolling because they know the product? Should I make the webpage shorter?

Note: Element popularity, which shows what percentage of and how many clicks/taps for each element such as an image or call-to-action, is available on Click Maps, Precise Interactions, and Move Maps.

How do I analyze heatmaps?

In general, heatmaps use color to show the more popular areas of your website. The more clicks, taps, moves, or scrolls will result in a “warmer” color, indicated by red and orange. The hotter the popularity, the more intense the red.

On the other side, less popular areas are indicated by a “cooler” color, such as darker and lighter blue. The “cooler” the popularity, the darker the shade of blue.

You can then use this information to find if a call-to-action is being seen or if visitors are clicking on non-linked elements. Or are people not even seeing your crucial information because they never make it below the so-called “fold” of the website?

A note about segmentation

While dynamic heatmaps alone provide an incredible amount of insight, the data can be filtered or segmented to isolate specific behaviors or issues. For example, you could segment a dynamic heatmap to compare how visitors who never convert used your website differently than those who did.

Segmentation can be done to view different event types (taps/clicks, moves, scrolls) and device type (desktop, tablet, and mobile). It can also be done to filter data on different browsers, geographic locations, traffic source, date range, behavior rags, or number of visits.

For example, you could see the difference between Facebook and Google PCC traffic moves or between desktop and Android devices scroll depth. As you adjust the segmentation or other variables, the dynamic heatmap will also automatically reflect the data adjustment.

Related links