And while we may think of heatmaps as a 21st-century thing, it turns out they have their roots in the statistical analysis techniques of the 19th century.

Now heatmaps are the most-used tool for representing complex statistical data. Doctors, engineers, marketers, sociologists, researchers of every kind, use heatmaps to make complex data sets comprehensible and actionable.

That’s the secret to their success: charts have to be interpreted, tables have to be understood, but heat maps are self-explanatory, intuitive.

Sounds great. So what am I looking at?

What is a Heat Map?

A heat map is a tool that uses color the way a bar graph uses height and width: as a data visualization tool. If you’re looking at a web page and you want to know which areas get the most attention, a heat map shows you in a visual way that’s easy to assimilate and make decisions from.

What does a heat map show?

A heat map uses warm-to-cool color spectrums to show you which parts of a page receive the most attention. This heat map shows how far down the page users have scrolled:

You can think of heatmaps as a form of visual storytelling. Creating a heat map helps you convey information instantly, so heatmaps are a great tool for visualizing analytics data and web activity.

How does a heat map work?

Heat mapping software works by collecting data from a web page and displaying that data over the web page itself.

Here’s how Crazy Egg does it.

First, we take a snapshot of the web page at the URL you select. When the HTML of the page loads, versions of what’s loaded are sent to our servers too, thanks to a short section of JavaScript inserted into your site’s code.

Then we create a map of all the elements on your page – everything that anybody might interact with. These and their tags and their parent elements are what we use to build a map of user activity on your page.

Next, we collect all the activity data. Every time a user does something on your web page, we flag it.

(We also use a piece of code to make sure we know it’s unique users, so you don’t get duplicate or multiple users messing with your figures.)

There’s a lot going on under the hood to make this happen, but the whole point of a heat map is that you don’t need to necessarily know about this to get value from it.

Suppose someone comes to your page and clicks on your CTA. We’ll record that click and add it to all the other information we have about that page.

Then when you view the page in the dashboard, you’ll see the aggregate of everything every unique user did on the page, which looks something like this:

Longer or shorter content? Where should that CTA be? Scroll map lets you see what proportion of your users scrolled where before bouncing.

This matters because if most of your readers aren’t reading your long-form blog posts, you may be better off spending your time creating other types of content.

Scroll map tells you where the CTA sweet spot on your site is: the place most eyeballs see. It also tells you where your design isn’t quite on the nose.

Sudden, strong color changes can indicate that users “think whatever follows is no longer connected to what came before (called ‘logical ends’),” says Peep Laja. “These are sharp drop-off points that are hard to see with just Google Analytics.”

Confetti is like a highly specific version of a traditional heat map. It’s a high-resolution view that lets you see individual clicks, each represented by a colored dot on the report.

Why bother? Partly because you’ll be surprised at the weird stuff people click on, including non-clickable elements. That can give you unique insights into how users navigate or fail to navigate your website.

For instance: let’s say a certain page has high bounce. The confetti report reveals that users visit that page, try to click on a bunch of different items that aren’t clickable, and then get frustrated and leave. They want to click through – they just can’t figure out how.

Overlay

The overlay report breaks down the clicks on your website into percentages per element. This lets you see exactly which individual elements generate clicks.

You can see in the thumbnail above that there are small plus signs on the page.

Each of these represents a page element, and their color represents how many clicks they get. Blue is fewest, while green, orange, and red represent progressively more clicks.

Heat maps: When should you use them?

All the time!

No, really. As flippant as it sounds, heatmaps are so useful and so intuitive that you should pretty much have one on the go all the time and check it regularly.

Here are a few scenarios where having heatmap data handy can help you quickly make better marketing decisions:

Website redesign

Redesigning a website can be an expensive, time-consuming undertaking. The last thing you want is a redesign that doesn’t work better than the original.

So graphic designers can use heatmapping tools to understand how user behavior compares with graphic elements like color, contrast, and placement to design a website that converts effectively.

Obviously, graphic designers already know all this stuff in principle. But different audiences behave differently on different websites.

Knowing how your audience behaves on your site could save you from missing the mark and winding up with a site that doesn’t convert or that your particular audience finds tough to navigate.

A/B testing

You’re doing this, right? A/B tests deliver crucial conversion bumps that can be the difference between a rapidly growing business and one that struggles to survive.

Heat maps can give you instant, usable insights into exactly what your users do differently on the different versions of your landing page, blog post, or even your home page.

When you’re testing moving the button, changing the copy, or altering the images, you can see the page’s conversion rate and understand that one page converts better than another (hopefully, the test converts better!).

With a heat map, you can see exactly what conversion behaviors are different. Maybe a longer page converts better, so you think: let’s make all our pages long. Makes sense.

But what if the longer page has some other difference – more compelling copy above the fold, let’s say – and that’s what made the difference? With a heat map, you can see immediately where people scroll and where they click, so you’re never in the dark.

Content marketing

Even now, most content is written. It’s words on a page.

Are your users reading it?

Scroll maps can show you how far down the page your users scroll, so you know if they’re reading your content. Check out which CTAs get the most attention with a click map and you’ll know more.

He identifies use cases, documents what existing customers are doing, and goes into depth about why it’s important and why so many existing solutions don’t work.

If he’s super spammy and promotional about it, no one will read it; but he knows that, so the post is mostly about the challenges of the security landscape, not the product.

He posts the piece to his blog, tweets and shares it, and it gets decent traffic.

So far, so good. The next week he checks out the heatmaps. The scroll map shows that only about one in fifteen or twenty of his readers reach the end of the post. Hmm, thinks Michael. Maybe 7,000 words is a bit too long. Looks like no one really wants to read it.

But he’s an old hand so he checks the other reports too. The confetti report shows that, of the people who read to the end of the post, almost all are clicking on his CTA.

Michael doesn’t have an underperforming piece of content that people are bouncing away from; he has a lead gen machine that’s disqualifying unsuitable prospects before they even contact him!

He can learn all that from immediate heat map data, leaving him more time to write his next 7,000-word opus.

What You Can Learn from a HeatMap

Heatmap data can help you to quickly see:

Which headlines draw visitors in and make them click

Which images attract attention and what people do about it – you’ll be surprised how many try to click the image

What distracts visitors from your core content (Many first-time heat map users are shocked at how differently their users navigate the site compared with their expectations.)

Whether visitors see your email opt-in box (Low opt-ins and click-throughs can be due to something as simple as opt-in boxes that don’t stand out. Heatmaps make that clear and obvious so you can fix it.)

You can also use a heat map to find out:

Whether your navigation is working (Do users know it’s there?)

If people can locate search options easily

Whether visitors are reading your content and how much of it (This is a huge use case for scroll maps!)

Drill deeper and you can see:

Where to place the content that’s most important to your visitor’s goals (In a recent study, ConversionXL found that user viewing time was distributed almost exactly in line with the Pareto principle: 80% above the fold, 20% below it. (What’s the fold?))

The difference between what men and women, older and younger audiences, and people from different geographical locations want from content

Which images are being seen, how users are interacting with them, and how to use them more effectively

All that adds up to an easy way to identify issues that hurt conversions and an easy way to continuously optimize your fixes for them. It’s a bit like having x-ray vision for your website, and I can’t be the only person who’s wished for that sometimes.

Understanding heat maps

Reading heat maps is faster and more intuitive than getting usable information out of columns of figures. But they still need to be interpreted.

How to read a heat map

Let’s look at a couple of real-time heat map examples. Here’s how Khan Academy used a heat mapping tool to understand how their users were interacting with their site.

The Heat Map tool shows the Khan Academy homepage snapshot, displaying the proportion of visitors who clicked on each item on the page.

What does this show us? In the top menu, users are clicking extensively on “Watch,” “Practice,” “Coach” – but not “Contribute,” which is getting almost no attention.

“Search” gets a lot of action, the video gets played a lot, and the two CTAs under the first header are also getting plenty of attention.

We can also see that the social links in the top right-hand corner of the image aren’t getting any attention at all.

By simply seeing where on the page users click, you can see if you need to move any of the images around, make the right course of action clearer and easier to find, and how confused your visitors are.

There’s more.

The same page in Scroll Map shows that the biggest concentration of attention is the middle of the screen above the fold:

The long tail of link clicks in List View matches up pretty well with the long tail of attention that we saw in the Scroll Map report. Few scroll down this far, but of those who do, many click one of these links. That tells you that the links are probably in the right place and worth keeping.

Heat Map and Scroll Map can be used together to get a clearer view of visitor behavior. For instance, here’s Khan Academy’s Contribute page in the Heat map report:

Only about half the people visiting the site even scroll down that far. Move the CTA? Give it its own page?

Or is the copy not persuasive enough to keep people reading? Check the color changes to see.

Looks like it’s “Count Me In” where people stop looking. That first paragraph, under “Help translate our content into other languages!” isn’t grabbing readers and holding them.

By using the Scroll Map to see where attention falls away and the Heat Map to see where actions change, you can build a picture of not just what people do but why they do it. That gives you the knowledge you need to make decisions that lead to conversions and growth.

Let’s get started with your heat map.

Heat maps: Getting started

Heat maps are relatively simple to set up. We’ll be giving instructions for setting up a Crazy Egg heat map. The process takes literally a couple of minutes. Once it’s set up, checking back to access your reports is also super simple.

How to create a heat map step by step

Step 1: Sign up

1. Create a CrazyEgg account

Go to https://www.crazyegg.com/ and start the process. You get 30 days free – you just need a website URL, email, and password.

You’ll be asked to choose a plan. That’s the sign-up process complete.

Step 2: Set up a snapshot

Drop the URL of the page you want to test into the URL box. (Make sure the tracking code is on that page!) Name the snapshot anything you want that makes sense to you.

You can check any and all devices – just uncheck the ones you don’t want. The example above is going to give information only for mobile traffic, on a mobile screenshot. (Make sure the screenshot and traffic match up!)

You can end after a set time or after a set amount of traffic. The default is 60 days or 25,000 visitors, but you can get in there and change it if you have low traffic or you think you can find out what you need to know with fewer visitors.

When your snapshot is up and running, you’ll be able to see it on your dashboard.

7 Heat Map Case Studies

Here are seven examples of how people have used CrazyEgg heatmaps effectively:

1. Softmedia Boosts Conversions by 51%

Softmedia used heatmaps to identify problem areas on their website. They successfully identified distractions that were preventing visitors from completing the desired actions. After removing these, conversions increased by 51%.

The left pair of heatmap images shows that a “Do not click here” button was distracting visitors from clicking the “request a quote” button.

The right pair of images shows visitor clicks on the contact page, where a video demo distracted visitors from contacting Softmedia.

3. WPMU Dev Troubleshoots Product Page Design

WPMU Dev used CrazyEgg’s confetti report to see how visitors, especially new visitors, were interacting with content on their CoursePress product page.

They identified parts of the navigation menu that visitors ignored, along with some great videos that nobody ever watched. This information was fed into a planned product page redesign.

Can you guess what’s wrong with this picture? Yep! Too many calls-to-action and elements that visitors can click on. What they really found was that no one was clicking on (and viewing) the things they wanted visitors to see.

4. Local Visibility System Improves Local SEO

Local Visibility System (LVS) created a custom URL for Google Places (now Google My Business) and tracked visitors to that URL via CrazyEgg.

The resulting confetti map showed where local visitors went after landing on the site, enabling them to see which pages required additional optimization.

(There’s also some useful information on using CrazyEgg with maps, directions, and reviews, which are all part of local SEO.)

Sometimes crazy looking heatmaps can appear scary. “They’re clicking everywhere!” However, it may point out that people are actually reading most of the page and clicking through to more information. How can you use this to your advantage?

5. Pagely Checks for Design Flaws

Pagely used CrazyEgg’s scroll map to identify which parts of their page people paid attention to. The company found that fewer than 25% of their visitors scrolled beyond 600px, which meant that a lot of the page was wasted.

This information suggested that Pagely should rethink the layout to ensure that visitors would see the most important information.

Additionally, they found that tying clicks to specific conversions is an even more important analysis to perform:

Knowing how many clicks actually converted to signups is extremely valuable information. Combine this knowledge with your A/B tests and see which variation not only gets more clicks but signups too.

6. SugarRae Adjusts the Content Mix

SugarRae used CrazyEgg heatmaps to identify which content appealed to visitors most.

She identified the three navigation labels that got the most clicks and used this to decide which content she would create more of in the future.

She also found that visitors were trying to click on non-clickable images and figured out which ads were working best so she could optimize the mix for more clicks and revenue.

The overlay view allows you to segment your visitor clicks by properties like referrer.

After identifying these issues, the online retailer made some design changes and found that the recovered profits more than paid for the investment in the software.

Scroll Maps quickly let you see if people are even looking at the content you’re most proud of. In this example, comparing the Scroll Maps before (left) and after (right), the images show that a much higher percentage of people are now watching the promoted content.

How to use Crazy Egg Heat Map Tool: Example

Here’s an example of someone – Crazy Egg, in fact – using the tool to address issues on their client’s homepage. Working on Neil Patel’s own website, the goal was to increase conversions by 100%.

In the end, the team managed to increase conversions by over 400%, based on findings from the Crazy Egg tool.

Take a look at the source, and you’ll see it’s a long page. Nothing wrong with that, but this page wasn’t converting. Initial Scroll Maps showed that only about 50% of the audience was reading much past halfway down the page, and relatively few visitors saw the bottom at all.

By using the different types of heatmap together, Crazy Egg was able to generate massive increases in conversions.

Obviously, no heat map tool or any other tool comes with creativity built in or gets rid of the need for great design, copy, and SEO.

But it does let you see what’s really going on and change the way your site is built to reflect that.

Conclusion

A heat map gives you a clear indication of what users really do on your site. You can quickly and easily find out if anyone even sees your copy and whether users are clicking on your CTA or on images and words instead.

You can also see where your users are coming from, easily see conversion rates, and much more.

Instead of having to deduce what’s going on from numbers like bounce and time on page, or even building up a more sophisticated picture from knowing which elements are clicked and tracking goal conversions in GA, heat maps let you just use an actual picture.

We’ve seen how heat maps can be used to understand conversion behavior.

Using a simple heat map lets you see if users are clicking on your conversion elements, and if not, what they’re clicking on instead.

Based on that understanding of real, rather than imagined, user behavior, it’s possible to come up with better design and copy and generate much higher conversions.

Adding in data from Confetti and Scroll Maps lets you identify user behavior in a more sophisticated way while keeping heatmap analysis as intuitive as looking at the screen.

Cross-referencing Confetti, Overlay, and Scroll Map reports lets you see where attention is going and exactly who is clicking where.

Segmenting traffic by activity and source, and understanding it in terms of the number of visitors who actually viewed that part of the page, can save you from “mis-optimizing” the wrong parts of the page. It can also keep your content game strong!

DON’T MISS OUT

Sharon Hurley Hall is a professional writer and blogger. Her career has spanned more than 25 years, including stints as a journalist, academic writer, university lecturer and ghost writer. Connect with Sharon on her website.

4 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication. Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment. Finally, please use your favorite personal social media profile for the website field.

Thank you for this article. Crazyegg really helps me when having an e-commerce client that tried everything in the terms of SEO and online marketing, but didn’t reach the desired goal. So powerful tool for mapping missing areas of product pages and it helped me each time to get better conversion rates and more leads for my clients. It is not really the first SEO tool that people will use, but it is among the most important ones when dealing with e-shops. Highly recommend.

You can always try to increase your conversion rates by just redesigning your website as you see fit, but if you have this in depth software then it pin points to where you are losing conversion and how to change this to get the conversion rates where they should be.

Just reading this makes me realise that a lot of site could be missing out by not using Crazy Egg.