What is a Heat Map, How to Create One, Examples and Case Studies

by Sharon Hurley Hall

Last updated on August 16th, 2018

Do you know what a heat map is – and what it is good for?

Heatmaps are everywhere these days. You see them on the weather, on real estate sites – basically, anywhere there’s data to display.

They’re increasingly popular in scientific disciplines where large volumes of data have to be made comprehensible.

That’s because they’re a great way to see through data to trends and understand what to do next.

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:

CrazyEgg Scroll Map

Source

You look at a web page and the data is right there: the CTA above the fold glows bright orange, or it doesn’t. (In which case, consider making it bright orange…)

Guardian Unlimited Heatmap

Source

Where should the most important content be on this page?

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.

JavaScript inserted into your site’s code

Source

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:

Quicksprout heatmap

Source

This means that when you look at your heat map, you see which areas of the page get a lot of action and which don’t.

Heat map types

In addition to heat maps, there are reports that can show you where your clicks came from, how far visitors scrolled, and more.

Heat map

Quicksprout heatmap report

Source

The original. See a simple map of which areas of your site get the most activity. This is the version we’ve talked about already, so it looks familiar.

You get a visual overview of where your visitors click on your page – the more clicks, the brighter the area, creating what we call “hotspots.”

Scroll map

Quicksprout scroll map

Source

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

Quicksprout Confetti report

Source

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.

Now you know what to change to make the page convert.

Overlay

Facebook overlay data report

Source

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.

For instance: let’s say Michael writes a fantastic, in-depth blog post on using his company’s product, DocuLoc, to keep documents secure.

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?))
  • Where most users look on a page (Typically this is the top and the left – people tend to read web pages in an ‘F’ or ‘Z’ pattern, so many sites are designed to facilitate this, but image-based content is often read horizontally.)
  • 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.

KhanAcademy-heatmap

Source

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:

KhanAcademy Scrollmap

Source

That’s normal. Scroll down into Khan Academy’s large collection of links to specific pieces of content that they have on their homepage and things start looking more like this:

Quicksprout scrollmap 2

Source

Again, that’s normal. What you can then do is compare the impression you’re getting with this Scroll Map report with the list view.

That shows you how many people clicked on each link as a table of raw numbers, not in proportion to the number of visitors.

Scrollmap data

Source

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:

Help translate into other languages heatmap

Source

You can see the majority of attention is going where they want it: to the recurring donation CTA on the right side of the page.

But this page has two goals. The other is to get people to sign up to become translators.

And when we take the page over to the Scroll Map, we can see why not too many people are clicking on that link:

Help translate your content scroll map

Source

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.

Create a CrazyEgg account

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

2. Install the tracking code

Go to the instructions page to access your tracking code. It will look like this:

Install Tracking Script

Source

Add the tracking code in the header section of your website, or individually to any specific pages you want to monitor. Either way, it goes before the closing </head> tag.

If you’re a WordPress user, there’s a plugin for that.

If you’re not sure you’ve done it right, you can use the Script Check Tool to make sure.

Step 2: Set up a snapshot

Head over to the New Snapshot page in your Dashboard and set up a new test.

create new snapshot

Source

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!)

Figure out how long you want to run the test:

Duration of snapshot

Source

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.

CrazyEgg Dashboard

Source

When it shows Stopped, you can open it and see the heat map reports.

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%.

Different Heatmaps

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.

Removing both improved conversions for each page.

2. Conversion Rate Experts Improves Opt-ins by 25.9%

Conversion Rate Experts wanted to improve opt-ins on a particular page.

While it was performing adequately, the heat map data showed that some visitors were distracted by sidebar content and therefore never completed the opt-in box.

An A/B test showed that a new page without the sidebar resulted in a 25.9% improvement in opt-ins.

Watch how the pros use CrazyEgg!

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.

Course Press Pro heatmap

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.)

popular next steps from my homepage

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:

400 clicks on this heatmap

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 Sugarrae Blog using Crazy Egg heat map

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

7. Harry Fay Jewellery Boutique Plugs a Profit Leak

Harry Fay Jewellery Boutique identified several areas that were driving visitors away and affecting profits, including:

  • failing cookies notifications
  • sending visitors to social pages
  • unanswered customer questions in the ordering process

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.

side by side heatmap

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.

Work began on Neil’s homepage:

Neil Patel homepage

Source

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.

Heat map with Cold Bottom Homepage

Source

Meanwhile, the Heat Map showed that a lot of visitors were actually clicking on Neil’s name at the top of the page or on the logos of clients, while relatively few clicked on the CTA.

Neil Patel heatmap example

Source

A lot of people were clicking on places that weren’t actually clickable – a familiar story.

Neil Patel heatmap example 2

Source

Furthermore, the option to click away to case studies was creating drop-offs: more people were looking at the case studies than were signing up!

neil patel heatmap example 3

Source

Looking at the Confetti tool, it was easy to see that 49% of the traffic coming to the page was coming from QuickSprout, Neil Patel’s personal blog, meaning visitors likely already knew who he was.

neil patel heatmap example 4

Source

“That’s why,” says Mike Kamo, who did the tests, “we realized that we don’t need to sell these people so hard.” Too much of the page was telling visitors things they already knew.

Maybe they could go more minimal?

do you want more traffic heatmap

Source

The new page was as simple as it gets: A header, two lines of copy, and a single-field form.

Rather than have people fill out a form right away, visitors now put their website URL in and have it analyzed, then add their details later.

(Does that sound familiar? It should – it’s what Crazy Egg uses, and a bunch of others besides.)

“When people discover that there are errors on their site, it makes them more likely to want to sign up with us,” says Mike.

ouch your website needs work

Source

At the bottom of the new homepage, you can see two options: Consulting and Testimonials. The consulting page now looks similar to the original homepage and contains a lot of the same copy:

profitable traffic

Source

But it’s only for people who go looking for it because they feel they need to know more. Most visitors just use the main form on the homepage.

The difference in performance between the two pages is massive. The first page saw just 2.1% conversions.

neil patel heat map with 192 clicks

Source

On the new page, 26% of visitors filled in the first form.

heat map with 359 clicks

Source

The new page is a two-step process, and not everyone who filled in the first form became a lead. Check up on the second page and the actual conversion rate is 9.1% – a 433% increase in conversions.

120 clicks

Source

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.

It’s almost always something unexpected.

And it lets you answer a question no amount of bounce stats can: why are people leaving your site?

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!

It’s tough to beat this simple, versatile tool for optimizing pages or whole websites.

How do you use heat maps?

4 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Sharon Hurley Hall

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.

SPEAK YOUR MIND

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. lanas says:
    February 7, 2016 at 6:09 pm

    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.

    • Sharon Hurley Hall says:
      June 30, 2016 at 7:26 am

      Thanks for weighing in with your experience, Ianas.

  2. Benjamin Carter-Riley says:
    November 19, 2015 at 2:25 pm

    This is amazing.

    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.

    Thanks Sharron. 🙂

    Benjamin

    • November 20, 2015 at 12:04 pm

      So glad you found this useful, Benjamin. I love the way heatmaps identify an issue quickly, then you can explore further to pinpoint where you need to change things.

Show Me My Heatmap

Crazy Egg Review: More Than A Heatmaps Tool via @wpekadotcom ow.ly/VzSOL @CrazyEgg

WPEka

@wpekadotcom

What makes people leave your website?