What Is the Best Heatmap Tool and How to Use It to Get Better Results

by Neil Patel

Last updated on August 13th, 2018

heatmap-tool

You’ve heard your friends and associates talking about using a heatmap tool to improve their website conversions and sales. Maybe you’ve even done a little research on the subject. But why exactly do you need a heatmap tool? And what does it do?

You have questions. I have answers.

Here’s the thing: User behavior reports like heatmaps give you information about your target audience that you can’t get anywhere else. Therein lies the value. Without heatmaps, you’re in the dark.

So how do you see the light? Let’s explore heatmap tools and their potential impact on your business.

What Is a Heatmap?

A heatmap is a user behavior report that displays visitor activity on a particular web page using a color key. In most cases, warmer colors — like red and yellow — indicate lots of activity, while cooler colors indicate little to no activity.

what-is-heatmap-tool

Check out the heatmap above. It shows lots of activity in the upper left-hand section as well as across the page above the fold. It’s reasonable to deduce that people who visit this site are interested in the primary content that appears first after the logo and navigation bar.

But why is the highest concentration on the left?

It’s likely because people read English from left to right. When you click on a new website, your eye automatically goes to the upper left because that’s how you’d read any other form of media.

What Is the Purpose of a Heatmap Tool?

A heatmap tool allows you to unlock the secrets behind your website users’ behavior.

From a heatmap, you can discern where the highest concentration of activity lies on your website. Armed with that information, you might decide to rearrange your web design, make certain fonts bigger, or adjust your CTAs.

One of the most basic purposes is to figure out where people click the most often. Which links draw the most attention?

heatmap-tool-purpose

Based on the example above, we know that three specific areas draw more clicks than anywhere else on the page. The website’s owner would want to maximize not only the phrasing and content in those areas, but also the quality of the destination pages.

A great link with optimized anchor text represents just part of the story. You also need to delight the visitor when he or she clicks that link and arrives on another page.

If the destination page doesn’t supply what the user expected, he or she will likely bounce. That’s not good for traffic, conversion, or sales.

How do heatmap tools work?

Heatmap tools use tracking scripts to measure visitor activity on a given page. They capture eye movements across the screen as well as clicks to provide a visual representation of user behavior.

That sounds complicated, but fortunately, you don’t have to worry about the engine. You just need to concern yourself with the horsepower — in other words, the output.

When you generate a heatmap for a landing page on your website, you can see exactly what your website visitors are responding to in one handy visual report. At Crazy Egg, we call this a snapshot.

Each heatmap report tells you how the majority of users behave each time they access your page. We recommend running reports for 60 days, or until 25,000 people have visited your site — whichever comes first. That way, you get a representative map based on lots of users’ activities.

Once heatmaps have helped you identify what you’d like to change on your site, the next step is to make some updates and then run further reports to see how your changes have impacted user behavior. Maybe you get more clicks on your primary CTA, for instance, or perhaps your sales increase because you’ve improved a destination page’s effectiveness.

Why Do You Really Need a Heatmap Tool? (3 Reasons)

Mechanics aside, why should you invest in a heatmap tool?

After all, can’t you just look at your Google Analytics reports to figure out what elements of your site people are responding to?

The answer is simple: absolutely not.

Google Analytics and similar tools tell you how many clicks a page gets, how long users stay on the page, and other valuable data.

However, they don’t tell you what visitors do on the page itself.

This is critical because user behavior gives you far more insight into what your audience wants. Maybe you’ve included a slam-dunk CTA at the end of your page, but nobody ever scrolls down far enough to see it. A Google Analytics report won’t show that problem.

Beyond that, let’s look at three specific reasons to use a heatmap tool for your website.

Reason 1: Get to Know Your Audience Better

Every entrepreneur starts a business with a general idea of what his or her audience wants, needs, and values. However, experience often changes those perceptions as more insight comes to light.

For instance, let’s say that you sell sporting equipment. Right off the bat, you can make a few deductions about what your target audience wants:

  • High-quality sporting equipment
  • Safe equipment for their chosen sports
  • Access to detailed information about each product
  • A wide range of options in terms of fit, color, and other qualities

As your business ages, your target audience can narrow based on your products and how you market them.

Maybe you target sports enthusiasts who don’t have much disposable income. Consequently, your selling proposition  needs to reflect your dedication to providing low-cost products that still get the job done.

Using a heatmap, you can create a report for your sales pages. You might notice that people hover over the “buy” button, but ultimately decide not to click. It could be that the price is so low, people think the quality is low, too. Or, it could be they’re not sure about hidden costs in the checkout process.

What elements can you add to your sales pages to help people make a buying decision? As a next step, you could add a testimonial where someone talks about how they love the durability of your sports equipment. You could also test adding copy about the shipping costs upfront.

Reason 2: Determine the Best Places to Insert Valuable Design Elements

A scrollmap looks a little different from a standard heatmap. The color bands go all the way across the page and tell you when users scroll quickly, stop scrolling, or pause to read.

heatmap-tool-for-design-elements

It uses the same color-coding system to tell you where the most activity lies. You can figure out where you might want to put valuable design elements based on scrolling patterns.

best-heatmap-tool-what-is

I mentioned above that a great CTA will only result in clicks if your audience sees it. Maybe people stop scrolling about halfway down the page, so they don’t get there.

Moving the CTA farther up the page — ideally to a spot where people often pause to read — can increase your click-through rate and encourage more conversions.

Reason 3: Eliminate Confusion

A heatmap tool can also help you identify areas on your site that might cause confusion among your audience. For instance, in the screenshot below, you’ll see competing CTAs.

heatmap-tool-eliminate-confusion

Visitors don’t pay much attention to the content in the body, and people are trying to click on areas that don’t have any links.

All of these activities suggest confusion.

Maybe you’ve underlined a sentence or phrase in your content. People automatically think it’s a link because we’ve been conditioned to conflate underlining with hyperlinks. When the text proves unclickable, users get frustrated.

Additionally, competing CTAs fracture your audience. Some will click on one and others will click on another, but often for no discernable reason. By aligning your CTAs and giving your visitors just one option, you increase harmony on your site.

How to Choose the Best Heatmap Tool [Comparison]

You can evaluate heatmap tools based on many criteria. Focus on the features that matter most to you.

For instance, some heatmap tools don’t offer A/B testing. You can generate heatmap reports on your website, but you can’t automatically test variations against one another to figure out which one performs best among your audience.

Crazy Egg is one example of a heatmap tool that has integrated A/B testing.

Price is another consideration. If a company wants to charge you hundreds of dollars to generate heatmaps from 100,000 visitors, you’re likely paying too much. Sometimes, less-expensive options offer more features.

Pay careful attention to usability, breadth of report options, and related features that might help you evaluate your website more closely. Just because you’re interested in heatmaps now doesn’t mean you won’t want to run recordings later on.

See how the Crazy Egg heatmap tool can help you

Crazy Egg is one of the most popular and intuitive heatmap tools on the market today. We’re trusted by hundreds of high-profile companies, from Dell to Optimizely.

heatmap-tool-crazyegg

Our competitors tend to charge more for heatmap reports, but they don’t offer as many options as we do. Our plans start at just $29 per month (billed annually), and cover 20,000 pageviews per month. If you have a larger site, you can upgrade at any time.

Plus, it’s super easy to install. (I’ll get into the specifics in a minute.)

Types of Heatmaps for Websites

Unlike our competitors, we offer five distinct user behavior reports to help you analyze your website and your users’ behavior down to the most granular level.

  1. Heatmaps: See where your visitors are clicking.
  2. Scroll maps: Find out what content they’re scrolling past.
  3. Overlay: Find out exactly how many people are clicking on each individual element on your site.
  4. Confetti: Break down the overlay report even further by filtering clicks by referral source and other criteria.
  5. List: View a tab report of your most popular interactive elements.

Each type serves a specific purpose and helps you to better understand your audience and create website assets.

Step by Step to Generate a Heatmap Online From Your Website

Now that you’re hooked on heatmaps, how do you set them up? On Crazy Egg, it’s as simple as following five easy steps.

Step 1: Sign up for a Crazy Egg Account

If you haven’t already, sign up for a Crazy Egg account. You get it free for 30 days so you can try it out and make sure it’s right for you before we bill you.

Once you enter your information, you’ll be taken immediately to a screen that allows you to set up your first snapshot. Remember, in Crazy Egg parlance, a snapshot is a visual report of user behavior on your site. Based on the information you enter, the software will generate reports for the specific pages you want to track.

Step 2: Decide How Many Snapshots You Want to Create

You have two choices when you first enter your Crazy Egg dashboard. You can choose to create snapshots for multiple landing pages, or stick with just one URL.

heatmap-tool-snapshots

We recommend generating multiple snapshots. This allows you to run reports on different pages on your site. For instance, you might want to track user behavior on your homepage, main blog page, about page, and landing pages. You can do that from the get-go.

Step 3: Enter the Target URL and Name Your Snapshot(s)

Now it’s time to provide Crazy Egg with some data. You can decide how much information you want to supply and how you want to structure your reports.

Start by entering the target URL — the URL that Crazy Egg will generate reports for — and typing in a name for the report. Consider getting as detailed as possible here.

heatmap-tool-target-urlheatmap-tool-target-url

Notice that, in this example, I started with the date for the name of the report. That way, I can easily identify when I started the snapshot. I also included the name of the page for this specific report — I used my personal website, NeilPatel.com.

Step 4: Customize Your Snapshots

When you scroll down a bit, you’ll see some more customization options. Specifically, you can decide whether you want to track traffic from different devices separately, or all together.

heatmap-tool-snapshot-customization

Maybe you’re only interested in gauging user behavior from people who access your website on desktop. You can narrow down the data you collect to that screen size. You can also decide whether you want screenshots taken of the desktop, tablet, or mobile view.

Alternatively, select the option to take three different snapshots, one from desktop, mobile, and tablet. That can offer the most comprehensive data depending on what types of devices your target audience prefers.

heatmap-tool-custom

Next, you get to select the reports’ duration. You can enter a custom timeline or use the default.

heatmap-tool-default

There’s detailed information to guide you, and don’t hesitate to visit the help center if you have any questions.

Crazy Egg provides additional customization options. You can use them if you want or leave them in their default positions.

heatmap-tool-aditional-customization

For instance, you might want to omit all or specific popups, track a certain ratio of visits, delay snapshots from the moment someone lands on your page, or set up custom tracking.

Step 5: Install the Crazy Egg Tracking Script on Your Website

The last step is simple. You can either install the Crazy Egg tracking script yourself or have your web developer handle it for you.

It’s easy enough to do it yourself. Just paste the script into the <head> section of your website.

heatmap-tool-tracking-script

Easy peasy.

How to Read and Understand Your Heatmaps

As I mentioned earlier, heatmaps offer a visual representation of user activity. But what does that mean?

It all boils down to numbers, like a ratio. Given a certain number of website viewers, the heatmap tool calculates the intensity of activity on the page based on each individual visitor’s relationship to the total.

The heatmap tool then converts those numbers into colors based on intensity. You read and understand heatmaps by visually assessing the degree of intensity for each page visit.

Sometimes, you’ll see a ton of information in the basic heatmap form. The intensity might be all over the place.

how-to-understand-heatmap-tool

In other cases, you’ll see heatmaps that concentrate intensity in just one or two specific areas. Both results can provide key insights into user behavior.

What kind of data can you get from heatmapping?

The purpose of a heatmap is to tell you how your audience behaves on your website. But what can you do with that data?

You might see lots of click activity on a landing page image. People seem to think it’s a link, but there’s no associated URL.

Linking that image to a relevant page on your site could reduce bounce rate by keeping people on your website for longer periods of time.

Similarly, if there’s little or no activity around your CTA, maybe you need to change the wording or put it in a different place.

That’s what A/B testing is for.

Conclusion

heatmap-tool-conclusion

Data doesn’t have to be daunting.

On the contrary, it shouldn’t be.

I use heatmaps on all my sites to generate valuable data. It’s become part of my optimization process.

Why? Because I don’t want to stare at numbers all day, and I don’t want to rely on Google Analytics or spreadsheets to make decisions about my sites.

Visualization tools make my life easier. They can do the same for you.

Instead, I’d like to know exactly what visitors do when they arrive. That’s what heat maps provide.

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Neil Patel

Neil Patel is the co-founder of Crazy Egg and Hello Bar. He helps companies like Amazon, NBC, GM, HP and Viacom grow their revenue.

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

Show Me My Heatmap

To capture data, @blueearth recommends website heatmaps #CrushinItMN

blueearth

@blueearth

What makes people leave your website?