Website Heatmaps: Read Clicks and Scrolls
Imagine reviewing a product page with a comparison section, an image gallery, and a button near the end. People arrive, but the button gets little use. A website heatmap offers an appealing shortcut: look for the bright spots, find the cold button, and decide where to move it. That shortcut can point you toward a useful question. It cannot tell you whether visitors disliked the offer, never reached the button, used a different route, or tried to interact with something else.
The useful way to read a heatmap is to connect a specific page decision to the event the map actually records. If the question is whether visitors reach a section, start with scroll reach. If the question is which control they select, look at clicks or taps. If the question is why someone stopped, the map has reached its limit; inspect the surrounding interaction and the page itself. This distinction matters more than the color scheme because the same dark patch can mean different things on different pages.
A heatmap shows recorded interaction, not a visitor’s thoughts
A website heatmap lays aggregated interaction data over a representation of a page. Microsoft Clarity, for example, builds maps from clicks and scroll reaches across page views under the chosen filters. A colored region therefore summarizes recorded events in a selected set of visits. It is not a picture of one visitor’s journey, a direct measure of where anyone looked, or an explanation of why a choice was made. Clarity’s heatmap overview describes the aggregation behind its maps.
That sounds simple until a team asks a heatmap to answer the wrong question. A prominent button can receive many clicks because it is easy to find, because people want what it offers, or because it is the only apparent way forward. An unclicked paragraph might have been read carefully, skipped, or never brought into view. The map records an action or reach, while the interpretation depends on the page goal, the visible alternatives, and which visitors are included. Treat the bright spot as a place to investigate, not a score for design quality.
The page is also part of the measurement. A purchase page, an article, and a support page ask people to do different things. A person who reads an answer and leaves a support page may have succeeded without clicking. A person who reaches the bottom of a short page may still be unable to complete a task. Before opening a map, name the action or information that matters on that page. Then ask whether a recorded click or scroll reach could actually distinguish success from trouble. If it cannot, choose another way to examine the problem.
Pick the map that matches the page question
Click and tap maps answer the most literal question: where did recorded selections occur? Hotjar distinguishes desktop clicks from taps on mobile or tablet, while Clarity plots clicks against page elements. Hotjar’s map descriptions and Clarity’s overview describe these product views. If a navigation label is clicked far more often than a nearby call to action, that is an observation about selections within the displayed visits. It does not establish that the label is clearer or that the call to action is unnecessary. The clicked destinations and the visitors who reached each control still matter.
Click maps are particularly useful for finding a mismatch between appearance and behavior. Suppose an illustrative product image attracts taps although tapping it does nothing. That pattern would justify checking whether the image appears to promise a gallery, enlargement, or link. The immediate choice is to inspect the element and the sessions around those taps. Making the image clickable might help if visitors are trying to enlarge it; changing its styling might be better if the tap is accidental. A click concentration alone cannot choose between those explanations.
Scroll maps answer a different question: how far down the page did the included visits reach? Both Clarity and Hotjar describe scroll views in terms of reach, and both identify an average fold, the approximate lower edge of the initially visible page. Use this map when a necessary price, qualification, answer, or button sits below the first screen. A low reach figure tells you that fewer included visits got to that position. It does not say that everyone who reached it read it, or that everyone who stopped scrolling rejected the page.
The distinction changes the edit. If a long article answers its main question near the top, lower reach may be entirely compatible with a useful visit. If a checkout page hides a mandatory shipping condition below several screens of decoration, low reach deserves closer attention. The right response is not automatically to shorten every page. It may be to move the condition nearer the decision it affects, provide a clear summary, or change the route so visitors encounter it when needed. Each option gives up space that could have served another purpose; choose based on what the page asks people to decide.
Movement maps show cursor activity rather than clicks. Hotjar offers a separate view of where a mouse moved, along with engagement zones that combine available click, movement, and scroll signals, and a view of repeated clicks. Hotjar’s heatmap documentation sets out those views. Movement can help locate areas worth examining, but the pointer is not an eye tracker. A person may leave the cursor in one place while reading another part of the page, or move it toward a control only after looking at the control.
Research comparing gaze and cursor behavior during web search found that their positions can align under some conditions and diverge under others; the relationship changes with cursor behavior and time. The authors also describe inactive cursors while people examine the page. Their work concerns the tasks they studied, so it is a reason to be careful with the proxy, not a formula for interpreting every website. The gaze and cursor study supports a restrained reading: a movement hotspot shows pointer movement, not verified visual attention. If the decision truly depends on what people looked at, a cursor map cannot settle it.
Repeated-click views are useful for spotting a place where an action may not be producing the expected response. They are still prompts to inspect, not labels for a visitor’s emotion. Consider a carousel arrow that invites several taps: repeated taps could reflect normal browsing or a control that failed to advance. The map can direct attention to the element; a recording or a direct check of the control can distinguish the visible sequences. Hotjar groups repeated clicks in its own map, but the product’s classification does not reveal a person’s intention by itself. Hotjar explains the repeated-click view.
Read the denominator before you read the color
A click total, a percentage of clicks, a share of page views, and a share of people who reached a section are different quantities. Hotjar states that its click percentage is the proportion of all clicks displayed for the page, and that its view can omit interactions on elements outside the visible screenshot. Its click-map explanation matters whenever someone calls a large share of clicks a high conversion rate. A button that receives one fifth of displayed clicks has captured one fifth of those clicks under that view’s rules. It has not necessarily persuaded one fifth of visitors.
Consider a deliberately illustrative calculation. Suppose a page has 1,000 included page views; 500 of those views reach a particular button, and 25 views include at least one click on it. Under these assumptions, the button is clicked in 2.5% of all included page views and 5% of the views that reached it. Those are different questions: overall use and use among views with an opportunity to see the button. Neither figure says whether the click led to the intended outcome. If one view can contain several clicks, substituting a raw click count for the 25 views would change the numerator again. Keep the unit written beside the number.
The same care applies to scroll percentages. A reach percentage at a vertical position describes visits that scrolled to that position in the included set. It does not measure time spent reading the sentence there. The fold is an average across viewing conditions, not a fixed line every visitor saw. On a narrow phone screen, the comparison table and button in the opening example may occupy several screens; on a large display, they may appear together. A combined map can blur that difference even if the underlying events were recorded correctly. Device filtering is therefore a substantive choice, not cosmetic tidying.
The amount of included activity matters as much as its shape. A few clicks can produce an eye-catching hotspot, especially when one visit contains repeated actions. Before treating a patch as a page-wide pattern, look at how many page views and interactions sit behind it and whether the same observation appears when the relevant group is examined again. There is no useful universal cutoff for every page: the point is to avoid spending a major redesign on a pattern that could change with the next handful of visits. If the map is thin, a direct check of the suspected control may be a better first move than rearranging the page.
Start with the same path and device class before comparing two areas or two dates. Clarity provides device and path filters for heatmaps, recordings, and other views, including filters for entry, exit, and visited URLs. Its filters overview describes those choices. A visitor who lands directly on a product page may have a different information need from one who reaches it after reading a guide. If those contexts are mixed, the map may be perfectly accurate about the mixture and still be poor guidance for either group. Separate the contexts that could change the page decision, then compare the resulting maps.
Keep the scope of the comparison explicit. If the first map covers mobile visits to a single page and the second covers all devices across several related URLs, a change in hotspots could come from the selection rather than the layout. For a before-and-after review, hold the page path, device group, and relevant filters steady, and note what changed in the page itself. Even then, the map only describes recorded behavior in each set of visits. Traffic mix and other conditions can change between periods, so a brighter area after an edit is not by itself proof that the edit improved the outcome.
Grouping different pages can be especially misleading for scroll reach. The same point halfway down two pages may contain a plan table on one and an image on the other, or the pages may have different lengths altogether. Hotjar warns that a scroll map spanning pages of different sizes can be inaccurate. Its scroll-map guidance reinforces a practical choice: examine the actual page that carries the decision before drawing conclusions about a particular section. Group pages only when their structure and the question being asked make that grouping meaningful.
The page image may hide part of the interaction
Heatmaps place events against a rendered page, which can be awkward when the page changes state. A menu may be closed in the displayed image even though visitors clicked items after opening it. Clarity says dynamic elements can be included in its ranked click data while remaining absent from the default image; selecting an element can refresh the view. Clarity’s heatmap FAQ explains that behavior. When a click count seems to refer to empty space, first check whether the relevant menu, dialog, or other state is visible in the map. Do not infer that visitors clicked at random from a single screenshot.
Embedded content creates another boundary. Clarity says it captures clicks in first-party frames but not third-party frames, and that it cannot render inside third-party frames or canvas elements. The Clarity FAQ states those limits. If a payment step, booking widget, or video control lives inside an embedded third-party frame, a quiet area in the surrounding map cannot tell you whether visitors used that control. The missing events belong to the measurement boundary, not necessarily to visitor behavior. Check where the interaction is implemented before interpreting its absence.
The displayed page is also a selected impression, not a guarantee that every collected event appears in that view. Clarity notes that its displayed click data depends on the sample impression used to create the heatmap; active filters further determine which visits contribute. Its FAQ and filters overview describe these constraints. This is especially relevant to changing images, expanded controls, and pages whose layout differs across visits. If the overlay and the page image seem inconsistent, inspect the selected impression and filter scope before interpreting a missing spot as a lack of demand.
For the product page in the opening example, the gallery, comparison section, and button may each appear in different states or positions. A heatmap can still reveal where recorded actions clustered. It cannot restore every state of the page into one static view. The useful question is whether the displayed state lets you interpret the action you care about. If it does not, narrow the page view, inspect the relevant element, or move to a sequence of actual interactions. The cost is more investigation; the benefit is avoiding an edit based on a misleading picture.
Follow the pattern to the next decision
Return to the illustrative product page. Suppose the scroll map shows that relatively few included mobile visits reach the comparison section, and the button sits below it. That observation makes the button’s low click count unsurprising. The first question is whether the comparison belongs at that depth. If price, eligibility, or the differences between plans must be understood before choosing, put a usable summary earlier and leave the full comparison where detail fits. Moving only the button upward may raise clicks while sending people into a choice they cannot yet assess. The page goal should determine which information travels with the button.
Now suppose the button is reached often but rarely clicked. That pattern calls for a different investigation. Inspect the button’s wording, its relation to the offer, and the alternatives visible at the same point. A button that says “Continue” beside three unrelated options may leave the next step unclear; a button that names the action could make the route more legible. These are possible design explanations, not findings from the map. The map has told you where action is scarce relative to reach. It has not told you whether the barrier is wording, price, trust, a technical fault, or a deliberate choice to wait.
If clicks cluster on a comparison row or an image, watch what happens after a selection. Microsoft describes a session recording as a sequence of page visits and interactions, reconstructed from page information and user events rather than a literal video of the person’s screen. Clarity’s recordings overview explains what that view contains. A recording can show that an illustrative visitor opened a menu, scrolled back to the comparison, and clicked the button. It cannot reveal the visitor’s private reason for doing so, and one recording cannot tell you how common that path is. Use it to understand a possible sequence and return to the map or filtered counts to see whether the pattern is broader.
This sequence also guards against a familiar mistake with repeated clicks. If a button collects several clicks in quick succession, verify the control in the page state where those clicks occurred. Did a response appear? Did the next page load? Was the control intentionally repeatable? The map locates the interaction, and the recording may show its order, but neither substitutes for checking the actual interface. If the control is broken, fix the behavior. If it works but gives no clear feedback, improve the response people can see. If the repeats are expected, leave the interaction alone rather than redesigning it to extinguish a warm spot.
After a change, compare the measure tied to the page’s purpose as well as the heatmap. For a signup page, that might mean whether the intended signup action was completed; for a support page, whether the answer could be found without an unnecessary detour. These are examples of decisions to define for your own site, not outcomes supplied by a heatmap. A map can show that clicks shifted or that more included visits reached a section. It cannot, on its own, establish that the new layout caused a better result. When a consequential redesign is at stake, make the success measure explicit before declaring victory from a color change.
The best edit may also be no edit. If a section is cold because it is optional background information, placing it at the top could distract from the main task. If an unclicked link simply offers a route most visitors do not need, low use may be acceptable. Decide what opportunity the page is supposed to offer and who needs it. Heatmaps become valuable when they change a specific decision about information order, control behavior, or navigation; they become expensive when every patch of color demands an explanation and a redesign.
Keep the view safe to share and possible to read
Session recordings add detail to a heatmap, so the content they can show deserves attention before anyone relies on them. Clarity says input boxes and dropdown menus are masked across its masking modes, and changes to masking settings apply to new recordings rather than past ones. Clarity’s masking documentation gives those limits. For a page that contains personal or confidential information, check the masking setup before collecting or sharing a recording. A later setting change cannot retroactively hide content that was already captured. The practical cost of this care is less visible detail in some replays; that is preferable to exposing information the analysis did not need.
When presenting a heatmap to someone else, give the colors words and numbers. The World Wide Web Consortium advises against using color alone to convey meaning and recommends labels for graph areas. Its accessibility design guidance applies directly to a red-to-blue overlay. State the page, device group, time window, selected filters, and what “hot” means in that particular map. If a decision rests on a button, report its labeled count or percentage with the denominator rather than pointing to a glowing circle. That makes the interpretation usable for a reader who cannot distinguish the colors and for anyone trying to check the claim later.
The same discipline improves the decision itself. “The lower half is cold” leaves open whether the map shows scrolling, clicking, movement, or a combined engagement score. “Fewer included mobile page views reached the shipping terms than the price section” identifies a comparison and invites a page decision. It still stops short of claiming that visitors missed, ignored, or disliked the terms. Precise language keeps the map connected to what it measured and gives the team a clear next place to look.
Use heatmaps for questions they can answer
For a first pass at a website, a click map and a scroll map often cover the most actionable questions: which visible elements receive selections, and which parts of the page are reached? Clarity offers those views with path and device filtering; Hotjar offers them alongside movement, engagement, and repeated-click views. Clarity’s heatmap overview, its filters overview, and Hotjar’s map descriptions document those options. Choose a view for the question, not for the number of overlays available. A more elaborate map does not make an ambiguous action unambiguous.
The operating rule is straightforward: identify the page’s job, select the visitors and page state that matter, read the map’s actual unit, and then inspect any pattern that would change a decision. A heatmap is strongest at showing where recorded interactions cluster or where scroll reach thins. A recording can add sequence, and the page can show what each action was able to do. The remaining judgment belongs to the person responsible for the page: whether to move information, clarify a control, fix a response, or accept the behavior because the page already serves its purpose.