What is a Dynamic Heatmap?

Traditional analytics tell you how many visitors came to your site, which traffic source got them there, how many pages they saw and how long they were on your site. But what about their behavior within each of those pages? How do you know which elements on a page are attracting attention, which are not and what’s preventing them from making a purchase?

Dynamic heatmaps provide the next level of customer experience insight by visualizing how your visitors navigate each page during their site visit. What this unlocks is an ability for you as an analyst to make smarter optimization decisions. And with 70% of e-commerce carts being abandoned, efficient optimization is key for the success of growing businesses.

Defined: Dynamic Heat Map 

Dynamic heatmaps are a visual representation of website visitor behavior including basic navigation and interactions with dynamic elements like popups and forms. 

Often used to better understand which parts of a page are attracting more attention than others, dynamic heatmaps help businesses improve their websites to increase engagement and improve the customer experience. 

Why should you use dynamic heatmaps?

There are three primary ways heatmaps can aid your optimization efforts. If you’re just getting started, pull up heatmaps for the top 3-5 pages on your site and see which areas have the most attention. Do these high-interest areas align with your goal for the page?

1. Better understand your visitors and their needs. 

How a visitor navigates your site is the purest form of feedback you can obtain. If the average visitor isn’t scrolling beyond the initial visible fold, using a feature you’ve built or taking the steps to a conversion, a heatmap can help.

Is your top-selling item performing well because it’s what the visitor actually wants or because it has great placement within the store? Do your visitors want to read reviews on individual products or on products made by a certain brand? 

Pairing dynamic heatmap insights with conversion data will paint a more complete picture of the closed-loop shopping experience. 

2. Validate your website architecture. 

Making decisions about website architecture without great data can be a shot in the dark. Compounding this difficulty is the assumptions we form as people working inside a business every single day.

Heatmaps allow us to test our assumptions and validate decisions before they go live. Not only can you use a heatmap to analyze the current state of your site, you can also (depending on which tools you use) leverage them to monitor the performance of both variations in an A/B test. 

3. Share your findings with other team members. 

Whether you’re preparing for a new website test, seasonal marketing campaign or simply making a point about website performance, sharing dynamic heatmaps can provide clarity. 

Seeing a heatmap for the first time can be a powerful experience. Knowing that businesses can, in fact, optimize intelligently helps to align business leadership, marketers, developers and beyond. And for agencies, heatmaps can provide a high-impact visual element in the reporting process.

How to get started using dynamic heatmaps

Though BigCommerce businesses provide a vast array of products and services to the world, the website issues they experience are typically quite similar. The five strategies below will help apply heatmap insights to some fundamental areas of optimization.

1. Compare the behavior of different traffic demographics. 

If your website receives traffic from several sources, you likely have one or two that outperform all the others. You may also have a set of visitors with a higher than average cart value or some who come back time and again but don’t make a purchase.

No matter how you choose to segment your audience, a dynamic heatmap can show the behavior differences between groups. Are high-value visitors landing on one page and converting or are they navigating content or reading shipping information first? 

Use segmented heatmap data to improve the experience for demographics that don’t perform as well. Even small adjustments to your site can make a huge difference for a specific subset of your audience.

2. Evaluate pages throughout your conversion funnel. 

If a typical site visitor lands on a specific product page, goes to a category page, then the home page and then adds to cart--you should evaluate heatmaps for all of those pages. 

Of course, a heatmap won’t always provide a game-changing insight, but spending time on each key page (or page type) will give you the best chance of effective optimization. 

Understanding the relationship between your visitors and the content of your site will help highlight holes in your funnel that you may otherwise miss. This could include design challenges but may also help you spot a technical issue that is preventing a sale.

3. Find your effective fold. 

Traditionally, the fold is the cutoff line of visible page material when a visitor lands on your page. The effective fold in a heatmap shows where 50% of visitors scroll on a given page. 

When evaluating the effective fold, pay attention to those key items that fall above and below the line. Are your key messages and CTA seen by the average visitor? Are there secondary conversion opportunities below the line? Is your layout doing enough to encourage visitors down the page?

Depending on your business type, adding educational content to a page can increase your average scroll depth. For e-commerce, product demos and high-quality product photos, descriptions and use cases helps alleviate any confusion a visitor may have.

4. Investigate top-clicked elements across the page. 

Your top-clicked page elements tell the ultimate engagement story. Ideally, your conversion buttons and CTAs are the most-clicked, followed by navigation and any other links that keep the visitor within your store.

If there is an element distracting the visitor from converting, consider its placement on the page. If it’s a completely necessary element can you move it below the effective fold? 

When it comes to navigation bars, this is a great way to analyze the order of elements. If you’re not seeing clicks on a vital navigation item, consider an easy test moving it further to the left or combining it underneath another item to consolidate.

5. Compare your mobile and desktop site experience. 

Having an optimized mobile website experience continues to be increasingly important. Especially for e-commerce businesses competing against much larger businesses with apps and beautiful websites, having a gap in the mobile experience can be a major issue.

When comparing mobile and desktop heatmaps, look for areas of struggle (lots of back and forth and rapid clicking) or vastly different behavior (scroll depth, navigation and form engagement). Mobile visitors are more likely to lack the patience required to navigate a difficult website.

Conclusion 

Adding dynamic heatmaps to your optimization workflow can be the difference between randomly testing based on intuition and strategic upgrades that leave your site visitors wow’d. Using these strategies, you can avoid the overwhelming feeling of evaluating everything all at once and focus on the most important sections of your website.