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

heatmap-tool

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

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 shows eye tracking and user 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?

From a heatmap, you can discern where the highest concentration of activity lies on your website. From 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 calculate 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 your website, you see the colorful indications on the report. At Crazy Egg, we call this a snapshot.

Each report tells you what users do each time they access your page. We recommend running reports until at least 60,000 people have visited your site. That way, you get a representative map based on lots of users’ activities.

You can then make changes and run further reports to see how your changes impact 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 whether people like your site and find it engaging?

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

Maybe the cost has become a barrier for purchase and you need to either lower the cost or find a less-costly alternative to sell.

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

A scroll heatmap 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.

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 permits 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: We’ve already gone over this type of report. It displays activity on the screen using color intensity and temperature.
  2. Scroll maps: Also called a scroll heatmap, a scroll map uses color intensity and temperature to represent user behavior in terms of scrolling down the page.
  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 that breaks down clicks.

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

As I said, you have two choices when you first enter your Crazy Egg dashboard. You can choose to create multiple snapshots or stick with just one.

heatmap-tool-snapshots

We recommend generating multiple reports. 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-url

heatmap-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 how you want to handle different types of screens.

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 number’ relationship to the total.

The array is the total number of website visitors. Each visitor represents a value.

Are you following me?

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 an image on your website. People seem to think it’s a link, but there’s no associated URL.

Adding a link to the image to a relevant page on your site could reduce bounce rate by keeping people on your page 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.