Hotjar and Page Analytics (by Google)1 extension together with tools like Google Analytics and Yandex Metrica, allow us to easily visualize a wide range of user interaction data. However, among these interactions, one stands out particularly: the heatmap (heat map), which provides deeper insights into how users navigate to specific areas of interest. So, what exactly is a heatmap (heat map)?
Heatmap (Heat Map)
A heatmap (heat map / heat or density map) is a visual representation in which individual data values in a matrix are represented by colors2. User actions performed on screens—such as cursor or gaze interactions (e.g., hovering, scrolling, clicking, highlighting)—as well as seismic activity intensity, migration routes of animals, weather and oceanic events, and timestamps (day, time, etc.) associated with specific actions—can all be represented and analyzed through heat (or density) maps.
In a heatmap, density is typically represented using contrasting colors, usually shifting from cool tones (low density) to warm tones (high density), or from light (white/low density) to dark (high density).
However, the specific context I will focus on involves tracking users’ (those visiting or using a website or app) cursor or gaze interactions—such as hovering, browsing, clicking, or highlighting—and representing these interactions through color coding during analysis. This context should not be limited to web and mobile applications alone. For instance, in an in-store scenario, cameras can be used to generate a heat map of the store environment, analyzing the movement patterns of customers and the layout of products, allowing for a reevaluation of in-store movement patterns and product placement.
Heatmap Usage in Digital Environments (Websites / Web or Mobile Applications)
In an environment accessible or viewable through a screen or eyewear, users can interact through three types of movements: cursor movement, scroll movement, and keypress events3. Users move the cursor using a mouse and perform actions such as clicking, selecting, and dragging.
From the above image, it can be inferred that, when a baby’s face is displayed from side to side, interaction with other elements is significantly reduced.
The same scenario can also be implemented by using arrow keys and/or scrolling to navigate the page along the X and Y axes. Key usage is valid for data input and for the use of predefined actions (such as arrow keys) and keyboard shortcuts. This enables interaction patterns and user engagement levels to be interpreted through movement and click events. Of course, eye movements (eye tracking) can also be included in these processes. However, for such tracking, a camera or VR (Virtual Reality) eyewear device must also be incorporated into the setup.
In the example image, the most frequently selected products and shelves within a store layout are easily identifiable.
Heatmap Usage in Physical Environments (Stores / Roads / Transportation Vehicles, etc.)
Physical heat maps (or heat/density maps) can be created based on location (area or route) and time, as well as direction of movement. For public transportation vehicles (e.g., metro), general and compartment-level densities can be calculated based on time. For a shopping mall, store-specific data such as customer paths and preferred product types/brands can also be evaluated using heat maps.
Purpose of Heat Map Usage
When analyzing a user interface, heat maps (or heat maps/heat/density maps) are used to identify areas that are either frequently used or overlooked, to understand visual scanning behavior and reading flow. This enables a redesign of the interface, allowing for repositioning of content, forms, buttons, or advertisements. The same principle applies to the redesign of in-store experiences. Identifying products that customers do not visit for a particular reason and repositioning them, or replacing unengaging products with different ones on shelves, will directly impact in-store sales.
A wide range of services and tools are available for generating heat maps of both digital and physical environments. While my focus in this explanation is primarily on digital environments—especially web and mobile applications—below I share links to some applications and services that can be used. In my next article, I will provide information regarding heatmap.js.
Further Reading
- Heat Mapping: An Easier Way for Relationship Building
- How to view a website heat map using Google Analytics