All too often, websites are built on a series of assumptions, eCommerce platform limitations and best guesses. No matter how you arrived at your current website, it's likely there is at least one element that drives you crazy or that makes you less confident you're operating at 100% effectiveness. Dynamic heatmaps are a powerful tool to help illustrate what’s actually happening on your website.

Whether you're a conversion optimization expert or are running a small business that’s thinking about adding something new to your marketing stack, heatmaps can help. This starter guide will clarify the purpose of dynamic heatmaps, highlight a few ways they can benefit your business and give you steps to implement a tool when you're ready.

 

Heatmaps: What They Are & How They Work

Website heatmaps illustrate visitor behavior on a web page by highlighting high-action areas, showing where clicks occur and giving you an idea of how people generally navigate the page. With a heatmap, you're able to see how far down the page visitors get on average (the effective fold) and if they're seeing your important page elements like forms and calls-to-action.

With some heatmap tools, you’re also able to see how visitors interact with more dynamic elements like navigation, popups or forms. Furthermore, some tools allow you to segment the heatmap by factors like traffic source or new vs. returning visitors to give you a more precise picture of what’s actually happening in that average visitor journey.

Heatmaps are not a report of an individual site visitor. They're also not a session recording that allows you to watch as the visitor navigates your entire site.

This is okay, though, because with heatmaps we're looking to analyze high-level behavior insights and make decisions to impact all visitors. Overall behaviors that most of your visitors are performing on your site will help inform your decision-making when improving its design.

 

Benefits of Using Heatmaps for eCommerce

Every conversion counts. And every visitor that doesn't make a purchase works against you. Heatmaps help you do battle with your conversion rate in a few key ways.

Online Store Awareness

Think of the brick and mortar store owner. They can watch shoppers navigate their aisles, interact with them and observe which products or services seem to peak their interest and which gather dust. With the eCommerce business model, your challenge is to understand your customers as well as you can without ever being in the same room as them.

With heatmaps on your side, you’re able to see the flow of traffic through each product category and specific product page. As you likely update your site regularly, this is a great way to check in on the impact of your changes and to document behavior trends.

Hypotheses & Assumption Evaluation

A/B testing ideas come from all corners of a business. Use heatmaps to evaluate the validity of any assumptions or to refine your test variation.

Wondering whether visitors on mobile devices are having an issue viewing one of your forms? Check out a heat map filtered by device type. Trying to decide how you can improve engagement with your top navigation? See which items are currently most clicked and where they rank compared to other elements down the page.

A quick word of warning: This is where many teams fall flat. It’s easy to get overwhelmed by heatmap or session recording data and not know what steps to take next. So, let’s take a second to break down hypothesis formation.

First, you must identify the issue (what you’re trying to accomplish with heatmap analysis). Then, you’ll need to propose a solution. This should be based on your understanding of your customer’s needs, your technical website’s limitations, and your general beliefs of what will improve the situation. Finally, it’s important to develop an expected result. This is what you believe will happen should your test outperform the existing version.

Here’s what this looks like in practice:

“We are seeing [identified issue] happening. We believe that by doing [proposed solution], we will see [expected result] happen.”

A great way to formalize your testing program is by making a hypothesis tracking document that simply includes these statements followed by any reporting you’d like to make note of and links or screenshots to the content involved. This way, you’ll be able to come back a year later and remember exactly what you did in case a similar situation arises.

Product Organization

If visitors don’t see your products, they can’t buy them. Use heatmaps to see which parts of your store aren’t being reached, and experiment with content that pulls the visitor further down the page. It’s also possible visitors aren’t seeing key details on an individual product listing.

If your product or ordering process is quite complex, you may need a good amount of descriptive copy. In this case, be sure to consider layout options like collapsing boxes or other features that may make the information more digestible.

Consider whether or not the visitors engage with photo carousels, descriptions and anything else that would increase their conversion rate if seen. Use a click map function to see which items are clicked most (and least) on the page. By regularly visiting these types of reports, you’ll start to be able to make on-the-fly updates to store architecture and product category organization.

 

How to Start Using Heatmaps (5 Steps)

There are many ways to work heatmaps into your workflow. What follows is a suggested path to getting started. Even if you've already implemented a heatmap tool, these steps can be a good refresher or a place to point new team members. The most important thing to remember, is that there is no secret sauce to conversion rate optimization. To see a substantial change, there is work to be done.

 

1) Start with 2-3 key web pages.

Take a look at a heatmap of your home page. No matter what role this page plays in your website architecture, it's a vital starting point for many visitors. Look to see which navigation items are engaged with most (and least), if visitors are scrolling far enough to see important messaging and calls-to-action and which information falls below your effective fold.

Other places to start could include product category pages, a specific product page, shipping information pages or your FAQ section. The goal here is to get a handle on what your website looks like under the microscope of a heatmap and to identify any obvious trends in behavior. Simply put, pay special attention to any page that might drive or influence an online sale.

Use this opportunity to see your website as an “outsider” and take note of anything that sticks out in your heatmaps. This might include behavior differences between different traffic sources (paid, organic, social, etc.) or how returning customers react to a sale offer versus those seeing your store for the first time.

 

2) Find the effective fold.

Whereas "below the fold" refers to content not first visible upon page load, the "effective fold" shows how far down the page 50% of your visitors scroll. This is key as the other half of visitors won't ever see page elements below that point.

Use the effective fold to find opportunities for content reorganization, messaging priority and anything else where you might present something new to the 50% of visitors who never make it to the bottom of the page. Also, be sure to take a look at where the effective fold falls for returning vs new visitors and different traffic sources. This may help you better understand where your marketing efforts are making the most difference in business performance.

It’s likely your effective fold is quite different for mobile traffic. Be sure to take this into account when making any updates and consider structuring your mobile product pages with a slightly different priority than those for desktop.

 

3) Evaluate CTA locations.

Where are your key conversion points? Are they above the effective fold? Use heatmaps to see which elements on your page are getting the most engagement and see if anything unexpected is taking attention away from your key CTAs.

It's possible you have a page element (or two) receiving clicks that is distracting from the main goal of the page. Whether it's a credit card company logo that doesn't need to be linked or a design element that appears to be linked, consider the impact of this on the customer experience. The visitor is either clicking and not seeing anything happen, or going to another page on the site and falling outside your conversion funnel.

For eCommerce, CTAs on product pages should be the most highly engaged feature on the page. If something else is taking away attention (even potentially something like a product photo carousel), you may need to test removing the other elements or modifying your layout.

 

4) Add heatmaps into workflows.

In speaking with businesses of all types using heatmap tools, one thing is true: Everybody has their own process. Start slow and make sure anyone involved understands what the heatmap represents and how to view the information included. A great way to do this is sharing examples of heatmaps in meetings and defining how they’ll help your organization better understand customers and their needs.

Some businesses will use heatmaps inside a monthly marketing report while others will take screenshots to present a business case or to describe an upcoming A/B test. The most important thing is to consistently check-in on your heatmaps to monitor changes in visitor behavior.

 

5) Add session recordings and form analytics.

Both session recordings and form analytics can provide an even deeper level of clarity when evaluating your website. When you spot a trend on a heatmap, check out individual session recordings to see a playback of how a specific user navigated the site. For example, see what users are doing when they leave a page before scrolling to the bottom or watch along as a user starts but doesn’t complete a signup form.

Speaking of forms, there are several key metrics to follow when it comes to your forms. With form analytics tools, things like field time, field order and abandonment rate will help you optimize your forms to better align with user expectations and needs. For longer, more complex forms, consider breaking things into a multi-step experience.

 

The goal with conversion forms is to inspire purchase confidence, clarify product customization and quickly move a visitor with purchasing intent into the customer phase.

 

Conclusion

Will a heatmap make a $1,000 business into a $1M business overnight? Not likely. Will a heatmap better align your testing, optimization, and customer experience efforts with reality so you can take small steps forward? Absolutely. Adding conversion rate optimization tools into your stack takes your knowledge to the next level and gives you the data to optimize confidently.