Scroll Maps: 5 Ways to Optimize UX And Increase Conversions Scroll maps: 5 ways to optimize UX and increase conversions

January 15, 2019 by Fio Dossetto

Heat maps are a powerful visual tool for tracking user behavior on your website or app and understanding how visitors interact with pages and page elements.

When you want to find out things like where you’re losing people’s attention or where you should focus visitor engagement, 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 UX improvements, make changes, and ultimately increase conversions.

After all, happy users are good for business.

By the end of this post, 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 insights that will supercharge your user experience.

Table of contents

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. Scroll maps can be collected on desktop, mobile, and tablet and color is used to represent the most and least viewed parts of a page, from hot (popular) to cold (unpopular).

An example of a scroll map

An example of a scroll map

Scroll maps aren’t just about color: percentages are given 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.

 

🏆See it in action: here’s a live scroll heat map example we ran on a previous version of our heatmap guide.

Scroll maps vs. heat maps

a scroll map and click heat map comparison

A scroll map (left) and click heat map (right) of the same landing page

Heat map (or heatmap) is really an umbrella 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 or app 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.

 

Set up a scroll map today 🔥

Grab a free Hotjar trial, pick your most important business page (homepage, pricing, etc.), and find out how your users scroll through it!  

Free forever. Get started!
 ScrollCTA


Note:
when you set up a heat map in Hotjar, the tool automatically collects data for all three heat 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 visitor attention

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

07-scroll-heatmap

If your goal is to get users to scroll further (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 design or copy to make that behavior more likely.

 

🏆Pro tip: combine scroll maps with individual user session recordings to watch how people actually interact with the page.

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 users. Using a scroll map, you can ‘depth test’ your pages to check for false bottoms.

A quick case study: 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. If we want more people to see that element, we need to move it higher up the page! 

A scroll map of hotjar's careers page

A scroll map on Hotjar’s careers landing page

3. Discover if users see what’s above the 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 devices, to focus 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 find what they need.

Case in point: UK-based digital agency Epiphany improved their client’s e-commerce site by adding filters to category pages after scroll map data showed users having to scroll too much to find what they needed (here’s the full heatmap case study).

Sometimes, with design, less really is more.

 

🏆Pro tip: to get more information about user behavior, you can set up an on-page survey and ask a question like “did you find what you were looking for today?” This qualitative data will give you an extra layer of context when reviewing your heat maps.

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 cross-device experience that works for all your users. 

In general, mobile-optimized pages tend to be shorter, but don’t blindly follow best practices: collect your own scroll map data and find out how your visitors are behaving.

data table for a scroll map

This data from a mobile scroll map shows only 50.9% of users (fourth COLUMN) scroll beyond 3,276 pixels (second COLUMN). That’s valuable info!

Scroll data is there to help you design pixel-perfect user experiences; you can refer to the data to find exactly where you need 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.

Once you're logged into the main dashboard, navigate to the Heatmaps section to get started.

1. Select “New Heatmap”

create a new scroll map

It’s the big green button, you can’t miss it.

2. Name your new heatmap

 name your scrollmap

Choose a descriptive name like Homepage v1 November or Blog post Jan-6 so you can quickly identify it later.

3. Pick the number of pageviews to capture

pageviews for scroll map

You can set up your heatmap to record data from 1,000, 2,000, and 10,000 pageviews depending on the plan you’re on. Your heat map will be visible from the very first pageviews, so you don’t need to wait around for the limit to be reached before taking a look.

4. Select the target page(s)

target pages for your scrollmap

You can place a scroll map on just one specific page, or collect data between multiple ones.

Remember: only a single scroll map will be generated, so if you select multiple pages make sure they have the same basic layout. Multiple page tracking is ideal for sites with a large number of low-traffic pages (e.g., product or category pages).

5. Click “Create Heatmap”
create a scrollmap


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

scroll map 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 all the raw data. Have fun! 

 

Set up your scroll map 🔥

Pick your most important business page (e.g. homepage, pricing), grab a free Hotjar trial, and find out how your users scroll through it.  

Free forever. Get started!
 ScrollMap

Join 20,000+ marketers and designers who receive our blog posts in their inbox

Fio Dossetto

An ex-academic turned editor, Fio manages editorial production at Hotjar and occasionally writes about UX, optimization, and how to keep remote teams organized.

comments powered by Disqus
Back to top