Guide

How to read a heatmap, and do something about it.

A heatmap is easy to look at and easy to misread. This is a short routine for going from a picture to a change you can make.

Create an account See how it works
Maximizii scroll map of a sample home page, fading from bright at the top to dark further down, with the average fold marked and a table of how far people got
The real dashboard, on sample data from a made-up coffee shop.

In short

To read a heatmap, first check it’s based on enough visits, on one device, in a sensible date range. Then look at clicks for what people try to do, scroll for what they reach, and attention for what they stop at. Turn each finding into one change, then compare again.

Before you look at the colours

  1. Check the sample

    As a rough guide, wait for a few hundred views on the device you’re looking at. With fewer, a handful of clicks can look like a pattern.

  2. Pick one device

    Phones and desktops have different layouts, so a mixed picture hides more than it shows. Most sites should start with phones.

  3. Check the date range

    Start with the period since your page last changed. Include whole weeks, because weekends often behave differently.

  4. Check the picture is current

    If your page has changed a lot, refresh its snapshot, so the heat sits on what people saw.

Then read each map in turn

What to look for on each kind of map
MapLook forIt might mean
ClicksYour main action isn’t the top elementSomething’s competing with it, or it isn’t clear
ClicksHeat on things that don’t respondPeople expect a link. See dead clicks
ClicksRepeated clicks in one spotSlow or broken. See rage clicks
ScrollA sudden drop in reachSomething looks like the end of the page, or stops people
ScrollKey content below where most people stopMove it up, or repeat it
AttentionReached, but little time spentIt’s being skimmed: rewrite it, or cut it
AttentionLots of time on one partIt’s useful, or it’s confusing: read it again and decide

Common mistakes

  • Reading colour as quality. Red only means busy. A hot “Help” link may be bad news.
  • Comparing colours across pages. Colours are relative to each map. Compare the percentages instead.
  • Acting on a few clicks. Check the count on the element, not just its colour.
  • Forgetting sticky elements. Sticky menus get clicks at every depth, which can make them look more popular than they are.
  • Stopping at the map. A map tells you where to look. Confirm with your analytics, or by asking someone to try the page.

Turning it into a change

Write down one finding and one change: “Half our phone visitors never reach the sign-up button, so we’ll move it above the testimonials.” Make the change, wait for about the same amount of traffic, and compare. Only the latest picture of a page is kept, so note the date and the numbers you’re comparing against.

Questions

How do you analyze a heatmap?

Start by checking you have enough visits on one device. Then ask what people try to do (clicks), what they reach (scroll) and what they stop at (attention). Then turn it into one specific change to test.

What do red areas on a heatmap mean?

They’re the busiest areas of that map. That isn’t good or bad in itself: it depends on whether it’s where you want people clicking.

How much traffic do you need?

There’s no fixed number, but as a rough guide a few hundred views per device. High-traffic pages get there in days, and small sites may need weeks.

How often should I check heatmaps?

After each significant change to a page, and on your most important pages every month or so.

Keep reading

Find out where they click.

Create an account See how it works