Scroll maps: 5 ways to optimize UX and increase conversions

When you want to find out things like where you’re losing people’s attention or where you should increase visitor engagement on your website, you can use a specific type of heat map called a scroll map. Scroll maps quickly collect data on how visitors scroll through your website, so you can spot opportunities for user experience (UX) improvements, make changes, and, ultimately, increase conversions.

After all, happy users are good for business.

By the end of this article, you’ll know everything you need to know about scroll maps: what they are, how to set one up, and how to use them to find actionable insights that will supercharge your user experience.

What is a scroll map?

A scroll map is a type of website heat map that visually shows how far users scroll down a page, whether it be on a desktop, mobile, or tablet. Scroll maps use color to represent the most and least viewed parts of a page, from hot (popular) to cold (unpopular): red would be the elements of your product page users engage with the most, while blue represents low or no customer interaction.

Scroll maps aren’t just about color: they provide your digital business with percentages to let you know how many users ventured further down the page. An average fold score is also calculated so you can easily visualize the part of the page most visitors see before they start scrolling.

Scroll maps vs. heat maps

Heat map (or heatmap) is a broad term for different types of visual website analytics. Scroll maps are one type of heat map, where the ‘hottest’ colors show the most viewed sections of the page, rather than the most clicked (or tapped) elements of it.

In other words, scroll maps generate heat zones of your website, app, or product pages from top to bottom, so they look more like a vertical rainbow instead of depicting the ‘confetti’ patterns typical of other types of heat maps like click or move maps.

Note: when you set up a heat map in Hotjar, the tool automatically collects data for all threeheat map types(scroll,click, and move) 🔥

5 ways to use scroll maps

You can be as creative as you like when it comes to spotting data patterns and UX optimization opportunities. To help you out, here are five of the most common ways to use scroll maps.

1. Find out where you’re losing user attention

Your scroll map will show you how far down the page users get (the percentage data will help, too): the colder the color, the fewer people will have seen that section of your page.

If your goal is to increase and hold user attention, getting them to scroll further down—for example, you have a long landing page and want to make sure they see all of the information on it—scroll map data will help you think practically about how you can tweak the UX design or copy to reduce drop-offs and increase conversion rates.

2. Spot false bottoms

Sometimes, your visitors don’t realize there’s more content lower down the page. This is known as a ‘false bottom’, and it could be caused by white space, line breaks, or blocks that confuse and frustrate users. Using a scroll map, you can ‘depth test’ your pages to check for false bottoms.

How Hotjar used scroll maps to draw user attention to important web page elements

A scroll heat map on Hotjar’s careers page showed a sharp change in color (from green to blue) toward the bottom of the page. Only 20% of users made it to the end, meaning the 5/5 Glassdoor rating (valuable social proof) was missed by 4 out of 5 visitors. To get more people to see that element, we need to move it higher up the page!

3. Discover if users see content above the average fold

The part of a website known as ‘above the fold’ is the bit that the largest majority of people will see upon landing—the ‘fold’ is simply the cut-off point at the bottom of a user’s screen before they need to scroll.

A scroll map automatically calculates the average fold on your page, for both desktop and mobile users (note: these will be very different!). By looking at scroll map average fold data, you can place important elements above the fold in a way that works across multiple devices, to improve user engagement as soon as visitors land on the page.

4. Figure out if users can find what they need

You’d be forgiven for assuming that the goal of optimizing a page using a scroll map is to get as many people as possible to scroll all the way to the bottom. But you’d be wrong. In some cases, users scroll because they can’t navigate your site to find the useful content they need.

5. Learn if your page offers a good cross-device experience

Users might not behave the same way on desktop and mobile. If you’re optimizing a responsive website (one that re-sizes the same page to each device), a scroll heat map will show you where users stop scrolling on mobile and desktop, so you can design a multi-device experience that works for all your users.

Scroll data is there to help you design pixel-perfect user experiences; you can refer to the heatmap data to find exactly where you need to place a CTA to capture users’ attention on desktop and mobile.

How to set up scroll maps with Hotjar

Setting up a new scroll map is easy; if you’re not already a Hotjar customer, grab yourself a free trial now to get started. 

When you create a new heat map in Hotjar, it will automatically generate all three heat map types (click, move and scroll), so there’s no need to do anything special to implement a scroll map.

H3: Step 1: add Hotjar’s tracking code to your website

You can install Hotjar’s tracking code in several ways, including via Google Tag Manager and WordPress plugin.

Step 2: enable 'session capture'

Continuous heatmaps are generated from sessions. When 'session capture' is enabled, heatmaps are available automatically and they start collecting user behavior data. So, you first need to verify that 'session capture' is enabled by clicking on the traffic coverage widget in the top-right corner of the page.

If session capture is not enabled, you will see an orange 'Session Capture Disabled' button at the top of the page, which takes you to the session capture configuration page.

Step 3: get started with continuous heatmaps and select your ‘data grouping’

Click on Heatmaps in the left-hand navigation menu:

Heatmaps can show data from a single, specific URL or from a group of URLs that match your targeting criteria. When showing data from a group of URLs, you’ll only see one screenshot for your heatmap, but the data that appears over the screenshot will be aggregated from all the URLs matching your targeting criteria.

Listed below are the five options that you can choose from:

• Single page

• Exact match

• All pages containing

• All pages starting with

• All pages ending with

To get more information about each of these, click here.

Step 4: enter a URL from your site and click ‘View heatmap’

Using the search bar at the top of your heatmaps page, you can view a heatmap for any page you've tracked by entering the URL here.

After entering a URL and clicking View heatmap, the Heatmap should appear in less than 90 seconds.

Step 5: select filters according to your heatmap criteria

Update the date range filter and add any heatmap filters to display only those sessions that match your criteria—depending on whether you want to see heatmaps showing certain user attributes—this could be the customer’s job title, country, and even language—duration, behavior, and more.

For more detail on all of Hotjar’s heatmap filters and example use cases, see our article: What are Continuous Heatmap filters?

That’s it: your first scroll map is live! Here’s how it will look from inside the Hotjar dashboard:

You can toggle your heat map to show desktop, tablet, or mobile sessions. To view the scroll map data, simply click ‘Scroll’ in the heat map type options. You can also view and download/export all the raw data. Have fun!