Heatmaps

TABLE OF CONTENTS

• What is a heatmap?
• Heatmap page
• Heatmap Overview
• Grouping Heatmaps

What is a heatmap?

Technically – what is a heatmap?

A heatmap visually represents the most impactful user interactions on your pages. Each activity, whether it's a click or mouse movement, contributes to the intensity of a specific area. Any recorded activity makes an area hotter. The places where users click to move their cursor most often are marked as hot areas. The places where users perform less actions are shown as colder green and blue colors. Regions without colors indicate no user activity in those areas.

Sometimes people get frustrated, and they click somewhere a hundred times just out of anger. CUX heatmaps can show you that as well. For more information on angry clicking, see Types of heatmap events and parameters.For more information on other types of user activities, see Heatmap overview.

What does a heatmap show me?

CUX heatmaps can show you the most valuable things that happen on your website:

1.    Where users click

2.    Where they move their cursor

3.    Where users don’t click (but were supposed to click)

4.    Are there clicks on elements that aren’t links?

5.    Are visitors clicking out of anger or frustration?

6.    What elements are being zoomed in or out?

7.    Are there broken elements on the page?

Heatmaps can be your website debugging help:

1. You can find clicks on broken links or other elements that are supposed to have a response on click (dead clicks and rage clicks Heatmaps).
2. You can identify missed opportunities to have links (dead clicks on non-clickable elements like icons or headers).

Why I can’t access some of the heatmaps?

Heatmaps are created out of user activity. We need to record and collect enough user clicks and mouse movements to show you meaningful results. The more visits to your page, the better the heatmaps are. You’ll see this yourself as time passes by, and the heatmaps show more reliable data.

Heatmap page

All available heatmaps can be found on a Heatmaps page in an app. But besides a list of URLs this page offers a few other features that will make your analysis faster and easier.

Here’s what you'll find on a Heatmaps page:

List of Pages: This section displays every page from your site that was visited at least once within your retention period.

Devices: It lists the devices on which the page was loaded. You can click on a device icon to jump directly to its heatmap. Some icons may be inactive, which occurs when CUX doesn't have enough events to generate a heatmap for that device.

Experience Metrics Events: In addition to regular clicks or cursor movements, CUX provides heatmaps for specific Experience Metrics like Rage Clicks, Zooming, and Dead Clicks. If there are enough events to generate a heatmap, the icon will be active. This allows you to investigate the source of frustration or a poor user experience.

Show Button: Click this button to view a heatmap for a selected page URL.

Events Filter: Use this to filter pages that have received a selected type of Experience Metric event.

Devices Filter: This feature allows you to filter heatmaps available on a selected device.

Page URL Search: Type in a relative page URL or part of it to search for specific heatmaps.

Grouped Heatmap Feature: For more information about this feature, refer to the dedicated section below.

Heatmap Overview

Our heatmaps are not just a visualization of high and low activity areas on your pages. It also contains a few features that will help you to analyze your users behavior with even more precision and efficiency.

To the left of the heatmap, you'll see a panel featuring:

1. Events

You can display heatmaps for various events on the website. Choose between:

Move: shows you where users moved their cursor or touched the screen on mobile devices,

Click: shows you areas where users clicked,

Link: shows clicks on links on the page (note that some of the clickable elements on a page may not be links),

Rage Click: shows areas where users clicked rapidly and repeatedly,

Dead Click: shows clicks on elements that received no response,

Zoom: shows areas where users were zooming in or out. 

2. Devices

CUX collects data for various devices where your customers interact with your website or product. Display heatmaps for:

• Desktop,
• Mobile,
• Tablet,
• Smart TV,
• Console,
• Wearable,
• Embeded Browsers.
  
  

3. Date
You can view heatmaps and analyze user interactions with the website/product from any time range (depending on the retention period you choose in the subscription).

4. Heatmap Layer

You can freely customize the appearance of the heatmap to make drawing conclusions easier.

• Opacity. Increase or decrease the transparency of heat areas to adjust visibility to your needs. 
• Intensity. Find precise user activity points. Increase to find exact click points (if there are lots of events) or decrease to see places of activity better (if you have fewer events). 
• Spread. Adjust to focus on single areas. Low spread is recommended for high-traffic pages, high spread for low-traffic pages. 

5. Reset

Use reset option if you’d like to return to the default state of a heatmap.

6. Search
Use the search field to find any element on the page that interests you. You can use elemets’ xPaths or classes.

7. Elements

Analyze the list of all the elements that users interact with. On the left of the element’s Xpath you’ll see the percentage value which indicating the proportion of events associated with this element compared to others on the page. Hover over this value to see the exact number of events. Use the icon next to an item to copy its xPath. After hovering over any element’s xPath, the heatmap will highlight it with a pink square. It's important to note that dynamic or conditional elements, such as menus, pop-ups, or tab content, may not be highlighted if they are not currently visible in the visualization. Nevertheless, CUX consistently offers the most up-to-date visualization of the page.

8. Manage

Here can find additional functions that will help you to analyse heatmap easier:

• Full screen - opens a heatmap layer on a full screen without side panel.
• Find another preview - this feature allows you to refresh a website preview if it doesn’t meet your expectations or appears broken.
• Learn more - a shortcut to this article in Knowledge base, allowing you to revisit the detailed walkthrough whenever you need.

Grouping Heatmaps

A grouped heatmap shows you data aggregated for several pages. The grouped heatmap works like a regular heatmap with all its features, but the hot and cold areas are shown for more than one page.

When to use grouped heatmaps?

Grouped heatmaps help you overcome technical constraints. They also add a different angle to your observations.

• Aggregating pages listed separately
  It happens that visitors land on your pages using links embedded on different sites. One example of this is social media, Facebook in particular. Each time you share a link to your site on Facebook and someone clicks the link there, Facebook adds a unique fbclid parameter to a URL a user lands at. For CUX, each of such URLs will be considered a separate page, and each of them will be presented as a separate heatmap on the Heatmaps page.
  
  
• Aggregating pages based on a single template
  Frequently, our websites comprise numerous pages that closely adhere to a common template. These pages maintain consistent layouts and object placements, with the primary distinctions lying in the variation of images and content. Despite slight differences in URL patterns for each page, they share a fundamental structure. In the case of an online store, this could encompass product pages or category listings, while other websites may include blog articles, user profiles, job postings, and various other content types.

In both scenarios, analyzing individual heatmaps for each page can be counterproductive. Whether you're interested in assessing webpage activity regardless of traffic source or evaluating the effectiveness of your layout across a group of pages, a grouped heatmap offers an efficient solution. It allows you to swiftly gauge overall user interaction trends and the performance of your layout across a set of similar pages. This consolidated approach streamlines the analysis process, providing a quick and comprehensive overview of user behavior and engagement patterns across the designated group of pages.

Grouping pages into single heatmaps

To create a grouped heatmap perform the following steps:

1. Go to Heatmaps.
2. Click "Grouped Heatmap". This opens a panel where you can select grouping conditions.
   
3. Select a grouping condition. You can use one of 5 options: Contains (selected by default), Starts with, Ends with, Matches, and Regular expression. Each of the conditions is a shortcut that allows you to skip entering full URLs.
   
   
   
4. Enter a part of the page addresses in the Search by URL field. You have a few options:
   1. Simple text. Good for fast grouping of pages with simple URLs. Works for conditions: Contains, Starts with, Ends with, and Matches.
   2. Wildcards – an asterisk (“”) Good for fast grouping of pages whose URLs have a similar beginning, ending, or middle - works with any condition.
   3. Regular expressions (regex). Good for grouping pages whose URLs are complex or change dynamically - works with Regular expression condition.
5. Click “Show grouped results” button to jump to your grouped heatmap.
   
   Note that when you enter values into the Search by URL field, the table in the background shows a filtered list of addresses. This gives you a preview of the page addresses selected for grouping. You can also see how many pages were found within your filter pattern:

CHEATSHEET: 

1️⃣ Wildcard examples

URLs with similar ending –/myshop/*. 

URLs with a similar beginning – */category/page.html

URLs with similar middle – /myshop/*/page.html. Useful when you want to skip part of the address, for example, category names. 

2️⃣ Regex example

Home page The home page is represented by the backslash symbol (“/”). Each of the page URLs for which we generate heatmaps contains the “/” symbol. To find URLs matching only the backslash, use the following regexp: (^/$|^/?.*)

Visits directly to the homepage, with and without parameters. Data we gathered for 3 different pages are going to be combined into a heatmap. Regular expression helps you to precisely select pages for grouping.