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:
- heatmaps that measure clicks on a web page (for example, when people click on links)
- 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:
- Create a CrazyEgg account.
- When logged in, go to the instructions page to access your tracking code.
- 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.
- Alternatively, install and activate the CrazyEgg WordPress plugin and enter your account number to start tracking.
- 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%.
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.
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.
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.)
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:
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.
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.