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:
- Where individual users click on a page
- Where on the page users click the most (and least) often
- How changes to the web page’s copy, design, and more can affect where and how often users click
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 and try Crazy Egg free for 30 days.
What Can You Learn from a Clickmap?
At Crazy Egg, we have 5 reports (called Snapshots) that deal with click behavior of your website visitors:
- Heatmap Report
- Scrollmap Report
- Confetti Report
- Overlay Report
- List Report
You can attack your users’ click behavior from a couple different angles with these reports—and learn a few key things along the way.
What You Can Learn from the Heatmap
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.
What You Can Learn from the Confetti Snapshot
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 visitors vs. 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.
What You Can Learn from the Overlay Report
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.
What You Can Learn from the List Report
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.
How to Read and Understand Your Clickmaps
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:
- Whether or not visitors are following that ideal customer journey—including where they come from to get to a webpage and where they go afterwards.
- Which elements on a page your ideal customers are engaging with the most.
- The quality of traffic to a page, in terms of following that ideal customer journey.
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 and try Crazy Egg free for 30 days.
Examples of Clickmaps and the Conclusions You Can Draw from Them
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.
Heatmap Report
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.
Confetti Report
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.
Overlay Report
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.
Advanced Ways to Use Clickmaps to Improve Your Website
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:
Track Custom User Variables with Confetti and Overlay Reports
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.
Add More Context to A/B Tests
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.
Monitor Website UX on an Ongoing Basis
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.
Improve Your Website UX with Clickmaps
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 and try Crazy Egg free for 30 days.
