Definition:

A heat map or heatmap is a visualization that represents values with colors across a matrix, image, or interface. On a web page, it commonly aggregates interactions from multiple sessions to show where clicks or taps occur, how far users scroll, or which areas record more activity.

Colors express a scale defined by the tool: a “hot” area normally contains a higher value than a “cold” one. The map alone does not explain user intent or prove that an element caused a conversion. Interpretation requires knowing the metric, period, sample, and segment represented.

How a heat map works

The tool records events or measurements and groups them by position, element, or section. It then normalizes the values and applies a color scale over a screenshot or representation of the page. A map may use absolute coordinates, document elements, or zones defined by the platform.

The legend is essential because color has no universal meaning. On a click map it may represent the number or share of interactions; on a scroll map, the percentage of sessions that reached each depth; and on a data matrix, the magnitude of any variable. Some tools use warm colors for high values and cool colors for low values, but other palettes are possible.

On responsive sites, the same page changes with the device and viewport size. Desktop, tablet, and mobile data should therefore be separated or aligned with the correct interface version. Drop-down menus, pop-ups, dynamic content, and design changes can also affect the match between recorded interactions and the screenshot used.

Types of website heat maps

Each type answers a different question, and not all of them measure visual attention:

Click or tap map: Aggregates mouse clicks and, on touch devices, taps. It can reveal frequently used elements, ignored controls, or non-interactive areas that users try to activate.
Scroll map: Shows the share of sessions that reaches each vertical section. It helps assess potential exposure to content, but reaching an area does not mean reading it.
Movement map: Represents cursor paths on desktop. It can provide clues about page exploration, although the pointer does not reproduce gaze accurately.
Attention or dwell map: Estimates how long an area remains visible or combines activity signals. Its definition varies by tool and does not necessarily equal cognitive attention.
Element- or area-based map: Assigns interactions to specific buttons, links, images, or blocks. It is more resistant to differences in screen resolution than a map based only on coordinates.

Heat maps are also used outside web analytics to represent correlations, geographic values, sports activity, or scientific results. In those cases, the rows, columns, or areas and their scale must be defined explicitly.

Heat maps and eye tracking

A heat map describes a visualization format, whereas eye tracking describes a method for measuring gaze. An eye-tracking study can produce a map of fixations or visual paths, but most website heatmaps use clicks, taps, scrolling, or cursor movement.

A cursor map should not be presented as showing the exact points users looked at. A visual pattern observed in one study should not be treated as a universal rule either. Device, task, design, content, and sample characteristics can all change behavior.

Eye tracking typically requires participants and equipment or cameras prepared for the study. Event-based web maps aggregate instrumented real sessions through a script. Both approaches can complement each other, but they have different data sources, biases, and levels of precision.

Uses and interpretation

In web analytics, UX, and CRO, a heat map can help locate questions that require further investigation. Common uses include:

Checking whether primary controls receive interactions.
Detecting clicks on text or images that look like links but are not interactive.
Seeing what share of users reaches a call to action or a section after several stages of scrolling.
Comparing patterns between mobile and desktop, traffic sources, or page types.
Prioritizing reviews of navigation, forms, visual hierarchy, and content.

Analysis should begin with a specific question and a coherent segment. A heavily clicked area is not necessarily positive, and a cold area is not necessarily a problem: the result depends on the element’s function. A secondary link may distract users, while informational copy may fulfill its purpose without receiving any interaction.

Patterns should be compared with quantitative metrics, session recordings when appropriate, qualitative research, and page context. A map can support a hypothesis; an A/B test or another evaluation method can determine whether the proposed change improves the outcome. The article on heat maps in web analytics covers their practical application in more depth.

Limitations and good practices

Aggregated maps can conceal opposing behaviors among segments. A small sample, an unusual period, template changes, or instrumentation errors can also create a misleading picture. Before making a decision, review data volume, dates, filters, device, and page version.

Color should be accompanied by a legend, values, or understandable patterns. Rainbow palettes can create visual boundaries that do not exist in the data and make interpretation difficult for some people. When a visualization is shared, it should not rely on color alone to communicate important information.

Interaction capture also requires privacy and security controls. Configuration should exclude or mask fields, personal data, and sensitive content, while respecting the legal basis, consent, and rules that apply to the site. A tool should not indiscriminately record everything a person enters on a page.

Platforms such as Microsoft Clarity, Contentsquare, Crazy Egg, Mouseflow, or VWO provide related features, but their definitions, sampling, and map types vary. Selection should be based on the analysis question, technical compatibility, segmentation, privacy controls, and the ability to validate findings, not only on the visualization’s appearance.