8 Ways to Increase Conversion by Using Heat Maps

Editor’s Note: While this post has little to do with freelance writing, it’s hard not to publish this informative and post written by TruConversion’s Mike Dane. You can use the tips here to improve how you organize your content for your audience and track which one works the best. Enjoy!

You’ve spent a lot of time and money to build a website. Do you know if the site architecture and design are giving you the biggest bang for your bucks, and getting visitors to take actions that lead to conversion?

In the good old days, you had to gather (and pay) groups of people, sit in a room all day to watch them click around your website. Focus groups are time consuming and expensive. Moreover, the results might not be representative or accurate because of the small sample size and the fact that people modify their behaviors when they’re being observed.

Nowadays, you can use heat maps to find out if your visitors are clicking on calls-to-action you want them to click, and be able to tweak your copy and layout in real time to optimize conversion.

In this article, we’ll explore how heat maps can help us increase conversion

What is heat map in the context of website design and conversion?

A heat map is a form of visual analytics. It’s a two-dimensional representation of data in which values are represented by colors.

In the context of website design, heat maps show how visitors interact with the information and graphic elements displayed on a webpage, and provide insight into how layout and user experience design impact users’ action and thereby conversion.

While analyzing numbers and data can only tell you which pages are underperforming, visual analytics in the form of heat maps can show you which element(s) on a page needs adjustment so you can maximize its performance.

How to Use Heat Maps to Increase Conversion 1
Heat maps can be used to identify false CTAs – elements that appear to be clickable but aren’t. They can create frustrating user experience and impact conversion. Image source from Conversion Sciences.

How is heat map generated for a webpage?

Most heat maps are created by using click-tracking software that translates where a user places the cursor and press the mouse button into a 2-dimension color-coded visual.

While there are two kinds of tracking – eye-tracking and mouse-tracking – the latter is more widely used because you can get a much larger sample size at a fraction of the cost of the former.

There are a few types of heat maps designed to track different kinds of data and types of interaction:

  • Mouse-Movement Heat Map shows the pattern of how users read and navigate a page. Most of mouse-movement heat maps also indicate how many visitors hover over a particular area of a page so you can see which part commands most attention.


How to Use Heat Maps to Increase Conversion
Example of a mouse-movement heat map. Most of the movement is recorded at the top of the page, indicating that content on the left side above the fold is commanding most attention from visitors.
  • Scroll Map shows the point at which visitors abandon a page as they scroll through the content. It can provide insight about how to adjust the length of your content, and where to place critical calls-to-action, to maximize the effectiveness of your webpages.
How to Use Heat Maps to Increase Conversion
Example of a scroll map. The red area indicates that all visitors have seen the content, and as it progresses from orange to blue down the page, more and more visitors leave the page.
  • Click Map shows where visitors are clicking so you can weed out distracting links and direct attention to the calls-to-action critical to conversion.
  • Eye-Tracking Heat Map shows exactly what visitors are looking at on your website. It’s more complex to set up and more expensive to run the tests due to the technology and software involved, and it’d be conducted in the manner of a focus group.
How to Use Heat Maps to Increase Conversion
Example of an eye-tracking heat map. Image source from Kissmetrics.

Why Use Heat Maps?

You can learn a lot about user behaviors by studying heat maps: what users focus on most, how they react to your calls-to-action, and whether they’re navigating the website the way you intend them to.

Heat maps provide real-life data based on your ideal customers, the type of products or services you offer, the various design and text elements and how they interact with each other on your website.

Instead of speculating how a certain user experience design or graphic layout would work for your website, you can test and tweak in real-time to maximize your results.

Besides the wealth of data they provide, most heat maps are incredibly cheap to create.

In the past, to obtain the breadth and depth of data provided by most heat maps, you’d have to gather a large number of people and spend a sizable budget on focus groups.

Even then, you’d have a limited number of data points and the data could still be inaccurate because focus group participants might modify their behaviors because they are “under observation.”

Nowadays, you can use heat maps to gather data from a large sample of users, without leaving the comfort of your office chair.

The data is more accurate, representing a large set of users that are most likely to be your ideal clients or customers who are interacting with your website in their “natural” environment.

The data gathered can inform the design and development of your website, so you can adjust the graphic layout and user experience to increase conversion.

Heat Maps Help Improve User Experience that Leads to Higher Conversion

One of the most effective ways to increase conversion is to improve the user experience.

When you put a call-to-action on your website, the goal is for the visitors to click on the button (e.g. to subscribe, add to cart, or checkout.)

How do you know your website structure and page design is accomplishing the goal?

Heat maps can provide the answers to these critical questions regarding user experience that affect conversion:

  • Can visitors easily locate the call-to-action (CTA)?
  • Is the instruction on the page clear so visitors are moving through the user journey that leads to sales and conversion?
  • Are there elements that look clickable but in fact, static? If users are trying to click on those elements, do they get frustrated and leave your site?
  • Are there elements on a page that distract visitors away from your intended CTA so instead of taking the required action they navigate away from the page?
How to Use Heat Maps to Increase Conversion
In this case study, Softmedia identify distracting elements on pages: The left pair of heat map 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 the company. Removing both improved conversions for each page. Image source from Crazy Egg.

Studying heat maps generated for your website can show you areas on a page that receives most attention and generate most actions so you can validate if the website structure and page design are optimizing conversion rate.

8 Ways to Use Heat Map To Increase Conversion

The extensive qualitative and quantitative data provided by different heat maps can give us very useful information to increase sales and boost conversion rate on a website by showing us if visitors are following the call-to-action that we want them to take.

Here are 8 Ways to Increase Conversion by Using Heat Maps and understanding how to optimize your website structure and design:

1. Gauge effectiveness of CTA

A call-to-action is as good as the number of people who click on it. A click map can show you exactly where visitors click on a webpage, and help you assess the effectiveness of a CTA.

Combining A/B split test with click map can give you quantitative insight to help maximize various user experience elements, such as placement of CTA, copy of the CTA button or text, and CTA button design to maximize conversion rate.

2. Understand how visitors react to content

Not all conversions are preceded by user clicking on a CTA. E.g. someone might read some copy about a sale and went on to browse your products on the same page. They did not have to click on anything, but the copy has achieved the goal.

To get a sense of how visitors react to content, you can use a mouse-tracking map and observe where cursors stop, and deduce what content is of interest to your visitors.

How to Use Heat Maps to Increase Conversion 61
This mouse-tracking map shows the elements that attract visitors’ attention.

3. Optimize placement of CTA

Eye-tracking, Mouse-tracking and Click maps can help identify areas your visitors tend to direct their gaze or hover their mouse over. These are the areas that command their attention either because of the way we read (left to right, top to bottom in most western culture) or the layout of the page.

According to this case study, people from English-speaking cultures almost always browse in an F-shaped pattern that heavily favors the left side of the screen.

These areas on a page would be a good place to put your conversion-focused text and calls-to-action to maximize their effectiveness.

How to Use Heat Maps to Increase Conversion
Heat maps shows that people from English-speaking cultures read in F-shape pattern. Image source from Kissmetrics.

In this case study, Dennis Publishing determined from eye-tracking heat map study that visitors pay much attention to the left hand column of the site. They shifted their Google ad to the left pane site-wide. As a result, CTR has increased by 44% and RPM (revenue per 1000 ad impressions) increased by 48%.

How to Use Heat Maps to Increase Conversion
Eye-tracking heat map provides information that results in a 44% CTR. Image source from VWO.

4. Streamline page design

Are there any “dead weights” on your webpages that are contributing nothing to improving user experience or conversion rate?

To find out, you can use mouse-tracking maps and click maps to identify content and elements that receive little attention.

At best they’re not useful to your visitors, and at worst they are distracting them from calls-to-action that lead to conversion.

Based on results from heat maps, you can remove elements that are not getting attention. You can also consider replacing them with other content and observe the results closely to optimize your page.

In this case study, with the help of heat map, Pair realized the navigation bar was distracting visitors from clicking on the conversion button to download the app.

By hiding social share buttons, navigation bar and the “download for free” text, the company was able to focus users’ attention to the primary CTA and increase conversion by 25%.

5.Reduce cart abandonment and increase shopping cart conversion

In this case study, “The North Face” found out from heat map study that visitors got distracted by a banner on the shopping cart page. Instead of continuing to checkout, many potential buyers click on the banner instead and got taken off the checkout path. By adjusting the placement of the checkout button, The North Face was able to increase click through to checkout page by 21%.

How to Use Heat Maps to Increase Conversion
Visitors interacted more with the checkout button when it was moved above the banner (B) with a 21% increase in clicks. Image source form Conversion Sciences.

Use click maps to find out where your visitors are clicking on the shopping cart page.

  • What were they clicking on if they did not navigate to the checkout page?
  • Can any of those elements be repositioned or eliminated so more attention can be given to the checkout button?
  • Were they able to easily locate the checkout button, or had the mouse been all over the place in an effort to search for it?

A look at the mouse-tracking map to see which part of the page commands the most attention can give you some clues on where to put your checkout call-to-action.

6. Optimize Content Using Heat Maps

Even though the majority of Internet users are savvy enough to scroll and therefore “the fold” is no longer a huge factor in page design, studies of scroll map show that it still has an impact on whether your content is being seen.

Use information from scroll maps to understand where your visitors tend to abandon pages, and see if your calls-to-action are placed above the point where most users leave the pages and adjust page length for maximum effectiveness.

Here are some stats for you:

  • Web users spend 80% of their time looking at information above the page fold (meaning, the part of the webpage that’s visible when users first land there). Although users do scroll, they allocate only 20% of their attention below the fold.
  • Users spend 69% of their time looking at theleft half of the webpage and 30% viewing the right half.

You can also use click maps to compare visitors’ responsiveness to CTAs along the length of a page to determine optimal placement.

While giving visitors the chance to consume your content and build trust before you ask for their emails, you also want to make sure the scroll box shows up for most of them before they navigate away from your site.

Understanding where visitors tend to abandon a page can help you determine the placement for your lead capturing Opt-in box on your website and increase your opt-in rate.

How to Use Heat Maps to Increase Conversion
A scroll map can identify where visitors tend to leave a page and help inform placement of calls-to-action.

7. Replace “dead ends” with CTA

When visitors get to end of a piece of content, are they clicking through to another page on your website?

If not, you have a “dead end” on your hand. Not only does this create a poor user experience, but you’re also missing out on an opportunity to further connect with or engage users.

A click map can help you identify these dead ends so you can add a relevant call-to-action to increase the effectiveness of your content.

8. Get more out of your images

By combining A/B tests with heat map tracking, you can test the effectiveness of various images on your website and see how they affect visitors’ interaction with your content and calls-to-action.

The direction of eye gaze has been found to have an impact on conversion rate by directing the users’ attention to text and CTAs.

In this case study, more attention is commanded by the text and call-to-action when the gaze of the baby is directed toward that area on the page.

How to Use Heat Maps to Increase Conversion
Text and CTA not getting much attention when the baby’s gaze was facing front. Image source from Kissmetrics.
How to Use Heat Maps to Increase Conversion
Text and CTA commands more attention when the baby’s gaze is directed toward the area on the page. Image source from Kissmetrics.

There’re a variety of tools you can use to generate heat maps and gain insights to how users interact with your website, and understand how you can maximize your conversion by maximizing page layout, content length, calls-to-action etc.

There are many heat map tools on the market. When choosing one, consider how the rest of the features work together to help increase conversion rate of your website.

Also take into account the variety of heat map that the tools can generate, whether it address mobile as well as desktop usage, as well as the types of reporting available.

If you are looking for an all-in-one analytic and feedback application that helps you understand your visitors and how they interact with your website to increase conversion, get your hands on TruConversion.

Over to you now – Have you used heat maps to improve user experience and conversion on your website? What have you learned and what results did you get? Don’t hoard the good stuff… share your comments below


About the author

Christopher Jan Benitez

Content marketer during the day. Heavy sleeper at night. Dreams of non-existent brass rings. Writer by trade. Pro wrestling fan by choice (It's still real to me, damnit!). Family man all the time. Hire me to write your content!