What is a Scroll Heat Map

The Scroll Heat Map

Heat maps in general, represent how your users interact with your website through a visual color indication or key (see our full blog on click heat maps here). They typically provide a broad, horizontally-based view on what elements of your site’s current design are interacted with the most. And this translates readily into actionable business intelligence.

The scroll heat map is the same concept, but a provides a slightly different dimension. The scroll heat map visualizes vertically, by steps, what percentage of users see “x” percentage of vertical space. The key with the scroll heat map, is that it aggregates that data across all platforms, taking into account all devices, mobile, desktop, and tablet, so a true assessment of the averages of all user-experiences are combined. And the results can be game-changing.


As designers and hosts of what we think is great content, we often (sometimes blissfully) ignore the fact that most visitors won’t read a given page on your website from start to finish, or make it from the top to the bottom, as it were. Instead, we all skim the contents, stopping to read content which “pops”; it either stands out in some exemplary fashion relative to its surroundings, or it emphasizes a point with which we are particularly concerned. A scroll heat map reveals where visitors to your website usually stop scrolling for long enough to read the contents.


With the current prevalence of mobile connections and mobile now representing over 50% of web traffic, the nature of “the fold” has also changed. It still exists as a meaningful concept, but websites now have more than one fold which also changes proportions and layout relative to various users and platforms. The job of the visual space above the fold is immediate engagement: serving to capture a customer’s attention span, to hold it, and invite them to pay more attention to the contents, call to action, or the next interesting section of the page. If valuable content is placed below the fold; the contents above it, then, must encourage a visitor successfully to stay and look for it.



In addition, many visitors to a website lose focus and attention once they’ve scrolled past the header. Having gleaned an initial impression of your site’s appearance, they skim the remainder of its contents more distantly.  On average; there can be a 10% drop in user attention per vertical inch scrolled below the fold (the area of a website’s content which is initially visible without scrolling). And it can be much worse. We see from 10% up to 80% drop in the first 50 pixels. This underscores just how important great above-the-fold design just is and may reveal that the video or call to action you thought was best part of your home or landing pages, may actually only be seen by a small percentage of total visitor. When we spend time to frame, design and develop our key landing pages, the biggest mistake can be assuming they are effective (or even being seen). A scroll heat map will tell you just that and enable your team to take the necessary steps to upgrade that user-experience and re-test. There is no substitute for the data!

The scroll heat map, coupled with the findings from other types of heat maps, such as click and eye-tracking, the information generated by a scrolling heat map will enable a professional content strategist to devise multiple new avenues toward digital marketing success. You can always try our heat maps for free by checking out the try heat maps free page, and as always, let us know how we can help and good luck!