How to Interpret and Use Clickmaps to Improve Your Website’s UX

• Updated on: 2019-12-21
• Read original article here

Website clickmaps can offer all kinds of valuable information about your website and the people visiting it. Among other things, a clickmap can tell you:

The trick is, in order to use that information to improve your website’s experience and efficacy, you have to know how to read and interpret what you see on a clickmap.

Let’s back up for a second: What is a clickmap, really? In a nutshell, a clickmap is a visual representation of where website visitors click on a given page of your website, and it typically captures click behavior over a period of time. This type of website user experience (UX) report is also known as a heatmap (which is what we call it here at Crazy Egg).

In this article, we explain more about what you can learn from a clickmap and how to read and understand them (with 3 examples). Then, we share a few of the more advanced ways you can use clickmaps to improve your website’s UX.

Note:Ready to see your clickmaps and get to know your visitors’ click behavior, plus how you can optimize your website for more conversions? Sign up andtry Crazy Egg free for 30 days.

At Crazy Egg, we have 5 reports (called Snapshots) that deal with click behavior of your website visitors:

You can attack your users’ click behavior from a couple different angles with these reports—and learn a few key things along the way.

The Heatmap Report is the standard “clickmap.” It shows you where visitors click on a given webpage or landing page by using different colors to indicate the frequency and number of user clicks.

So, for example, you’d want to see white (which indicates a lot of mouse clicks) on your calls-to-action (CTAs). If your CTA buttons show up blue (which indicates very few clicks) on the heatmap report, that’s a signal that something is stopping visitors from converting.

Our Confetti Report shows more granular information about individual visitors based on their  click behavior. You can see each individual click represented on the webpage (instead of just an indication of the quantity of clicks). One of the key differences here is that the Confetti report lets you break out 22 different segments and profiles to get a deeper look at who is actually doing all that clicking.

For example, you can look at click behavior for new visitorsvs.returning visitors or break it down by the referring page a visitor came from. Our Confetti report also automatically tracks any UTM campaigns you have set up, so you can look at clicks by campaign, too.

Here’s an example of how that breakdown can impact your business: We’ve heard from a few customers who filtered their Confetti snapshots by country, which helped them identify new markets they could target. A year later, those new markets led to 15-16% revenue growth.

The Overlay Report is similar to the Confetti Report in that it allows you to filter through the clicks on your webpage based on details like new vs. returning visitors, device, UTM campaign, and more. The difference is that the Overlay Report enables you to look into that data, grouped together for each clickable element on the page.

So, for example, you can see whether visitors who landed on your page after searching for a particular keyword in Google click on your CTA at a higher rate than visitors who searched a different keyword.

Similarly, the List Report shows you the percentage of users who clicked on each clickable element on the webpage. So if your Google Analytics data shows a certain webpage has a high exit rate, you can use the List Report to figure out where those visitors are going.

Here’s another example: If people are clicking to start filling out a form but a large percentage of them aren’t clicking to submit the form, you can use the List Report to identify that. Then, you can use the Overlay Report above to dig into who those visitors are and why they may not be completing the form.

In the most basic sense, reading a clickmap is fairly easy. Red means a lot of clicks. Confetti dots equal individual clicks. But, of course, figuring out where and how often visitors click on your webpage isn’t the end-goal, is it?

Clickmaps are valuable because of the conclusions you can draw from the data they show you. And drawing those conclusions starts with anchoring yourself. Why did you create a snapshot on this page to begin with? Was there a datapoint in Google Analytics that you wanted to understand better? What was the ideal journey for your ideal customer after they visit this page?

When you have a sense of what you’re really looking for in a clickmap, it becomes easier to make sense of the colors, dots, and numbers in front of you. Clickmaps show you:

Note:Ready to see your Heatmap and get to know your visitors’ click behavior, plus how you can optimize your website for more conversions? Sign up andtry Crazy Egg free for 30 days.

To help illustrate all of that, let’s look at a few examples of clickmaps and talk about what you can learn from them and the corresponding actions you might take.

Here’s an example of our Heatmap Report on a homepage:

You can see by the tiny blue splotch that there hasn’t been a lot of clicks on the call-to-action (CTA) button—which is the whole point of the page. That tells us something about the button (positioning on the page, color, copy, etc.) isn’t working for their visitors.

Here’s what the Heatmap Report looks like after they tested new copy for the CTA:

You can tell from the report that the new copy compelled a lot more people to click on the CTA.

Here’s an example of our Confetti Report on an eCommerce webpage:

This snapshot illustrates our Confetti example from above really well—by filtering individual clicks by country, you can see that visitors in India are doing a lot of clicking on CTAs. That could be an indication that India is a potential new market for the business to expand into.

Here’s an example of our Overlay Report on a blog post:

In the snapshot, we can see that relatively few visitors clicked on the hyperlink “getting higher conversion rates.” Yet quite a few people clicked on the text about “common problems marketers and business owners” face. That tells us that readers of this blog post are more interested in common problems facing people like them than getting higher conversion rates.

With that info, you can keep blog readers engaged and moving through your content by linking to new or existing content on common problems faced by marketers and business owners.

Once you’ve gotten the hang of reading and interpreting clickmaps, you can start using them in more advanced ways—gleaning more information and more value out of them and further improving website UX, conversion rate, and more.

When you’re ready, here are 3 more advanced ways to use clickmaps:

As we covered previously, the Confetti and Overlay reports allow you to dig much deeper into the profile and segments of the users who click on various page elements on your website. And there are countless ways you can filter these users and clicks to get different information.

For example, you can track how the click behavior of users who are logged in compares to the behavior of non-users. 

For eCommerce, you can look at the click behavior of customers who converted on the webpage versus those who didn’t make a purchase. Most eCommerce websites track this information via cookies and they can pass that info along to Crazy Egg where it gets integrated into your clickmaps.

If you’re running A/B tests on your website, clickmaps can help add more context to the results you see. Typically, A/B testing software tells you which of two variants was more effective for the pre-set goal (conversions, engagement, etc.).

When you add clickmaps into the mix, you can compare both variants side-by-side and get a sense of how each variation altered click behavior on the page.

In addition to using clickmaps to track user behavior during—and right after—an A/B or other kind of test, more advanced users use them to monitor click behavior on an ongoing basis. Why? Something can always change—even when you aren’t actively changing or testing a given page.

For example, the ad copy sending visitors to the page might change. If that creates a message mismatch between the ad and the copy on your webpage, that can affect click behavior and conversion rates.

Clickmaps and heatmaps are some of the best tools website owners have at their disposal to understand how users interact with their webpages. Now that you know how to read and interpret them, you can take concrete actions that improve your website’s UX, boost your conversion rates, add context to your A/B tests, and more.

Note:Ready to see your Heatmap and get to know your visitors’ click behavior, plus how you can optimize your website for more conversions? Sign up andtry Crazy Egg free for 30 days.