Heatmap Alternatives You Need in Your Stack: Click Trends

Understanding your users was never an easy task. It goes without saying that asking them specific questions sometimes reaps dubious results as we (as in human beings in general) are notoriously biased when asked about negative experiences lest we offend someone. Another problem is we rarely know how to describe something in a way that is easily understood by the other party. This is why aggregated data in web analytics tools such as heatmaps has been helping UX analysts do their jobs with far greater precision than when only relying on customer feedback or basic web analytics. With the advance of digital analytics tools, though, we have arrived at a place where regular heatmaps just don’t cut it anymore and we need heatmap alternatives. Enter Click Trends – our very own interpretation of the most important clicks in the digital ecosystem of your product. They help you get an overview of what’s going on sitewide, not just specific pages like with heatmaps. Let’s dive deeper! 

Heatmaps: A History Lesson

Heatmaps (or heat maps) are not a new invention – they were originally used in 2D displays to visualize the values in a data matrix as far back as the 19th century. Toussaint Loua visualized social statistics across the districts of Paris using a shading matrix in 1873. To represent larger values, he used small dark gray or black squares (pixels), while lighter squares were used for smaller values. 

In 1991, software designer Cormac Kinney trademarked the term ‘heat map’ to describe a 2D display that depicted financial market information. However, the company that acquired Kinney’s invention in 2003 allowed the trademark to lapse unintentionally so the term was up for grabs. 

Today, we have added another definition and use for heatmaps as part of UX analysis to gain visual insights into user interactions with your website. 

The Importance of Heatmaps in UX

UX analysis goes deep inside the customers’ heads. To do that, UX analysts and designers need tools that not only show them numbers but also visual cues as to what’s happening on their website or in their product. Heatmaps are one such tool for data visualization that aggregates the user interactions on a specific page and renders them as graphical representations with color-coded values based on the frequency of occurrence of the different actions. There are several tracking components of heatmaps, and various products provide them separately or as a package: mouse movement tracking (also known as hover maps, these show how the cursor moves on the page), scroll tracking (how far down the page users scroll in percentages), and click tracking (where and how often users are clicking). 

How do they work?

Heatmaps are created by overlaying a transparent grid on top of the web page or application and tracking user interactions with each grid cell. The cells that receive the most interactions with your website (a specific page) are represented by warm colors, such as red or orange, while those with fewer interactions are represented by cool colors, such as blue or green.

The underlying technology behind heatmaps is usually JavaScript code that is embedded on a web page or application. This code tracks user interactions and sends the data to a server, where it is aggregated and processed.

To create the heatmap, the server generates a visual representation of the aggregated data using the color-coded gradient mentioned above. Heatmap tools typically use a combination of client-side and server-side technologies to ensure that the tracking and rendering of the data do not significantly impact the user experience. For example, some heatmap tools use asynchronous JavaScript code to ensure that user interactions do not delay the loading of the web page or application.

But why do we need heatmaps alternatives?

The technology of heat mapping sounds pretty good – so why do UX analysts and designers need alternatives? A complex question to answer, as it demands we first explore the limitations of the technology and how they impact UX analysis at scale.

Heatmaps Limitation #1: Limited Insight & Context

Heatmaps provide a broad overview of user behavior, but they do not provide detailed information about user intent or motivation. A heatmap may show that users click on a particular link frequently, but it may not reveal whether the link is working as expected or whether they are encountering any issues or frustrations along the way. Or a heatmap may show that users are clicking on a particular button frequently, but this doesn’t reveal what they expect to happen when they do. 

Heatmaps imitation 2: Size Matters

We are in an age where users enter websites and apps from a variety of devices, each with its unique screen resolution. How do you render this in a heatmap? Well, you can do an approximation only, segmenting users into separate ‘buckets’ based on their screen size. Those with higher resolution are available on one heatmap, and those with another – on a different one. Not ideal if you really want to focus on aggregated data… Heat mapping tools are also bad at capturing large file size pages.

Heatmaps Limitation 3: Limited Data

Heatmaps are based on quantitative data, such as the number of clicks or scroll percentage, but they do not provide qualitative insights into user behavior or motivation. This is not exactly a limitation as no analytics tool provides the full picture and all data points – but it’s worth noting that heatmaps are relevant only in specific cases. Alternative approaches, such as session replay, or user surveys, may provide more nuanced insights into user behavior and motivation that cannot be captured through quantitative data alone. 

Heatmaps Limitation 4: They Don’t Dance

Static web pages are so 90s. Instead, web pages and applications are dynamic, with features such as animations, slide-out menus, and pop-ups. This presents a challenge for heatmaps, as they do not work well with dynamic applications where the page changes frequently. This is particularly problematic for single-page applications with heavy JavaScript use, but it also affects server-rendered websites with data-driven content. The location of clickable elements can vary based on various factors, including the user’s scroll position and other unpredictable factors, making it difficult for heatmaps to accurately track user behavior. In a nutshell, dynamic content, iFrames, hover-state menus, and some types of scrolling cannot be captured for heatmap analysis. 

On top of that, heat mapping tools can be very resource-intensive and may slow down your website or app.

So, what heatmap alternatives are available? Many UX designers combine the usage of heatmaps with many other tools to gain a complete understanding of the user experience. Let us introduce you to something you might be missing in your stack that can complement – or completely override the need for – heatmaps.

Meet Click Trends

When we embarked on the journey to build SessionStack, our primary idea was to make it easy to not only understand that there is an issue – but see exactly where the issue is. Every feature of our Digital Experience Analytics Platform is created with that in mind, as well as with the idea that we don’t want our users to struggle with our platform (why add more pain to their existence?). 

Thus we arrive at the hero of today’s article – the Trends dashboard. It was born out of the necessity to combine quantitative data in an easy-to-read format. More often than not, product managers, engineers, and UX designers don’t have the time to scour 20 reports on a daily basis just to make sure everything on their website or app is going well. Trends provides them with that knowledge in one simple dashboard. Apart from the user and session-level data, we incorporated in our solution an alternative to traditional heatmaps (click maps in particular) – Click Trends.

What is Click Trends?

Click Trends is a combination of three charts within the Trends dashboard: 

• Most Clicked Elements

This chart gives you an idea of the elements users click on most – for all time, or for a specific period of time. This information will show you which elements deserve the most attention, aiding in conversion optimization and driving more engagement.

• Rage Clicks

Don’t you love the name of this chart? A rage click occurs when a user performs multiple quick clicks on the same element in a row. Among the possible explanations are: the user does not understand which element is clickable; buttons, links, and icons do not function properly; the user is unable to click because of the invisible overlay above everything. 

• Dead Clicks

Dead clicks are clicks or taps that do not affect the page with changes such as DOM events, URL changes, or Console Log Events. Reasons can vary – some portion of text appears to be a link or clickable but is not, an image appears to be expandable but it is not, or a button does not work correctly. Oftentimes, dead clicks result in rage clicks. This data can give you an insight into user expectations as well as if something’s just not right.

How do they work?

Click Trends is part of SessionStack’s tagless autocapture platform – apart from installing the custom script snippet provided upon registration, you do not need to do anything else to start using them. The charts will show you automatically the CSS of the element, on which page it is located, and how many users are affected by it. You can also use the information gained from these charts on other parts of the SessionStack platform, such as Segments and Session Replay.

Advantages of Click Trends

While Most Clicked Elements may show you opportunities for improvement, Rage Clicks and Dead Clicks are valuable frustration signals that, when monitored proactively, may be used to prevent a major disappointment from the user journey.

• Deeper insights into user behavior

Traditional heatmaps use aggregated data from a single page – and as we mentioned earlier, even this aggregation has its limitations. With Click Trends, you can view sitewide trends in one place which helps you spot friction points or opportunities for improvement right away, without having to check different web analytics dashboards to uncover the truth. And unlike heatmaps, SessionStack’s platform captures and analyzes user interactions on same or cross-origin iFrames, as well as pop-ups.

• Easy identification of frustration signals

Unlike traditional heatmaps, Click Trends give you an immediate insight into your website’s problematic areas. You can spot an increase in rage clicks or dead clicks right away, without the need to investigate complex journeys. Monitoring unexpected user behaviors might prove crucial in your usability optimization strategy and with Click Trends, you are covering a major blind spot.

• Better decision making

Equipped with this information, you can make decisions more quickly. If there is a problem, you can share it with the people who will be working on it right away. This is especially important for product managers who need to communicate the issue to the engineering team without wasting too much time.

• They play well with other analytics tools

Cilck Trends can be bundled with other types of analytics tools such as funnel analysis (for easier understanding of the user journey), and session recording and replay (for visualization of what exactly happened during the affected session). Doing this will bridge the gap between reading the analytics tarot and transferring the knowledge to an action plan for improvements. What’s more, including a brief overview of Click Trends data in your daily routine can help you observe opportunities for conversion rate optimization in real time, as well as fix bugs before they become major usability issues.

How do Click Trends compare to heatmaps?

While heatmaps provide a visual aggregation of quantitative data, SessionStack’s Click Trends provide a holistic view of specific website signals that can guide decision-making on a daily basis. If we have to describe them as an art style, heatmaps look like impressionism while Click Trends provide the attention to detail of pointillism. 

Depending on your use case, you might need only one of the tools – or both. For example, if a UX designer is focused on optimizing a specific website page and needs insight into the general user journey on that page, heatmaps might be a great choice (provided their limitations are taken into consideration). If the UX designer needs a broader overview of friction points across the whole website, they will do better by using a tool like Click Trends. 

To sum it up…

There is a variety of heatmap alternatives available and it depends on your use case when it comes to choosing one. SessionStack’s Click Trends dashboard provides one useful heat mapping tool alternative that can help UX designers, engineers, digital marketers, and product managers visualize better sitewide frustration signals and opportunities for improvement. If you wish to try Click Trends, you are welcome to subscribe to our forever free plan here >>