See how far users scroll and get stakeholders on the same page
UX teams and designers often have to make tough decisions about where to place content and features for maximum engagement. With stakeholders across your business fighting to get their features in front of customers, it can be difficult to determine what to prioritize on any given page.
You need to serve relevant messages to your customers at the right time to guide them on their buying journey; of course, you need to balance this with promoting and testing larger business initiatives. In these scenarios, heatmaps can help you find alignment.
Heatmaps translate behavioral data into clarifying visualizations. They provide a picture of real visitor engagement and reveal, in aggregate, how users interact with your page designs. With a clear view of user interaction, your whole team can quickly understand whether the design is effective (and where you may need to adjust).
Scroll Maps are a type of heatmap designed specifically to show how far users scroll down lengthy pages.
You can use Scroll Maps to answer questions like:
- Are visitors primarily seeing content "above the fold" or do most visitors scroll deep into a page?
- Is anybody seeing those visual assets our team spent a ton of time designing for our homepage?
- Should we adjust the hierarchy of content on our new product detail page to make sure visitors see the most important points?
- How does typical scroll depth compare for visitors on web vs. mobile? How should we adjust our design accordingly?
How do FullStory's Scroll Maps work?
Within FullStory, the Page Insights mode allows you to see quantitative data, in aggregate, for the specific pages that come into view while you're playing back any user's session. Scroll Maps give you a new type of insight based on the depth of visitor engagement. When the Scroll Maps feature is active, FullStory detects the page in view and generates stats based on the maximum scroll depth for all views to that particular page.
Every Scroll Map includes a color gradient overlay that allows you to see, at a glance, where drop offs happen. This is valuable for understanding exactly where users lose attention and how you should prioritize content in terms of hierarchy.
For example, maybe your checkout button is the most important call to action on your page. You can use Scroll Maps to verify that this CTA stays within view for the segment of users you've defined.
Here’s how to get started with Scroll Maps:
First, find any session in FullStory and hit play. From playback, click Page Insights to open the Click Maps view.
From there, click on Scroll Maps and then place the map marker at any point on the page to see, in aggregate, how many visitors scrolled to that depth.
Hot tip: To quickly refine session results based on a page URL or specific audience of visitors, start by using FullStory's search and segmentation builder, OmniSearch, to narrow down a segment of sessions. You can build a segment of visitors for a specific page or slice and dice by additional data such as the device type or location.
Then, when you hit play on any session in your new segment, the Page Insights results will dynamically update related to your segment criteria.
Note: Scroll Maps work best for pages that are contained from top-to-bottom with no infinite scrolling or sections with their own independent scroll behaviors. That means they usually aren't ideal for single-page apps with lots of sections that scroll on their own or any page where you click a "Load more" button to fill in more items.
If you begin to access Scroll Maps from a page that includes internal scrolling components, you'll see a gentle warning in the app before you generate results. Visit the Page Insights User Guide to get more information.
Try Scroll Maps today
Scroll Maps are live now for all FullStory customers on all plans. They were launched in response to customer feedback so keep the requests coming! We would love to hear how you're using Scroll Maps and what you'd like to see from us next. Send your thoughts over via email to: email@example.com