How to use Heatmaps to Optimize Landing Pages and Product Pages


How to use Heatmaps for Conversion Rate Optimization(CRO)?

Traffic Optimization is the key to the success on an eCommerce website by helping visitors convert. While tools like Adobe Omniture or Google Analytics tell digital marketers “WHAT” is happening on the website, they shed little insight into “WHY” aspects of customer behavior. That’s where Heatmap solutions would come into play, helping digital marketers to understand why customers actions such as why they are leaving the shopping cart, or which buttons or links customers are clicking on (or not). This is primarily where the process of CRO (Conversion Rate Optimization) begins.

Heat maps help optimize any landing pages, product pages as well as homepage.

Now that we’ve touched upon the main purpose of the using heatmaps, let’s dive into various types of heat maps. There are mainly 4 types of heat maps used in Conversion Rate Optimization process:

  1. Click Heatmaps
  2. Mouse Move Heatmaps
  3. Attention Heatmaps
  4. Scroll-reach Heatmaps

Let’s start with the most commonly is used and extremely important heat map that answers the WHY aspect of where your visitors are clicking:

1. Click heatmaps

Click heat maps are the best ways to visualize where the visitors are clicking. Note, clicks being the strongest indication of customer intent, these heat maps helps marketers to find out what’s working for customers. For example, are customers clicking on whether a button or a link. Once understanding to customer behavior is established optimization can begin.

Below image shows a heatmap which shows most clicked elements of the navigation bar on a website.


Red zones show the most clicked upon areas on the Navigation compared to the banner. 

How to use Click Heat Maps?

  • Determine which content visitors interact better with by measuring where they click.
  • Look for “red hot” zones, where most clicks fall into. Blue indicate regions where there are no clicks, hence called “cold dead” zone.
  • Make sure focal points of the page or “Call to Actions” are in red hot zone. If  they are not, customers may not be seeing what you want them to notice. This points to actionable insight.
  • Look for distraction points > If there is a red hot zone in an unexpected areas on the website, you’ve identified distractions for customers. All focus should go toward the “call to action” and nothing should take away from it.
  • Identify ignored area/regions on the webpage: Customers are not looking at these at all, and is that OK?

2. Mouse Move Heatmaps

Mouse move heatmaps help digital marketers understand where visitors look on the screen. This is the best possible guess of visitor’s eye tracking.

How to use Mouse Movement Heat Maps?

  • Think about where customers are looking (or not) on your webpage. There is about 70% -80% co-relation between mouse movement and eye movement.
  • Pay attention to the focal points on the webpage where customers are expected to move the mouse, such as forms.
  • Navigation vs Search: Are more of your customers using navigation or internal search? This could lead to completely different marketing strategy and web design.
  • Find focal points of the webpage – For example, are your customers finding the “Submit” buttons easily?
  • What seem to be the distraction points or ignored points on the particular landing page? For example, on a product detailed page, if product images or videos does not have enough mouse movement, it might indicate image optimization needs.

3. Attention Heatmaps

In any typical landing page, generally it can be stated that customers will take certain time before they can take any action. Attention Heat map displays if the page is doing good enough job by holding the attention of visitor on any particular page. For example on Best Buy’s website customers could read product description or compare products before the product might be added to the cart. If Attention Heatmap of such product detailed pages display either too short or too long time spent, that indicates room for improvement on those pages.

How to use Attention Heat map?

  • Use Attention heatmap to find where the where visitors are spending most time on the webpage
  • Determine the most valuable or engaging content on the landing page
  • Determine which part of the page they spend time on – indicator of good design as well as valuable content
  • On successful converting pages, customers will most likely spend time where marketers have put the most important content
  • Less than average time spent would indicate poor content/design
  • More than average time spent might also indicate hard to understand content/design
  • Once the range of highly converting attention span by page is determined, look for opportunities
  • Fold Height – This is CRITICAL part of Attention Heat map
  • Pay attention to critical paragraphs in terms of  both image and text
  • Where the cold content are and how can these skipped parts that has no impact on customer’s decision be improved?

4. Scroll-reach heatmaps

Finally, the scroll-reach heatmaps help digital marketers understand the likelihood of visitors to go beyond the initial fold. This is an extremely important aspect of web design that the most important elements of the page should be visible above the fold. However, based upon the type of industry and products, folds must be carefully analyzed with focus on highly converting customers. Don’t forget to keep in mind what’s the average screen resolution based upon your own analytics. Similarly, on a shopping cart, by answering a simple question such as “can everyone see the ‘Add to Cart’ button clearly  above the fold?”, one of the first ever optimization can begin.

How to use Scroll-Reach Heat map?

  • One of the most important outcome of heat map analysis of to determine how far down your visitors scroll?
  • This serves as the major indicator of level of exposure to the content – no scroll means uninteresting content
  • Here is a general rule of thumb on scroll: 100% of visitors see the top, 80% will see middle, and less than 50% see bottom most.
  • What to look for:
    • Fold Height
    • Critical paragraph
    • Cold content


Never assume your visitors will “find things by themselves”. That’s why digital marketers need to use Heatmaps to understand “WHY website visitors are taking (or not) certain actions”. The most proven learning from my analysis of heat maps is to build the landing page or product pages with simple focused design, and to be able to put the call to action on the “hot zone”. Sizes and colors (of text, images and buttons) matter in conversion rate optimization and so does the copy of “call to action”. 

Another advanced tip is to create heatmap by segments such as traffic sources (Organic visits, Paid visits or Direct visits) and further dissect the data for

  1. Conversion Focus: Build heatmap of customers that bought and did not buy from same segment
  2. Engagement Focus: On both heatmaps, where customer bounced or not bounced, find out what seemed to work and what did not seem to work
  3. Identify Most Important Elements: You could even assign “dollar value of points” to each element of the page that contributes to the conversion. If every single purchasing customers read certain paragraph, then that text is VERY valuable. Similarly, if certain image gets lots of attention by purchasing customers, then that gets HIGH points
  4. Next, determine the elements not working and begin A/B test to beat the control on all non-purchasing segments. Rinse and repeat.
  5. No matter what, someone is bound you a question on fold – what percentage of are your customers scrolling below the fold?

Now, you know how to use the heat-maps, time to focus on A/B testing for higher conversion rate optimization on your landing pages and product pages.

Repeating, the biggest mantra of CRO – Never assume your visitors will “find things by themselves” on your landing page.


About Ujjwal Bhattarai

Ujjwal is an engineer by education, a programmer by hobby, and an internet marketer by choice. Other than 1 minute chess, and biking, his passion includes SEO, SEM/PPC, CRO, and Web Development. As a lifelong student of Internet Development, he is hopelessly addicted to Internet, and sincerely believes after fire, wheel, and decimal point, internet is the fourth most important invention in the human history. Catch up with him on Twitter at @uj2wal or at his Google+ .

Leave a Reply

79,238 Spam Comments Blocked so far by Spam Free Wordpress

HTML tags are not allowed.