So far, we’ve briefly discussed basic definitions related to temperature (or density) maps (heatmaps or heat map), using our imagination and heatmap.js to explore what we could achieve.
In this article, I’ll complete the process by explaining how to interpret a heatmap. In subsequent sections, I’ll continue illustrating various examples of heatmaps within data visualization workflows. Additionally, I’ll also present different approaches to density maps. For further reading, you can explore various related articles in the “Further Reading” section. Let’s begin: how should we examine and interpret a heatmap?
Use Cases of Heatmaps
First, when evaluated in the context of Hotjar, Yandex Metrica, and Google Analytics, a heatmap will represent users’ interactions (such as clicks, scrolling, and swiping) on a user interface.
Heatmap Examples
Below are some example heatmaps that could be considered within this scope.
On the other hand, without specifying any particular application, we can interpret a heatmap much more generally. The image below displays heatmap values obtained as a result of body temperature, face detection, and eye tracking measurements from left to right.
Of course, these are just basic approaches. We can also use heat (or density) maps in a temporal context. A great example would be the calendar heatmap provided on GitHub profiles under the GitHub section. For similar approaches, you may consider the cal-heatmap1 and d3-heatmap2 modules. But are examples limited to just these? Certainly not.
The examples above again present two basic approaches. They display numerical and score densities from cold to hot along the X and Y axes using color gradients from dark to light.
These two examples again represent basic approaches, with time series data illustrated.
Maps are frequently evaluated in terms of heat/density maps. For instance, disasters such as earthquakes, rainfall densities, population, and similar data are easily visualized using heat maps. Since we mentioned pre-existing locations, let’s elaborate a bit more on the examples and examine how data such as traffic, road usage, and vehicle usage can be presented through maps.
As can be seen, densities can be easily represented both as point-based and line-based features on maps.
The previous example illustrates an indoor approach. Using VR, AR, and camera technologies, activity areas can be evaluated through heat maps—similar to eye-tracking approaches—based on positional data, thereby enabling easy interpretation of indoor behaviors.
Of course, these examples and approaches can be further diversified. However, the fundamental approach will always express itself through color values based on density. At times, graphical elements may vary point-wise or line-wise. Nevertheless, this variation does not introduce any new distinction in the visual representation.
Heat Map Control Checklist
A wide range of questions can be answered through heat map analysis. However, we can briefly address the top five most relevant questions. For the rest, situation-specific explanations can be provided as needed.
- Are visitors finding the content interesting or significant?
- Are visitors clicking on key page elements (links, buttons, and other interactive triggers)?
- Are visitors getting confused by non-interactive elements?
- Are there elements that might distract visitors’ attention?
- Are visitors experiencing issues related to device compatibility?
Interpreting Heat Maps
Heat maps provide a powerful way to understand how users interact with a website, poster, map, or other elements—what they do, their movement paths, where they show interest (hot spots), or what they ignore (cold spots). Heat maps, which scale colors from blue to red or from light to dark, depict the most active and interactive areas in red, while the less engaged or ignored areas are represented by a cool, blue-toned region—thus allowing us to immediately understand what users clicked, what areas they explored, and what they overlooked.
Heat maps often display the average value of interactions. Tools like Hotjar provide heat maps separately for mobile and desktop devices through interaction types such as scroll maps, click maps, and move maps3 4.
Link Test (Link Test)
When evaluated from a user interface perspective, the page being tracked will contain numerous interactive and non-interactive elements such as links, buttons, and action calls. During the heat map testing process, it is essential to ensure that both linked and unlinked areas are clearly distinguishable to avoid empty clicks.
Distraction Test (The Distraction Test)
We can describe this as the absence of relevance among elements that are visible simultaneously (side by side, one below the other, etc.). In such a situation, the user’s perception will be fragmented due to competing stimuli. This may indicate that the page’s activity distribution lacks a prominent element or is overwhelmed by an excessive number of competing elements.
Information Test (The Information Test)
If users do not engage with any interaction after viewing a particular section, it may be assumed that they were unable to access the information they were looking for. Typically, a text selection and/or click action indicates that the user has established a connection with the provided information. However, if only a scroll interaction occurs on a page-like interface, it may be assumed that the user has not formed a connection with the content.
Engagement Test (The Engagement Test)
If prominent (design-wise) elements on the page fail to receive the expected interactions, users may be interpreting and evaluating the design differently. In such cases, A/B tests designed to increase user engagement can be used to evaluate alternative design approaches.
Users may struggle to understand page depth within a mobile experience. Features like lazy loading can affect this process, and additionally, an error might restrict the loading and/or display of content. In such cases, the site must clearly indicate that depth exists and that scrolling can occur along the X and/or Y axes. If important sections remain outside the initially visible area, alternative options such as a redesigned layout or direct access to the relevant section may be provided.
Device Test
Desktop computers, smart mobile phones, tablets, projectors, VR headsets, and similar devices can access content under different technical specifications (such as operating systems and resolutions). During testing, it is also necessary to evaluate how these devices access content and how content is presented. When discussing a user interface, it must be responsive (responsive) and avoid distracting users with irrelevant information (see information test), and perform well in terms of screen performance.
Focus Depth Test (Fold Test)
I couldn’t find a direct equivalent for the “fold test.” For now, we’ll proceed with the temporary term “focus depth.” Focus depth refers to the area visible to users immediately upon entering a website or mobile app (i.e., the landing page), without any scrolling activity. This area plays a critical role in establishing and maintaining user confidence in the content displayed.
Header Test
When users visit a website, the first area they encounter and interact with will be the header section. The header area, which contains navigation, search, and similar elements, should be presented as simply and clearly as possible to users.
Further Reading
- Heat Map Chart, FusionCharts
- Battling Infectious Diseases in the 20th Century: The Impact of Vaccines
- 5 Ways to Do 2D Histograms in R