How to read a website heatmap, and what to test next

A website heatmap turns visitor behavior into color. Hot areas got the most clicks or attention. Cold areas got little. It is 1 of the fastest ways to see a page the way visitors do.

But a heatmap only shows what happened. It does not tell you what to change. Here is how to read a heatmap, and 3 tests that show what to do next.

How to read a website heatmap

1. Start with the scroll map. Find where most visitors stop. Anything important below that line is seen by few people.
2. Check the click map. Look for clicks on things that are not links, like images or labels. Those are signs of confusion.
3. Look for ignored buttons. A cold main button is a problem worth testing.
4. Split by device. Mobile and desktop heatmaps often tell different stories.
5. Write a hypothesis, then test it. Never redesign from a heatmap alone.

A sticky add to cart bar lifted mobile conversion 7.0%

On mobile, the add to cart button scrolled out of view as shoppers read down the product page. We tested 2 sticky add to cart bars. The simple bar lifted conversion 7.0% on mobile over 15 days.

This is the classic scroll map finding: shoppers keep reading, but the button stays behind. The fix kept the button with them.

Visitors preferred the call to action further down the page

A set of article pages put the first call to action about 3 scrolls down. We moved it up to within the first 1.5 scrolls, where far more visitors would see it. Visitors preferred the original: conversion fell 16.3%, and we paused the test after 9 days.

More eyes on a button does not mean more clicks. A likely reason: readers who reached the original spot had read enough to want the offer. Earlier, the button asked too soon.

Visitors preferred keeping the content below the form

A landing page kept its full content below the lead form. Once visitors started the form, we removed everything below the fold. Visitors preferred the original: conversion fell 5.6% over 13 days, so we paused.

A scroll map might show few people reading that content. But the ones who did may have needed it to finish the form.

What to test next

Use the heatmap to pick the spot, then test 2 or 3 ideas there. Our experimentation and testing work follows that order. To find the step to focus on, see Conversion funnel optimization: fix the step that loses the most people. To learn why visitors behave the way the map shows, see Usability testing for ecommerce: how to find what to fix.

A heatmap tells you where to look. A test tells you what works there.

Frequently asked questions

What is a website heatmap?

A visual map of where visitors click, move and scroll on a page, shown as hot and cold colors.

How do you read a heatmap?

Start with the scroll map to see where visitors stop, then the click map to see what they try to click. Split by device.

What is the difference between a click map and a scroll map?

A click map shows where people click. A scroll map shows how far down the page they get.

Should important content go above the fold?

Not always. In our test, moving a call to action higher cut conversion 16.3%. Test it.

Can heatmaps increase conversion?

Not by themselves. They show where to test. In our test, a sticky add to cart bar that kept the button in view lifted mobile conversion 7.0%.