Scroll heatmaps give you an idea about how much of your page is visible to visitors.
Each section provides statistics about visibility and time spent – either viewing or interacting with different parts of the page.
A great example of an insight from the Scroll Heatmap is when key page content is located in a low-visibility area.
Let’s face it: you don’t know how visitors will browse. But, a scroll heatmap shows you, in aggregate, whether people are able to see/interact with content as you expect.
For example, a call to action button is almost always best suited in the top fold of your page. But, not all layouts look this way.
A typical checkout screen will have a “Submit” or “Pay Now” button in the lower-right corner. This, unfortunately, results in cart abandonment as users don’t see how to proceed and leave the site in frustration.
Another common problem is that websites will have a large footer (at the bottom of each page) with links that go unseen for most visitors.
If these links are important (like pricing/contact), they may be more effective in the menu bar or on a side panel which receives more attention.
We recommend you look at your scroll heatmaps and see if they make sense.
Here are some questions to ask:
Is key content (that supports the goal of each page) visible above-the-fold?
Is there sufficient time spent either viewing or interacting with parts of each page that are important? If, for example, you have a form and there is no red around it, consider relocating it.
Thank you for reading! We hope that this can help you to get the most out of your scroll heatmaps. Check back for our next tutorial blog series on filtering!
Movement heatmaps focus on where users navigate their mouse on your site – it’s a great measure of attention and engagement.
This is insightful because you can gauge whether the key areas of a page receive adequate attention.
Below, you can see that most of the user attention on our site is focused on the video and top links (white areas). This is optimal, but there is also significant activity over the text above the video (red areas). We do not want this to be a distraction from our main call to action on the page, so balancing this movement activity is critical. This is where effective design, layout, typography, and color choice come into play.
In practice, the optimal page layout is dependent on visitors and how they behave. We tell clients to focus on one main goal for each page. Then, in each movement heatmap, make sure that content which supports that goal is located in the “hot” areas. This will improve usability and boost conversions.
We recommend you look at your movement heatmaps and see if they make sense. Here are some questions to ask:
Are there “hot” areas over content (buttons, links, text, etc.) that supports the overall page goal?
Are there “hot” areas over content (buttons, links, text, etc.) that detracts from the overall page goal?
Are there “hot” areas of equivalent size over each form field? If not, does having less activity make sense for some fields (optional comments, etc.)?
Are there “hot” areas over content that isn’t well explained/elaborated upon in the content? If so, visitors might be interested in learning more. Next week, we’ll walk through scroll heatmaps. Stay tuned…
A click heatmap is valuable to show the effectiveness of links throughout your site.
Whether a link is part of the main navigation, text content, or a multi-step form, you need to know whether it helps or hinders usability.
On our home page, the links in the main navigation receive the most clicks. You can tell because there are clear areas of hot (white) activity. However, there are also areas where it doesn’t make sense to have clicks. This happens because visitors are confused or have an expectation that something is clickable (for more information) when, in reality, it isn’t.
In our page, the call-to-action buttons are the main focus. We want people to click them. If other text or areas are a distraction, it kills our conversion rate.
So, part of great design is making sure that a page has everything you need and nothing more.
Although our pages have a lot of elements, they used to be much more complex. We spent time running A/B tests to determine the optimal layout that balances clicks to the locations that we want.
We recommend you look at your click heatmaps and see if they make sense.
Here are some questions to ask:
Do important page elements have click activity?
Do unimportant page elements have click activity?
Are there certain elements, relative to others, that receive more activity? Is there a good reason for this?
Do you need to reorganize/reorder the links in your main navigation to draw focus/attention?
Do form fields receive equal amounts of click activity? Or, are there certain fields where there is considerable drop off?
Next week, we’ll walk through movement heatmaps – perhaps the most useful for analysis. Stay tuned..
We’re excited to announce a new feature — you can now adjust the playback speed of recordings!
This lets you easily speed up or slow down playback to fit your needs.
To get started, follow the steps below:
Login to the Dashboard, click Recordings, and click to play a session/recording. In the top bar, click the “Speed” selector. You can choose a 1x, 2x, 4x, or 8x speed. At Mouseflow, we’re always looking for ways to enhance our playback suite.
Have a idea for a new feature? Tell us about it here.