If you want to analyse heatmaps, be sure to answer at least five questions. This makes sure that your analysis helps you optimizing your website.
Let’s start with the list of five essential questions that you can answer with heatmaps:
- Are people seeing important content?
- Are people clicking on page elements such as buttons, links, and CTAs?
- Are people confused about non-clickable elements?
- Are people getting distracted?
- Are people experiencing issues on different platorms (mobile, desktop)?
1. Are people seeing important content?
Start with by reviewing the position and height of the average fold on your scrollmap. This is the area that people see on their screen before scrolling.
The average fold helps you verify that people are accessing the most important information at once. The fold line is automatically differently on desktop and mobile devices, since they have different dimensions. If you have important content that is a little lower than the fold, this means that people won’t see it unless you capture their attention enough to make them scroll down.
Continue your analysis by looking at the whole scroll map and and analyzing the percentage of visitors who make it to particular page points. This data can be especially useful for longer pages such as landing pages that contain a lot of information. For responsive websites this is an important cue: check how the rearranging of elements is working: often, elements are simply stacked and end up below each other. This makes a page longer and visitors need to scroll more. We’ll discuss this further under question 5.
Also, be on the lookout for changes in color on the scrollmap. These are signs that people have stopped scrolling. They might think they have reached the end and and just didn’t think that there is more content below.
Scroll map information will give you enough data to see if key information is being ignored by your users.
2. Are people clicking on the key elements of pages (links, buttons and CTAs)?
A scrollmap can help you determine if people see certain content elements. A click map quickly confirms whether users are clicking on them.
Your website is there to help users achieve goals like finding information, signing up for a service or purchasing a product. When looking at a click map, pay attention to the main calls-to action (CTAs), likes buttons and links that allow users take those actions. Are these elements being clicked or, in the case of mobile, tapped? What amount of interactions are they getting? Do user ignore something that you would like have to click, tap respectively?
This insight can be used to make quick design changes or justify more detailed user research, e.g., with A/B testing. You can refer back to the clickmap to see the behavior of visitors and determine if the new design is successful.
3. Are people confused about non-clickable elements?
Users who click on non-clickable elements and expect to be taken somewhere else can be frustrated or confused.
For example, people might click on testimonial logos. This means, they expecting to start an interaction. This is no coincidence: we’ve trained people over many years to click on symbols, i.e., icons. When this not working, it can add a small amount of frustration and uncertainly what works on your website and what doesn’t.
This type of behavior might be indicative that you need to make some visual adjustments to distinguish clickable elements from non-clickable ones, or add links to existing pages.
4. Are people getting distracted?
Multiple web page elements competing for attention can lead to users losing focus on the most crucial action(s).
Check heatmaps of mouse cursor moves and whether cursor activity spreads across the page, rather than being focused on key messages and call to action buttons and links. You may also need to examine the pages for areas that are not receiving interaction.
A quick note here: this kind of investigation doesn’t works for smartphones – for the obious reason that there is typically no mouse available.
5. Are people experiencing issues across devices?
Mobile and desktop users can have very different experiences with your website. Important to notice that content which is visible immediately on a desktop may end up below the fold on a smartphone. Therefore, on smartphones, less users will see it. Vice versa, your page content might look smaller and more well-organized on a mobile device but very sparse on large screens.
Make web traffic comparisons on mobile and desktop scroll maps of the same page to see if people are consuming more/less content depending on the device they are on; pair scroll maps with click maps to see if clicking behavior changes and people interact more/less/differently on desktop versus mobile. If you find any obvious differences, you have to redesign your page. Like mentioned above, this can have a lot to do with the way responsive pages reorganize themselves on smartphones. The standard stacking method can be unfavourable, so you might even have to consider more advanced responsive behavior. For example, you can start replacing elements with mobile optimzed ones or even serve a completely different version of the website. The latter is certainly a matter of last resort and not an easy choice to make, because of this additional cost that such a solution entails (both, in terms of development and maintenance).
Get in touch with us and learn how to create a heatmap for your website and how to analyse it.
Source: hotjar
