DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

7 Case Studies for Understanding and Using Heatmaps

by Sharon Hurley Hall

Heatmaps are everywhere these days. You see them on the weather, on real estate sites – basically anywhere there’s data to display. And while we may think of heatmaps as a 21st century thing, it turns out they have been around since at least the 19th century.

What is a Heatmap?

Originally called a cluster heatmap, this tool visualizes a data matrix, as American Statistician explains:

“The cluster heat map is an ingenious display that simultaneously reveals row and column hierarchical cluster structure in a data matrix. It consists of a rectangular tiling, with each tile shaded on a color scale to represent the value of the corresponding element of the data matrix.”

Or, to put it more simply, heatmaps use color as a data visualization tool.  Think of heatmaps as a form of visual storytelling. Whether you’re using traffic light colors, hot and cold colors, or a custom color scheme, creating a heatmap helps you to convey information instantly, so heatmaps are a great tool for visualizing analytics data and web activity.

What You Can Learn from Heatmaps

Not all heatmaps are alike. When you’re measuring online activity, two of the common types are:

  1. heatmaps that measure clicks on a web page (for example, when people click on links)
  2. heatmaps that measure the attention people give to particular areas of a web page

Both types of heatmaps provide valuable information on how visitors interact with your site, your landing pages and your content. Heatmap data can help you to quickly see:

  • which headlines draw visitors in and make them click
  • which images attract attention
  • what distracts visitors from your core content
  • whether they see your email opt-in box

You can also use heatmaps to find out:

  • whether your navigation is working
  • if people can locate search options easily
  • whether they are reading your content and how much of it.

Conversion XL outlines even more things you can learn from heatmaps, including:

  • where to place the content that’s most important to your visitor’s goals
  • where most people look on a page (hint: it’s the left)
  • the difference between what men and women want from content
  • how to use images effectively

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

Getting Started with Heatmaps

Setting up a heatmap is usually as simple as adding a couple lines of code to your site, either directly or via a plugin. For example, here’s how you set up a heatmap in Crazy Egg:

  1. Create a CrazyEgg account.
  2. When logged in, go to the instructions page to access your tracking code.
  3. Add the tracking code either in the header section of your site to track all pages or individually to any page you want to monitor. In both cases, you add the code before the closing <head> tag.
  4. Alternatively, install and activate the CrazyEgg WordPress plugin and enter your account number to start tracking.
  5. Check out the reports to visualize clicks and scrolls in different ways.

Once your heatmap tracking code is installed, you can get a lot of data that helps you with conversions.

In order to use the tool effectively, you’ll need to be clear about what you are trying to achieve on particular pages, so that you can measure how effective your strategy is. Heatmaps also work well with other analytics tools, enriching the data you get to provide a more holistic overview. And of course, heatmaps are a useful addition to conversion optimization testing tools. In fact, the ConversionXL article cited above suggests using clickmaps with A/B testing tools for maximum effectiveness.

7 Heatmap 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 completed the desired actions. After removing these, conversions increased by 51%.

softmedia-heatmap

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

cre-video

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 fed into a planned product page redesign.

courseprerss-confetti-700x735

Can you guess what’s wrong with this picture? Yep! Too many calls-to-actions and elements that visitors can click on. What they really found was that no one was clicking on the things (and viewing) 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.)

lvs-homepage-crazyegg2

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 saw the most important information.

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

screenshot-2004

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.

overlay

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.

Scrollmaps quickly let you see if people are even looking at the content you’re most proud of. In this example, comparing the scrollmaps before (left) and after the change (right) – the image shows much higher percentage of people watching the promoted content.

As you can see, using heatmaps can bring big benefits in terms of increased revenue, better SEO and improved conversions. How have you used heatmaps to improve your results?

Read other Crazy Egg articles by Sharon Hurley Hall.

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.

  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

Click tracking, heat maps, and without a spreadsheet? Yes, please. is one solut...

Aimee Graeber

@AimeeGraeber