How to use Engagement Zones to improve your website and boost conversions with confidence

The Engagement Zones map in Hotjar Heatmaps combines all available interaction data—clicks, move, and scroll for desktop; taps and scroll for mobile and tablet. Then, in the form of a color-coded grid, it reveals the areas with moderate to high levels of engagement from visitors. 

This heatmap type is for those who need a simple yet well-rounded view of user engagement. Analyze your pages in seconds, confidently share insights with your peers and bosses, and quickly answer critical questions about the parts of a page users engage with the most.

Keep reading to learn how this brand-new heatmap type helps you understand on-page user engagement, uncover areas affecting conversion, and use data to determine which site improvements to pursue.

How Engagement Zones heatmaps enhance your site’s layout, content, and usability

Let’s zoom in on how Engagement Zones works and what benefits come with this comprehensive heatmap. Here are the top three things Engagement Zones maps help you accomplish.

1. See the most engaging parts of your site 

As the name suggests, Engagement Zones divides a page into ‘zones’ and applies the following scoring system*:

• Moderate - level 1 (light red): interactions with this area tend to be sporadic or include only simple tasks

• High - level 2 (red): engagement with this area is recurring, indicating that users may find useful information within it

• Very high - level 3 (dark red): interactions with this area are substantial, demonstrating that users derive the most value from it

The beauty of seeing areas of low and high engagement is that it eliminates the back-and-forth between different types of heatmaps. You don’t have to check click maps to know the concentration of clicks on each element and then switch to scroll maps to learn the percentage of users that have scrolled down to each part of the page. Instead, you see all three insights you’d normally get from three separate traditional heatmaps in one viewing. 

For example, if you’re a designer in an ecommerce company, it’s easier to tweak your site’s layout when you identify the most engaged zones of your homepage. Surface high-value elements earlier, such as a call-to-action (CTA) button that users click halfway through the page. Confidently redesign the page based on the actionable insights Engagement Zones heatmaps provide.

* Engagement is calculated based on a combination of available interaction data.

2. Identify engagement patterns on any page

Whether you have dozens or hundreds of pages to analyze, Engagement Zones heatmaps enable you to spot your users’ behavior patterns. Specifically, you can study these patterns to improve your site’s ease of use.

Suppose you’re a product manager of a mid-market SaaS company who wants to evaluate your settings screen’s usability. You notice that users often interact with the items at the top and a couple more buried at the bottom of the page. This could mean you need to reorder the bottom menu items or completely remove unnecessary ones. 

In this case, you should also tap into the rest of our behavior analytics tools and features—such as Recordings, Surveys, and Feedback—to fully understand the reason behind your users’ behavior. (We’ll talk more about this later.)

3. Find vital interaction data in a single view

As we mentioned, other heatmaps show where users click, move, or scroll. An Engagement Zones heatmap is special because it summarizes all interaction data in a single graphic representation, painting the big picture while emphasizing essential details.

Consider a marketer looking into user engagement with key pages to inform their optimization efforts: the heatmap would let them see the most and least engaging parts of each content piece, whether a blog, guide, or landing page. 

"The best example I can think of is if you have a page with copy or a CTA—you can use Engagement Zones maps to see how much action your CTA is receiving," says Karissa Van Baulen, Customer Education Lead at Hotjar. "Rather than going to all three heatmaps, you can see right in front of you how many people are seeing the CTA without scrolling, if they are clicking on it, and if it is driving conversions."

Van Baulen adds that if the metrics aren’t showing much of an impact, then it’s back to the drawing board. Incorporate the insights into the changes you’ll make to the CTA.

How to use Engagement Zones maps in Hotjar

You must be an Observe Scale or Business user to be able to use Engagement Zones maps. Go to Heatmaps and select a saved heatmap to start. In the side panel, scroll to ‘Map types’ and toggle ‘Engagement zones’ on.

A grid map will appear to show the zones of your page with moderate, high, and very high engagement. From here, you can easily tell which areas have the most and least engagement.

Continue gathering insights with Recordings

With Hotjar, a set of relevant recordings is available for each of your saved heatmaps. You can replay these sessions, made up of an individual user's visits across multiple pages, to understand what customer journeys look like, what someone did on a page, and why they clicked on a page element.

To watch a session recording, click 'View recordings' at the top of your heatmap.

Add filters to narrow down your recordings list. For instance, select 'Clicked element' as your behavior filter and fill out the rest of the parameters to display only recordings of users clicking a certain button or text link.

Pick a recording to start watching.

Save and share your insights using Highlights

You can highlight any part of your Engagement Zones heatmap (or any heatmap, for that matter, such as your click, move, and scroll map).

In the Heatmaps side panel, toggle 'Highlights' on—this will show you existing highlights and enable you to create a new one. Select a part of the heatmap you believe is vital to capture and hit 'Save'.

From there, you can add your highlight to a collection and label it accordingly so you can find and share it more easily.

Get more information on how to create highlights in Heatmaps.

Get in the zone before making design and content decisions

By combining different interaction data into one comprehensive heatmap, Engagement Zones provides a simple yet powerful way to understand user engagement on your site. With just one click, you can quickly identify which page parts and elements are getting love from your users—and which could be working harder for you.

Take on this smarter, more efficient approach to gathering actionable insights from Hotjar Heatmaps. Dive into the zone to uncover valuable user behavior patterns that inform your website improvement decisions starting today.