When to Use a Heatmap in UX and How to Simulate One

Heatmap Simulator is the hypothesis tool: screenshot or empty canvas, gradient, fake clicks, export. It does not install analytics. Use it to argue about a layout before you instrument, or to explain a predicted pattern in a critique. Use a real heatmap product when you have traffic, consent, and a question the picture can actually answer.

Heatmaps as hypotheses, not evidence

A simulated map says: we think people will hit the price, the first CTA, and the nav search. You place the blobs. That is useful when:

• two layouts are on the table and you need a shared picture of the intended path,
• a stakeholder wants “data” and you only have a mock - better to label it a prediction,
• you are teaching why a 3-column footer will never get clicks.

It is not useful when you treat the PNG as proof. The tool will happily draw heat on a bad button. That is the point of a critique: the picture makes the claim visible so someone can disagree.

Write the claim in a sentence next to the export: “Primary conversion is the right-hand card; we expect little heat on the hero video control.” If you cannot write the sentence, you are decorating.

Click, scroll, and move are different claims

Click maps answer “where did people try to act?” Useful on forms, pricing, and nav. Misleading on pages where the main task is reading (a documentation article may have few clicks and still succeed).

Scroll maps answer “how far did people go?” Useful when the CTA is below a fold or a lazy-loaded block - see How Lazy Loading Images Affects Page Speed if the fold is also a performance issue. A scroll map will not tell you whether they understood the paragraph they passed.

Move / hover maps are messy. Cursor parking, reading with the mouse, and accidental motion all look “hot.” Do not redesign a heading because a hover map glowed there.

The simulator is at its best as a click-hypothesis overlay on a static mock. Do not pretend it reconstructed a scroll study.

When a screenshot overlay is enough

Drop a PNG of the frame (1440×900 or a phone size) into Heatmap Simulator, set the canvas to match, and place clicks where you expect or fear them. Compare two exports in a slide: current vs proposed.

This is the right fidelity for:

• a design critique next week,
• a workshop where nobody has analytics access,
• documenting a predicted failure (rage-clicks on a non-button card).

Processing stays in the browser; the background image does not need to go to a vendor. That is the opposite of exporting 50,000 session recordings to make a pretty GIF.

If the structure of the product is the question (what nests under what), a heatmap is the wrong shape. Use Tree Builder or How to Visualize Tree Data Structures.

How to simulate a pattern before you instrument

1. State the task (“user wants to start a ping test”).
2. Capture or export the frame that contains that task.
3. Open Heatmap Simulator, size the canvas, add the image.
4. Place heat on the controls that should complete the task. Optionally add a second layer of “distractor” clicks you are afraid of.
5. Export PNG or JSON if you need to attach it to a ticket.
6. If you later install real analytics, compare the prediction to the first week of click data. Update the layout or update the hypothesis.

Pick a gradient you can read in a printout (Fire is traditional; a two-stop brand gradient is fine if contrast remains). The gradient is not the insight.

What a real analytics heatmap still requires

• Enough sessions that one intern’s click path is not 40% of the map.
• Legal/consent basis to record.
• A stable URL and a page that is not a one-off campaign pixel.
• The ability to segment (mobile vs desktop heatmaps are different arguments).

Without those, a vendor heatmap is theater. A simulator is more honest: it never claimed to be traffic.

Rage-click and dead-click reports are closer to evidence than a pretty overlay, and they still need volume.

When to skip the heatmap entirely

• You can watch five people attempt the task. Notes beat a blob.
• The question is “what is the information hierarchy?” - draw a tree.
• The page is a single form with one button. You already know where clicks go.
• You are choosing type scale or color tokens - Color Studio, not a heatmap.

Skip also when the team wants a heatmap instead of writing the hypothesis. The picture should follow the sentence, not replace it.

Simulate a prediction before you install analytics

If you are arguing about where clicks should land, open Heatmap Simulator and label the export as a prediction. If you are arguing about nested IA or JSON shape, open Tree Builder. Install a real heatmap only when you have users, consent, and a question the map can falsify.