How to read a heatmap?
When you look at a heatmap, don’t take anything for granted. Save some time to have a profound look. Find heatmap settings and try to answer these questions:
- Is this the thing my users had actually seen?
- What does the heatmap show me exactly?
- Is this a mobile or desktop view?
- What is the resolution of the page shown?
- Is this a single page or grouped pages view?
- What types of events does the current view present? Are these events clicks, movements, or experience measurements?
Heatmaps, by default, show a generalized, summary view of user actions. To see more details and analyze specific use scenarios, you need to change heatmap settings. When you open a heatmap, don’t stop there. Review specific resolutions, at least.
The default heatmap view in CUX is the desktop view. If you need a pixel perfect view – and trust us, you need it – you should select a required resolution in heatmap settings. You can start by finding out which screen resolutions are the most frequently used by your site visitors. Next, adjust the CUX heatmap settings to see what happens when people see your pages using this resolution. Some of CUX customers also check the resolutions that get more and more popular to make sure their content works well for emerging technologies.
Why does the click heatmap look rugged and messy?
We often get the question about the heatmaps showing uneven borders for areas and irregular clicks. And we always reply that it’s about precision.
The nicely looking heatmaps are the effect of overgeneralization. For example, if you have a button on a page, the overgeneralized heatmaps show you clicks at the center of it. The same happens for images. The reality is never beautiful. It never happens that all buttons, images, or other page elements magnetically attract mouse cursor to their center.
Our heatmaps show specific clicks. The exact clicked places. And bring you to a whole new level of understanding.
Making decisions based on the precise heatmaps
Are buttons, links, and other active elements easy to access? When people are unable to access page elements, they won’t use them. What if that was a “Buy now” button? Can you afford not to know that your conversion call to action doesn’t work? Think about how important that knowledge is for mobile devices, where depending on the device grip style, people might have problems tapping elements that are out of their fingers reach. Watch out for heatmaps showing a button that often gets clicked close to its edges or on one side only. Think if this is an indication that you should change the element placement on the page.
Are people highlighting text on your page? Verify if numerous clicks on a specific piece of text are related to copying text. The most obvious indicators are clicks before a piece of text, for example, at the beginning of a line. This often happens for:
- Email addresses that aren’t active links
- Promo codes
- Street addresses
- Any piece of text that needs to be used or pasted elsewhere
Is something particularly engaging for your users? It sometimes happens that even images that aren’t linked receive clicks. Sometimes the number of clicks is so significant that we’re showing it on the heatmap. Think of this as an opportunity that wouldn’t normally appear in your business brief. Let’s assume you run an e-commerce site where you sell clothes and accessories. One day you find out that a static photo on a product page gets clicks. Get a closer look – where do the visitors click? Is this a watch, a bracelet, or a cardigan that is clicked. If you have it in stock, you’ve just found an excellent opportunity to cross-sell your products!
Note that heatmaps don’t show any dynamic elements. A heatmap is always a snapshot of the default state of your page. Elements like pop-ups, tooltips, modal windows, drop-downs don’t appear on the heatmap view. However, we’ll show clicks that those elements received. When you see unexpected hot areas, think if a dynamic or temporary page element appears there. Do not mislead those areas as rage clicks. Our algorithms understand your page behavior and can distinguish clicking on a dynamic page element and angry behavior.