Website Heatmaps Explained: Click, Scroll and Mouse-Movement Maps for Small Sites

What a website heatmap is (and isn’t)

A heatmap is an overlay drawn on top of a screenshot of one page. Each visitor’s interactions on that page are collected by a tracking script, then aggregated and colored: the more interactions in a spot, the warmer the color. Because the data is aggregated, a heatmap answers questions about a crowd, such as “Do people find the size chart?” or “How many of them see the reviews?” It does not tell you what any single person was thinking.

Heatmaps sit between two other kinds of data you probably already have. Page-level analytics tell you how many people visited a page and where they went next, but not what they did while they were there. User interviews and usability tests tell you why people struggle, but only for a handful of people. A heatmap fills the gap: it shows behavior on the page, for everyone who visited, without telling you the reason. Treat it as a way to find the right question, not as the final answer.

The three map types you’ll meet most often

Heatmap tools use slightly different names, but most offer some combination of the following. Here is what each one measures and the kind of question it answers best.

Some tools also offer an “attention” map that estimates how long each part of the page was visible on screen. That is a different calculation from the three above. If your tool doesn’t have one, you can get close by reading the scroll map together with time on page, which is what we’ll do later in this guide.

Click maps: what people try to click

A click map is the most intuitive heatmap. Hot spots sit on your buttons, links, menus and images. The interesting findings are almost never on the main call to action, which you expect to be hot. They are in three other places.

1. Clicks on things that aren’t links. Product photos, icons, bold text, prices and badges often collect clicks. People expect them to do something: open a larger image, explain the badge, jump to a section. Each cluster of clicks on a dead element is a small disappointment and a hint about what visitors want.
2. Clicks that leak away. Look at how much of the heat goes to the header, footer and outbound links compared with the button that moves people forward. On a landing page from an ad, heavy clicking on the main navigation can mean the page didn’t answer the question that brought them there.
3. Cold areas you expected to be warm. A “Size guide” link or a “Shipping info” link that no one clicks is either well hidden, badly labeled, or not needed. The scroll map (below) tells you which: if few people reach that part of the page, placement is the problem.

Two caveats keep click maps honest. First, they count clicks, not visitors, so a single person repeatedly clicking an unresponsive element can create a hot spot that looks like popular demand. If one spot looks surprisingly hot, check how many clicks the map is based on and whether the pattern holds across a longer date range. Second, click maps on pages with menus, accordions or carousels are drawn on a static screenshot. A click on a dropdown item can appear to land on whatever sits under the menu in the screenshot. Read clicks around interactive elements with that in mind.

Scroll maps: who sees what

A scroll map shades the page in bands from top to bottom, showing what share of visitors reached each depth. The top band is always close to 100 percent, because everyone who loads the page sees the first screen. From there the numbers fall, sometimes gently and sometimes off a cliff.

This matters because attention is concentrated at the top. In a 2018 eyetracking study, Nielsen Norman Group found that 57 percent of page-viewing time was spent above the fold and 74 percent within the first two screenfuls. That doesn’t mean people never scroll; it means each section further down competes for a shrinking share of attention. A scroll map shows you exactly how steep that slope is on your own page.

How to read scroll depth on a product page

Product pages are where scroll maps earn their keep, because the content below the first screen (details, reviews, shipping and returns, FAQ) often decides the sale. Open the scroll map for one of your top product pages and work through these steps.

1. Find where the big drop happens. Look for the band where the reach percentage falls fastest. A sharp drop right after the first screen often means the top of the page looks complete, with nothing that signals “there’s more below.” Nielsen Norman Group calls this a false floor.
2. Mark your key content on the map. Note which band holds the add-to-cart button, the reviews, the shipping costs and the return policy. Write down the reach for each. If only a minority of visitors ever reach your reviews, the reviews can’t be doing much persuasion, however good they are.
3. Check mobile separately. The same content sits much further down on a phone, because the screen is narrower and blocks stack vertically. A section that most desktop visitors reach may be seen by far fewer mobile visitors. Always compare the two devices before changing the layout.
4. Look for a second wave. Sometimes reach drops and then levels off. The people who keep scrolling past a certain point are usually serious buyers looking for details. That plateau is a good place for answers to the questions that block purchases: delivery time, returns, sizing.
5. Decide what moves up. If something important sits below a steep drop, consider a short summary near the top (for example, a one-line shipping note next to the price) rather than moving the whole section. Summaries keep the first screen focused while making sure no one misses the deal-breakers.

One thing scroll maps can’t tell you is whether people read what they scrolled past. Fast scrolling to the bottom and slow reading look the same in reach percentages. That’s why pairing the scroll map with time on page, and with where people click lower down, gives a much more reliable picture than any single map.

Mouse-movement maps: useful, with limits

A mouse-movement map (sometimes called a hover or move map) records where the cursor travels and rests. On desktop, people often move the cursor toward what they’re looking at, or rest it near the text they’re reading. Areas that attract a lot of hovering but few clicks can point to content people examine carefully, such as a price breakdown or a comparison table.

Keep two limits in mind. The cursor is a rough proxy for attention, not an eye tracker: some people park the mouse in one corner and read with their eyes alone. And mouse movement exists only on devices with a pointer. As MDN’s documentation of the hover media feature notes, many mobile devices cannot conveniently hover at all and only emulate it with an awkward long tap. So a movement map always describes your desktop visitors, never your phone visitors. If most of your traffic is mobile, rely on click and scroll maps instead.

Common heatmap misreads (and what to check instead)

Three of these deserve more detail because they cause most bad decisions.

Misread 1: Mixing traffic sources

Visitors from a paid ad, from organic search and from a newsletter arrive with different intentions. Ad visitors often scan for the offer they clicked on; search visitors look for an answer; returning customers head straight to familiar spots. If your traffic mix changes (say, you start a campaign), the heatmap changes even though the page didn’t. Whenever your tool lets you filter by traffic source, compare sources before drawing conclusions about the page itself.

Misread 2: Too little data

A heatmap built from a handful of visits is mostly noise. There is no universal minimum, but a practical rule is to wait until the pattern stops changing when you extend the date range. If the hot spots move around every time you add another week, you don’t have enough data yet. For low-traffic pages, use a longer range (a month or a quarter) rather than looking at last week.

Misread 3: A stale screenshot

The colors are drawn over a screenshot. If you redesigned the page after the screenshot was taken, clicks will appear to land on the wrong elements. Refresh the screenshot after any layout change, and avoid choosing a date range that spans the redesign: clicks from the old layout and the new one will be painted on top of each other.

A simple heatmap routine for a small site

You don’t need to look at every page. A short monthly routine on a few important pages catches most problems.

1. Pick three to five pages. Usually your home page, your top landing page from ads or search, your best-selling product or service page, and any page with a form.
2. Open the scroll map first. Note where the steep drop is and what sits below it. This frames everything else.
3. Then the click map. List clicks on non-links, leaks to navigation, and expected hot spots that are cold.
4. Split by device. Repeat for desktop and mobile. On desktop, glance at the movement map for areas people study but don’t click.
5. Write one hypothesis per page. For example: “Few mobile visitors reach the return policy, and returns are a common question. Adding a one-line returns note under the price should reduce hesitation.”
6. Make one change, then compare. Refresh the screenshot, wait for a similar amount of traffic, and compare the same maps over equal date ranges.

Heatmaps and other analytics: who answers what

Heatmaps work best alongside the analytics you already use. For example, Google Analytics 4’s enhanced measurement records a scroll event the first time a visitor reaches 90 percent of a page’s vertical depth. That tells you how many people got to the bottom, but not where the rest stopped. A scroll map shows the full curve. In the other direction, analytics tools are better for questions that span many pages: which channels bring buyers, which pages lead to a purchase, how a campaign performed.

Forms deserve their own tools: a heatmap can show that people click into a form, but not which field they abandon. We cover that in Form Abandonment: How to Find the Field Where People Give Up.

Turning findings into page changes

Most heatmap findings lead to one of a few kinds of change. Matching the finding to the change keeps you from redesigning a whole page when a small edit would do.

Nielsen Norman Group’s research on how people scan text also helps here. When a page is a wall of text with no clear cues, readers tend to skim in an F-shaped pattern and miss content on the right side. Their recommendations are practical: put the most important points first, use headings that stand out and start with informative words, group related content visually and use lists. If your heatmap shows people skimming past important text, formatting changes like these are often the cheapest fix.

Heatmaps in marketingLABO

marketingLABO includes heatmaps on every plan, including the free one. You add one JavaScript tag to the head of your pages, and each page then gets its own heatmap. Here is what you get, so you know exactly what to expect.

The reports also show time on page, scroll depth and clicks for each page, so you can read the scroll map together with how long people stay, as described above. To be clear about what isn’t included: marketingLABO doesn’t offer session recordings or a separate attention (visibility-time) map. For most small sites, click and scroll maps plus time on page cover the questions that matter.

Heatmaps are also the starting point for on-page action. Once you know, for example, that most visitors leave a product page before reaching the shipping details, you can show a pop-up banner on that page after a set scroll depth or time, or when a desktop visitor is about to leave, to surface the information they’d otherwise miss.

FAQ

How much traffic do I need for a useful heatmap?

There’s no fixed number. Extend the date range until the main hot spots and the scroll curve stop shifting as you add more days. Low-traffic pages may need a month or more of data.

Do heatmaps slow down my site?

Any extra script adds some work for the browser. Install the tag once in the head as instructed by your tool, avoid stacking several tools that record the same data, and check your page speed after installing.

Can I see a heatmap for a page that requires login?

Clicks and scrolls are recorded by the tag in the visitor’s browser, but the background screenshot is taken by visiting the URL. Pages behind a login or showing personalized content may produce a screenshot that doesn’t match what visitors saw, so read those maps with care.

Should I trust the mouse-movement map as an attention map?

Use it as a hint, not proof. It covers desktop only, and cursor position follows eye position only loosely. Confirm anything important with click and scroll data.

Click map or scroll map: which should I look at first?

Start with the scroll map. It tells you what people could see, which you need before you can judge what they clicked.

Want to try this on your own pages? marketingLABO’s free plan includes analytics, heatmaps and visitor history for one site with no time limit. Sign up free or compare plans and pricing.

Sources

1. Nielsen Norman Group: Scrolling and Attention (2018 eyetracking study: 57% of viewing time above the fold, 74% in the first two screenfuls; false floors)
2. Nielsen Norman Group: F-Shaped Pattern of Reading on the Web
3. MDN Web Docs: hover media feature
4. Google Analytics Help: Enhanced measurement events (scroll event at 90% vertical depth)