The power of heatmaps for your ecommerce success

Reading heatmaps properly: 5 interpretation mistakes that cost you money

Heatmaps are like X-rays. Everyone sees the colours, but few know what they mean. A red spot on a button is good. Or it shows the button doesn’t work. A green area on an image is bad.

Or it shows the image is convincing and nobody needs to click it. The colour alone tells you nothing. The context tells you everything.

Heatmaps are quick to collect and easy to misread. The costly mistakes don’t happen when the data is collected. They happen when it’s interpreted. This article covers the 5 mistakes that come up most often, and how you avoid them.

Mistake 1: confusing clicks with interest

The most common misreading: “Lots of clicks means lots of interest.” Often the opposite is true. Lots of clicks means friction. The user clicks because they aren’t getting what they expect.

An electronics shop had a red spot on its product image. The assumption: the image is interesting. The session recordings told a different story. Customers clicked the image because they expected it to enlarge. Nothing happened. They clicked again. And again. The red spot wasn’t interest. It was frustration.

The test: clicking the image opened a lightbox with a larger view. The red on the image almost disappeared. The conversion rate rose by 8%. The clicks had never signalled interest. They had signalled an unmet need.

The rule: clicks are actions, not feelings. Don’t ask “Is the customer interested in this element?” Ask “What does the customer expect when they click, and is that expectation met?”

Mistake 2: confusing scroll depth with engagement

A scroll heatmap shows how far users scroll. 80% scroll depth is often read as “high engagement”. That’s wrong. Deep scrolling can mean the user is searching and not finding.

A furniture shop had a product page with 85% scroll depth. The team was proud: “Customers read everything.” The recordings showed the opposite.

Customers scrolled to the bottom because they were looking for the shipping costs, which were hidden in the footer. They scrolled through 2,000 pixels of product description only to learn that shipping cost 49 euros. Then they left.

The test: shipping costs were shown right below the price. Scroll depth fell to 45%. The conversion rate rose by 14%. Less scrolling was good, because customers found what they were looking for faster.

The rule: scroll depth indicates searching, not reading. High scroll depth plus low conversion means the user is looking for something and can’t find it, or doesn’t like it when they do.

Mistake 3: mixing devices in one heatmap

Most heatmap tools combine desktop and mobile in one view. That’s convenient, and fatal. A button that is easy to see on desktop can be invisible on mobile. An image that looks big and convincing on desktop may be a small thumbnail on mobile.

A fashion shop analysed a heatmap of its homepage. The desktop heatmap showed strong interaction with the main banner. The mobile heatmap showed almost no clicks on it: users scrolled straight down to the products instead. The combined heatmap hid this difference.

The test: on mobile, the banner was removed and 2 rows of products were shown directly. Mobile conversion rose by 11%. Desktop conversion stayed the same, and the banner stayed there. Looking at the devices separately would have shown the difference immediately.

The rule: never analyse desktop and mobile in one heatmap. Usage patterns differ too much. What works on desktop often fails on mobile, and vice versa.

Mistake 4: reading heatmaps without a goal in mind

A heatmap shows what happens. It doesn’t show what should happen. One shop had a heatmap with intense red on its navigation. The conclusion: the navigation is important. The right question would have been: should customers really be clicking around the navigation this much, or should they be clicking the CTA?

The analysis showed that 30% of clicks went to the navigation and 4% to the CTA. The navigation was overloaded: 12 main items, 40 submenus. Customers spent more time in the navigation than on the product. The navigation wasn’t the goal. It was the obstacle.

The test: the navigation was cut from 12 items to 5. The submenus moved behind a “More” button. Clicks on the navigation fell to 12%. Clicks on the CTA rose to 9%. The conversion rate rose by 16%. The heatmap had shown that the navigation was eating too much attention, not that it was important.

The rule: every heatmap needs a hypothesis. “I suspect customers can’t find the CTA.” The heatmap confirms or refutes it. Without a hypothesis, a heatmap is just a colourful picture.

Mistake 5: treating heatmaps as the end point instead of the starting point

The most dangerous reading: “The heatmap shows a problem. We have to fix it.” A heatmap shows a symptom. You find the cause in recordings, surveys or tests. A red spot on an element that can’t be clicked isn’t a problem in itself. It’s a pointer to one.

A home and living shop saw a red spot on a line of text: “Free shipping from 75 euros.” The assumption: customers care about shipping. The fix: the text was made bigger and highlighted in colour. Result: no improvement.

The recordings showed the real cause. Customers clicked the text because they expected a page with shipping details. The text wasn’t clickable, but it looked like a link. Customers didn’t want to read the text. They wanted more information.

The test: the text became a link that opened a modal with the shipping details. Clicks on the text went down, because customers got the information they were after. The conversion rate rose by 6%. The heatmap had shown the symptom. Without the recordings, the test would never have found the right fix.

How to read a heatmap properly: the 3-step process

1. 1
   

   Ask a question.

   “Why do 60% of visitors leave the page without buying?” “Can customers find the button?” “Do they read the description?”

2. 2
   

   Look at the heatmap with that question in mind.

   Ignore everything that doesn’t relate to it. A red spot on the logo is irrelevant if your question is about the CTA.

3. 3
   

   Form a hypothesis.

   “Customers can’t find the CTA because it’s below the fold.” Then test that hypothesis with an A/B test, not with another heatmap.

A shoe shop followed this process. Question: “Why is mobile conversion 40% lower than desktop?” Heatmap analysis: mobile users scrolled a lot but hardly clicked the CTA. Hypothesis: the CTA isn’t visible enough on mobile.

Test: a CTA button in a contrasting colour, fixed to the bottom of the screen. Result: mobile conversion up 22%. The heatmap had raised the right question. The test supplied the answer.

Frequently asked questions about reading heatmaps

How long should I collect data before analysing a heatmap?

At least 1,000 sessions per device type (desktop and mobile). With less data, the patterns are random. Beyond 5,000 sessions you learn nothing new; only the precision of the colour intensity changes.

Should I use click, scroll or move heatmaps?

Click heatmaps for the first diagnosis: where do customers click? Scroll heatmaps for content pages: how far do they read? Move heatmaps tell you the least. They show where the mouse goes, not where the click happens. We rarely use them.

Can I use heatmaps for A/B tests?

Not directly. Heatmaps show what happens on one page. A/B tests compare two pages. But heatmaps can supply the hypothesis for an A/B test. “The heatmap shows customers can’t find the CTA.” → “Test: move the CTA higher.” The heatmap is the diagnosis. The A/B test is the treatment.

How do I tell interest from frustration on a heatmap?

Interest shows up as a single, deliberate click on a clickable element. Frustration shows up as several fast clicks on the same element (rage clicks), especially when the element isn’t clickable. A red spot with concentrated colour is interest. A red spot with a diffuse, repeated pattern is frustration.

How often should I refresh my heatmaps?

After every significant design change. After every winning A/B test. And at least once a quarter, even if nothing changes. A heatmap from a year ago doesn’t show how users behave today, especially if you have run tests in the meantime.

You can learn this step by step in the Academy track A/B-Testing Mastery ↗.