Heatmaps

A heatmap is a colored picture laid over a real shot of your page that shows where people click and how far down they read. Instead of a list of numbers, you get a glance you can feel: bright, warm spots are where the action is, and dark, cool areas are where almost nothing happens. It turns “what are people actually doing on this page?” into something you can see in a second.

Think of it like a worn path across a grass field. Where many feet walk, the grass wears down and the path shows clearly. Where few people go, the grass stays full. A click heatmap is the same idea for your page: the more people click a spot, the brighter it glows.

What you see

The page has a picture of your chosen page with the heat drawn on top, plus a few controls around it.

• A page title that reads “Heatmaps”, with the date range shown nearby, for example “Last 30 days” with the calendar dates spelled out.
• A picker for which page you are looking at. A heatmap is always about one specific page at a time, so you choose the page first.
• A row of screen width tabs: mobile, tablet, desktop, and wide. People on a small phone and people on a big monitor see your page laid out differently, so the heat is shown separately for each width. You pick the width you want to study.
• The main view: a real picture of your page with the heat painted over it. There are two kinds of heat you can look at.
  • Click heat. Warm, bright spots show where people click the most. Cool or dark areas are where people rarely or never click. A bright glow on your main button is a good sign. A bright glow on something that is not even clickable is a red flag worth a look.
  • Scroll view. This shows how far down the page people actually read. The top of the page is seen by everyone. As you go down, fewer and fewer people reach that far, and the view shades to show the drop. The line where most people stop is your “fold”, the point past which a lot of your visitors never look.
• Counts and labels so you can read the heat in real numbers, not just by color, such as how many clicks a spot received.

“Heat” here just means how much something happened. Brighter equals more. It is the same idea whether you are looking at clicks or at how far people scroll.

How to read it

Pick the page, pick the screen width, then read the bright spots and the scroll line.

Here is a worked example. Say you are looking at your home page on the desktop tab for the “Last 30 days”, and you see:

• Your top navigation links glow brightly, which is expected, people use the menu.
• Your main “Get started” button has a warm but not very bright spot. Say it shows 1,200 clicks.
• A product image lower down glows brightly too. Say it shows 3,000 clicks. But that image is not a link, so nothing happens when people click it.
• The scroll view shows that most people stop reading about halfway down the page, right above a section you think is important.

What does this tell you? Three useful things. First, people are clicking your product image 3,000 times expecting it to do something, but it is a dead end, so you should make it a real link to the product. Second, your actual “Get started” button gets fewer clicks (1,200) than the image people cannot use, so it may not be standing out enough. Third, the important section is below where most people stop reading, so either move it up above the fold or add something that pulls people down the page. None of this is obvious from a plain visit count. The heatmap makes it visible.

Always check more than one screen width. A button that sits in plain sight on desktop can be pushed far down on mobile, where most of your visitors might actually be. Read the same page across the mobile, tablet, desktop, and wide tabs before you decide what to change.

Customize it

You control which page, which width, and how the picture is shown. Here is each control and when to use it.

• Pick the page. Choose the single page you want to study. Switch pages when you want to study a different one, since each page has its own heat. Start with your most important pages, like your home page, a key product page, or your pricing page.
• Pick the screen width tab. Switch between mobile, tablet, desktop, and wide. Use the mobile tab when most of your visitors are on phones, because the layout and the heat can be very different there. Use the desktop or wide tab to study the experience on big screens. Check all of them for any page that matters.
• Zoom. Change how big the page is shown, with options to fit it to your screen or to view it at 50, 75, 100, or 200 percent. Use fit to see the whole page at once and get the big picture. Use 100 or 200 percent to zoom into a busy area and read exactly which small elements people are clicking. Use 50 percent to take in a very long page in one look.
• Set the date range. Use the calendar to pick the period, such as the last 7, 30, or 90 days, or a custom start and end day. Use a short range to check the effect of a change you just made to the page. Use a longer range to gather enough clicks for a clear, stable picture, since heat needs a good number of clicks before a real pattern shows.
• Split by URL parameters. Some pages show different content depending on extra bits added to the web address (URL parameters), for example a campaign tag or a product variant. You can split the heatmap by these so you compare the heat for each version separately instead of mixing them. Use this when the same page address is really showing different things to different people and you want a fair, like for like view.

Use cases

• Find dead clicks on things that are not links. Open the click heat for an important page and look for bright spots on images, text, or icons that do nothing when clicked. Action: if people keep clicking something that is not a link, either make it a real link to where they expect to go, or change how it looks so it stops appearing clickable. Then check the heat again later.
• Check if your main button gets attention. Open the click heat and find your most important button, like “Buy now” or “Sign up”. See whether it is one of the brighter spots or whether other things outshine it. Action: if your main button is cool while less important things glow, make it stand out more, move it higher, or reduce the clutter around it, then watch the next batch of clicks.
• See how far people scroll a long page. Open the scroll view for a long page and find the line where most people stop reading. Action: if your key message or call to action sits below that line, move it up above the fold, or add a strong reason for people to keep scrolling, then re-check the scroll view to confirm more people now reach it.

Tips

• A page needs clicks before it can show heat. This is the most common surprise. A brand new page that nobody has clicked yet will look empty, with no warm spots at all. That is expected, not a bug. Give the page some real traffic and clicks, then come back and the heat will appear.
• Always check mobile, not just desktop. The layout and the behavior can be very different on a small screen, and for many sites most visitors are on phones. A change that looks fine on desktop can hurt the mobile experience, so read both.
• Bright does not always mean good. A bright spot on your main button is great. A bright spot on something that does nothing is a problem, because people are trying to use it and failing. Read what the bright spot is sitting on, not just how bright it is.
• Gather enough clicks before you judge. Heat from only a handful of clicks can be misleading, like calling a coin unfair after two flips. Pick a longer date range, or wait for more traffic, so the pattern is real before you act on it.
• Use the scroll view together with the click heat. The click heat tells you where people act. The scroll view tells you how many people even reach that far down the page. Reading them together stops you from polishing a section most visitors never see.