Heatmaps
Heatmaps provide visual description of how users are using your page.
Click Heatmaps
Click Heatmaps help in understanding a page's click pattern. With heatmaps, you can see the percentage clicks on each area of the page.
Heatmap Legend
- As is customary in heatmaps, red zones represent high activity, green represents moderate activity and blue represents low activity.
- Your primary CTA's should always be red-colored.
- A red-colored cross/dismiss button represents, users do not want to interact with that UI element and should be addressed
- You can filter your click maps with Dead Clicks from the button "Filter By" at the top right corner of the click heatmap.
Filtered by Dead Clicks
- You will notice that there are many clicks where there are no clickable. These are dead click zones.
- Often users randomly click in certain areas but a high density of clicks somewhere might be an indicator of UI issues where users are expecting something clickable and should be solved to improve the experience.
- You can filter your click maps with Rage Clicks from the button "Filter By" at the top right corner of the click heatmap.
- You will notice that ar many elements users are clicking frantically within a short span of time. These are rage click zones.
- Sometimes they are just harmless like on an Image slider etc. But, sometimes it indicates a grave issue like a button being too small or button not working or confusion. Read more about rage clicks here.
- When creating our Heatmaps we associate each click with a unique element and show these clicks overlaid where that same element is placed in the snapshot. Hence our heatmaps are accurate at every UI element level even if that element has a different position in every different screen size.
Scroll Heatmap
Scroll heatmaps have a simple purpose. They tell you until what depth most of your users visit. So that you can prioritize efforts.
All users who land on your site see the content at the top. This area is called "above the fold" content. The harsh truth is that a lot of these users never scroll further down. Invariably, this area of your page is the most important and scroll heatmaps will confirm that.
However, what is interesting and usually actionable, if you see a good proportion of your users scroll "below the fold". This usually implies your are above the fold content held your users enough for them to consider scrolling further. The goal then is to keep up the good work and hold their attention further down, until you reach the bottom of the page.
Ideally, you should have 100% users scrolling to the bottom of the page. Alas, we are yet to see a page that does that. While you strive to achieve that, you will find that scroll maps are your friends which tell you exactly how your page is performing in that regard.
Attention Heatmap
Attention heatmaps tell you which parts of your page are getting the most attention. Pay attention to this and you will know exactly what is working on your page and what is not.
- Above the fold content will usually have higher attention. This is because almost everyone who lands on your page gets to see that content.
- Some areas of your page below the field will be red. Typically this means this is more interesting in comparison to other parts of the page. Depending on your use case, you should consider promoting this content higher up on the page to deliver instant gratification to the users. If users keep getting the content they want to see, they are more likely to go further down.
- More important than promoting interesting content higher is to demote or remove uninteresting content. Users typically browse the internet with one hand on the back button. Try not to give them a reason to click on that.
This is our summary of how to use heatmaps. With Browsee, whenever you make changes to a heatmap, you can also compare it with the previous version to see how your new page compares to the previous ones using the compare feature.
You can apply a date range filter in order to change the dates for which you wish to see the heatmap. Also, if you are unable to find any data for your heatmap, it is recommended that you try increasing the date range to find the desired data. By default, it is set to "Last 7 Days".
To change the date range, click on the top right corner button.
Select the date range and click apply:
Last modified 7mo ago