How to Improve Scroll Depth with Heatmaps

I was recently asked by the awesome team at Slickplan abut how to improve the User experience (UX) of a website using heatmaps. Here’s my 2 cents on the topic:

Heatmaps are a great way to diagnose issues on your website pages and determine what to test to improve the user experience.

One great way to use heatmaps is to check the scroll depth of your content.

If you have a long web-page with important information below “the fold” (meaning a user needs to scroll down to see it) it can be helpful to utilise heatmaps to see where the drop-off point is.

Heatmaps can show you where users are stopping scrolling and abandoning the website. Once you’ve determined where the scroll depth is for your page, you can test different design elements to see how it improves.

You can also utilise this 100% free Google Analytics plugin to measure scroll depth in GA

A personal anecdote I’ve optimised using this methodology is background colours.

A client of mine was experiencing a drop off on their page. We identified the cause for the drop off using heatmaps. It was a section with a dark background.

We theorised that users were assuming the dark background was the beginning of the footer, and stopped scrolling.

Changing from a dark to a light background in this section improved the scroll depth and increased their conversions by 20%