{"id":20847,"date":"2020-01-30T13:35:35","date_gmt":"2020-01-30T13:35:35","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/heat-map"},"modified":"2026-09-28T14:03:43","modified_gmt":"2026-09-28T14:03:43","slug":"heat-map","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/heat-map","title":{"rendered":"Heat Map"},"content":{"rendered":"<p><img decoding=\"async\" class=\"boxpad alignright wp-image-23303 size-full\" src=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2021\/11\/heat-map.jpg\" alt=\"Heat Map\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2021\/11\/heat-map.jpg 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2021\/11\/heat-map-150x150.jpg 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><strong>Definition:<\/strong><\/p>\n<p>A <strong>heat map<\/strong> or <em>heatmap<\/em> 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.<\/p>\n<p>Colors express a scale defined by the tool: a &#8220;hot&#8221; area normally contains a higher value than a &#8220;cold&#8221; one. <strong>The map alone does not explain user intent or prove that an element caused a conversion<\/strong>. Interpretation requires knowing the metric, period, sample, and segment represented.<\/p>\n\n<h2>How a heat map works<\/h2>\n<p><strong>The tool records events or measurements and groups them by position, element, or section<\/strong>. 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.<\/p>\n<p><strong>The legend is essential because color has no universal meaning<\/strong>. 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.<\/p>\n<p>On responsive sites, the same page changes with the device and viewport size. <strong>Desktop, tablet, and mobile data should therefore be separated or aligned with the correct interface version<\/strong>. Drop-down menus, pop-ups, dynamic content, and design changes can also affect the match between recorded interactions and the screenshot used.<\/p>\n<h2>Types of website heat maps<\/h2>\n<p>Each type answers a different question, and not all of them measure visual attention:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/clickmap\">Click or tap map<\/a>:<\/strong> 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.<\/li>\n<li><strong><a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/scrollmap\">Scroll map<\/a>:<\/strong> 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.<\/li>\n<li><strong>Movement map:<\/strong> Represents cursor paths on desktop. It can provide clues about page exploration, although the pointer does not reproduce gaze accurately.<\/li>\n<li><strong>Attention or dwell map:<\/strong> Estimates how long an area remains visible or combines activity signals. Its definition varies by tool and does not necessarily equal cognitive attention.<\/li>\n<li><strong>Element- or area-based map:<\/strong> 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.<\/li>\n<\/ul>\n<p><strong>Heat maps are also used outside web analytics<\/strong> 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.<\/p>\n<h2>Heat maps and eye tracking<\/h2>\n<p>A heat map describes a visualization format, whereas <strong><a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/eyetracking\">eye tracking<\/a> describes a method for measuring gaze<\/strong>. An eye-tracking study can produce a map of fixations or visual paths, but most website heatmaps use clicks, taps, scrolling, or cursor movement.<\/p>\n<p><strong>A cursor map should not be presented as showing the exact points users looked at<\/strong>. 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.<\/p>\n<p><strong>Eye tracking typically requires participants and equipment or cameras prepared for the study<\/strong>. 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.<\/p>\n<h2>Uses and interpretation<\/h2>\n<p>In <a href=\"https:\/\/www.arimetrics.com\/en\/digital-analytics-agency-spain\">web analytics<\/a>, UX, and <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/cro\">CRO<\/a>, a heat map can help locate questions that require further investigation. Common uses include:<\/p>\n<ul>\n<li>Checking whether primary controls receive interactions.<\/li>\n<li>Detecting clicks on text or images that look like links but are not interactive.<\/li>\n<li>Seeing what share of users reaches a call to action or a section after several stages of <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/scroll\">scrolling<\/a>.<\/li>\n<li>Comparing patterns between mobile and desktop, traffic sources, or page types.<\/li>\n<li>Prioritizing reviews of navigation, forms, visual hierarchy, and content.<\/li>\n<\/ul>\n<p>Analysis should begin with a specific question and a coherent segment. <strong>A heavily clicked area is not necessarily positive, and a cold area is not necessarily a problem<\/strong>: the result depends on the element\u2019s function. A secondary link may distract users, while informational copy may fulfill its purpose without receiving any interaction.<\/p>\n<p><strong>Patterns should be compared with quantitative metrics, session recordings when appropriate, qualitative research, and page context<\/strong>. A map can support a hypothesis; an <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/a-b-testing\">A\/B test<\/a> or another evaluation method can determine whether the proposed change improves the outcome. The article on <a href=\"https:\/\/www.arimetrics.com\/en\/blog\/heat-maps-or-heatmaps-in-web-analytics\">heat maps in web analytics<\/a> covers their practical application in more depth.<\/p>\n<h2>Limitations and good practices<\/h2>\n<p><strong>Aggregated maps can conceal opposing behaviors among segments<\/strong>. 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.<\/p>\n<p><strong>Color should be accompanied by a legend, values, or understandable patterns<\/strong>. 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.<\/p>\n<p><strong>Interaction capture also requires privacy and security controls<\/strong>. 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.<\/p>\n<p>Platforms such as <a href=\"https:\/\/learn.microsoft.com\/en-us\/clarity\/heatmaps\/heatmaps-overview\" target=\"_blank\" rel=\"noopener\">Microsoft Clarity<\/a>, Contentsquare, Crazy Egg, Mouseflow, or VWO provide related features, but their definitions, sampling, and map types vary. <strong>Selection should be based on the analysis question, technical compatibility, segmentation, privacy controls, and the ability to validate findings<\/strong>, not only on the visualization&#8217;s appearance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A heat map represents values with colors. Learn how it works, its website types, how it differs from eye tracking, how to read it, and its limitations.<\/p>\n","protected":false},"author":7,"featured_media":80928,"template":"","encyclopedia-tag":[1290],"class_list":["post-20847","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","encyclopedia-tag-visual-interaction"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/20847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/7"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media\/80928"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=20847"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=20847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}