Heatmap

Arguments about layout ran for years without evidence. One person says nobody will ever see a button sitting that far down; another says putting it at the top just gets in the way. Whoever spoke more often, or outranked the other, won.

Analytics tools didn't settle it either, because the numbers they produce cover a whole screen at once. You can learn that 70 percent of the people who reached the pricing page left without doing anything. Which part of the page produced that is not in the number. Finding the thing to fix meant opening the page and guessing.

Pagedeck dragged one of these out for two weeks. Ravi wanted the contact button moved below the comparison table; Noa wanted it visible in the first screenful. Both had a reason and neither had evidence.

A heatmap drops a record onto that table. It takes where thousands of real visitors clicked and how far down they scrolled and lays it straight over the picture of the screen, so the conversation happens over one image instead of two guesses.

A heatmap is made of five things. Drop any one of them and you still get a picture, but not one anybody can read.

1. The base screen — the screenshot the color gets layered onto. Record which screen it is and when it was captured. If the layout changed in between, the color and the screen no longer line up and the image means nothing.
2. The color layers — pull three separately. A click map shows what people pressed, a scroll map shows how far down they got, and a movement map traces where the cursor went. The first two are behavior; the third is inference, so it carries less weight.
3. The scale — most tools use a relative one. The most-clicked spot on that screen becomes 100 and everything else is colored as a fraction of it. Red on one screen is therefore not the same quantity as red on another. Printing the raw click count next to the image keeps that confusion down.
4. Collection conditions — date range, device, traffic source, and whether the visitor was logged in. Device has to be split. Desktop and mobile have different layouts, and mixing them stacks two screens' worth of color into one image.
5. Sample size — how many visits went into the picture. Below a few hundred, the habits of a handful of people show up as red dots, so most teams wait for something like a thousand sessions.

The tool does the making. Install the measurement snippet once and visits accumulate on their own. What a person does is choose which screen, over which dates, under which conditions — and almost all of a heatmap's quality comes out of that choice.

At Pagedeck, Noa pulls the ones for product screens and Ravi pulls the ones for landing pages, which are standalone pages built to drive a single action. They read them at different angles. Noa is watching whether users find a feature; Ravi is watching what share of visitors get as far down as the call to action (CTA).

Designers, growth marketers and product managers are the readers, and there are three habits worth keeping.

1. Decide the question before opening it. Open one with no question and the conversation starts from whichever red dot catches the eye. Ask how many people reach the comparison table and there's exactly one place to look.
2. Don't stop at the heatmap. The image says where people clicked and never why. When clicks pile up somewhere strange, the next step is rewinding those visitors in session replay or handing the same task to people in a usability test.
3. Confirm the decision another way. Use a heatmap to pick what to change, then check whether the change is actually better with an A/B test.

"The scroll map on pricing says only 30 percent get past the first screenful. Let's move the comparison table up."

An argument for a layout change, with a scroll map behind it.

"Clicks are stacking up right here and it isn't a button. Nothing happens when you press it."

People are reading that element as pressable, so either make it a real control or stop it from looking like one.

"Pull mobile and desktop separately. I can't read the mixed one."

Two differently laid out screens are stacked in one image, which makes it impossible to judge.

Pagedeck's two-week pricing argument ended with a single image. The scroll map showed 30 percent of visitors getting below the first screenful, and half of those reaching the comparison table. Neither side of the argument was right. Whatever went below the fold, nine out of ten people weren't going to see it. What the team changed was the length of the first screenful, not the position of the button.

The following week Noa found clicks clustering on the price figures in the table, which weren't interactive at all. Rewinding ten of those sessions showed people pressing the numbers expecting the detailed terms to open. Those figures became expandable rows soon after.

Reading dark areas as the parts that are working is the most common mistake. Concentrated color looks like concentrated interest, so the reading comes easily. A cluster of clicks says only that people pressed there — never whether the press led anywhere they wanted. Clicks piling onto an element that does nothing is among the worst signals a screen can give, and in the picture it looks like the prettiest red spot on the page. Carry those reds into a meeting as results and the thing that needs fixing gets presented as an achievement.

Trying to close a decision with one heatmap is the other frequent slip. The image looks unambiguous and "thousands of visitors" sounds like plenty of evidence. But the color is relative within that one screen, and it carries nothing about why people moved the way they did. Move an element on the strength of the picture alone and the same shape of picture often reappears around its new position. Color tells you where to look. What to do comes afterward, from a different method.