Understanding Heat Mapping and Why You Shouldn’t Rely on It

Written by Mark Friesen

Heat mapping is just one of many tools that provides information as to what actions visitors are taking on a website. A couple of the most common questions we receive from our clients are:

“What is heat mapping?”

“When and where is it applicable for a local government website?”

“Do I need heatmaps to redesign our website?”

When discussing heatmaps, we’re really talking about three different kinds of user activity maps:

  • Click
  • Move
  • Scroll

Let’s analyze each one and identify ways your local government could possibly utilize them to help inform your government website redesign strategy.

What is a Click Heatmap?

The data from click heatmaps tells where visitors are, and are not, clicking on your municipal website. CP_Homepage_Click_Heatmap.jpgMost providers use a cold to hot coloring system. Blue and green colors indicate less clicks than oranges and reds. The colors provide instant feedback as to what content and buttons users are clicking on the most. In addition, most heatmaps provide the exact number of clicks as well as what percentage of total clicks for the recorded session a specific area accounts for. More detailed services will also provide data as to how a specific click area ranks on the page compared to others.

For example, this is an image of the CivicPlus homepage for recordings during an undisclosed time. The click heatmap instantly tells you where visitors are clicking. It also tells us that during a seven-day span, the Contact Us page received*:

  • 98 clicks
  • 1.98% of all clicks
  • A rank of #11 among the most clicked areas

*Data above is for example only and not accurate.

It’s important to understand that click maps have limitations. For example, click maps record random, accidental page clicks along with intentional clicks. This can raise concerns relative to the accuracy of the data, though it should be noted that some heat mapping solutions are more reliable and accurate than others.

In addition, not all heatmap programs provide click data for drop down menus. This should be considered a must-have feature for local government websites that utilize multi-level navigation and mega menus, and is why CivicPlus heatmaps includes this feature.

Where Should I Use Click Heatmaps?

One of the main benefits of click maps is to identify areas on a webpage that are ideal for communicating important information. A good example of this can be seen relative to image placement. If an image on your webpage has a high number of clicks, but it isn’t a link, you should consider making it link to a page where your citizens can learn more information about a related topic.

For example, if there is a picture of your mayor on the homepage that has a high number of clicks, but you don’t have it linked to the About the Mayor page, simply adding a link to that page will enhance the user experience. If you don’t have an About the Mayor page, this data tells you that you might want to add this to a website priority list for a future implementation.

Do I Need Click Heatmaps for a Website Redesign?

No, it’s not imperative to use a click heatmap to inform your website redesign strategy. Having one won’t hurt, but it also won’t help much either. A click heatmap can help enhance your current pages, but will provide very little insight when it comes to redesigning a webpage.

Remember that not all the content on a webpage is clickable, nor does it need to be. Your website should incorporate non-linked text, non-linked imagery, and various engaging design elements in order to educate and inform the user. These items don’t offer any click value, so they won’t rank highly as interactive content when looking at a click heatmap, but that doesn’t mean they don’t need to be part of your content strategy.

The greatest value click heatmaps can offer for a redesign is what content can be left off redesigned pages. If certain existing content is not receiving any clicks, it may not need a prominent position on your website moving forward. It should be noted, however, that you could obtain this same information from your website analytics program.

What is a Move Heatmap?

Understanding Heat Mapping and Why You Shouldn’t Rely on It_Move_Maps.pngI’m not going to spend a lot of time on this section as these heat maps offer little insight. A move heatmap shows where a visitor’s cursor is moving across the page. Using the same hot-to-cold color system, areas of darker red identify areas were a cursor spends a lot of time on that page.

Dr. Anne Aula, Senior User Experience Researcher at Google conducted a study in 2010 that concluded:

  • 94% of people showed no correlation between their vertical mouse movements and eye tracking.
  • Only slightly better, and understandably why, 81% of people showed no correlation between mouse movement and eye tracking.

The Google study reinforces that Move Maps offer little actionable insight. One thing that can be taken away from Move Maps, is the reinforcement of the known usability trend that people read longer articles when images are included.

Where Should I Use Move Heatmaps?

When you’re trying to impress your boss to prove you know where users are placing their cursor on your website.

Do I Need Click Heatmaps for a Redesign?

No, given the little value they offer, they are not needed.

What is a Scroll Heatmap?

Understanding Heat Mapping and Why You Shouldn’t Rely on It_Scroll_Map.jpgThese heatmaps indicate how far down the page visitors are reaching based on how far down they are scrolling. It’s that simple. If you have something you want your visitors to see or read, don’t place it at the bottom of the page because data shows that, more than likely, they won’t scroll down that far, especially on long pages.

Where Should I Use Scroll Heatmaps?

Use Scroll Heatmaps when you are looking to enhance current pages. For example, if you want people to sign up to receive weekly email notifications of new pets in your animal shelter, and you have not had a lot of people signing up, check where that form is located on the page. If the form is located on the page where only 25 percent of your visitors are scrolling down to, then you need to move it further up the page.

You can also identify sections where there are sharp drop-offs in scrolling behavior patterns. Usually, the color coding used on scroll heatmaps indicates a gradual decline in the number of users viewing content further down. When there is a drastic and sharp change from warmer to cooler colors, Understanding_Heatmapping_Scroll_Map_2.pngthat can indicate that the content is not in line with what precedes it, giving users a reason to abandon the page, as it no longer gives them the information they want. When this happens, you should go back and review the content and look for ways to enhance it.

Do I Need Scroll Heatmaps for a Redesign?

No, you don’t need this kind of heat map to redesign your website. Regardless of what its color patterns imply, your still just guessing as to what changes are going to make your content more engaging. These heatmaps are meant to enhance existing pages, not create new ones.


Heatmaps are a “nice-to-have” for your local government website, and only a “must-have” if you have the resources to do something with all the data. If you think you need heatmaps to redesign your existing website, you don’t. Could it help? Maybe, but it’s a far stretch at that.

When redesigning your website, use your existing website analytics to make decisions around page layouts and navigation structure. Unlike heatmaps, the quantitative data from your pageviews, the average time on the page, entrances, bounce rates, and percentage of exits, provides you with an accurate roadmap as to what your redesign should look like.


The average time on page data point can tell you a lot about whether a webpage is effective or not. If you have a webpage that you feel offers important and relative information, and the average time on that webpage is 0:08, you’re likely not meeting your engagement goal. This could be caused by a few factors:

  1. The visitor did not get what they were expecting when they landed on the page. Google Analytics provides a Behavior Flow tool that allows you to look at the traffic through a webpage. It reports what page the traffic came from, and then what page visitors go to next. This type of tool can better tell you if a page’s content didn’t meet a visitor’s expectations.
  2. The content on the page was not helpful to the visitor.

This is not information you are going to find on a heatmap.

Time on page is another relevant data point when analyzing page efficiency. Remember to take the content of the page into consideration when analyzing data. For example, if someone is looking for your phone number on your Contact Us page, 0:08 to 0:20 is probably plenty of time, but if it’s a featured article about a new development project, 0:08 shows citizens aren’t reading the full piece.

Final Thoughts

Heatmaps can be helpful when used correctly and you have the resources to comb through the data. Placing a heatmap on your current website to help you redesign a new one is not recommended. Most of that data you’re searching for already exists in a more accurate and actionable form from your web analytics reporting and, more than likely, is free to access.

At CivicPlus, our account managers work with our clients to analyze website analytics throughout the year to ensure each community is getting the most out of its local government website. If a client wants heatmaps, we have some of the best heatmap technology available, and the people who know how to read it. We believe that a website is never 100 percent optimized, and that you can always make it better.