What’s actually happening when visitors navigate your website? You may have traditional analytics that show which pages each person visits and how much time they spend -- but how do you know what they’re doing while on each page?
Dynamic heatmaps will take your qualitative research up a notch by visualizing how your visitors scroll, where they click and which areas of a page they avoid.
Let’s take a look at how dynamic heatmaps can help with conversion rate optimization (CRO) efforts on your website.
What are heatmaps?
Heatmaps are a visual representation of website visitor behavior. While they vary in complexity and accuracy, they’re a great way to better understand the average behavior of a visitor on any given page of your site.
In general, heatmap tools require website owners to place a small code snippet in their header or footer to generate the visualization. The technology then goes to work, following mouse movement including scrolls and clicks and adds color to the page visualization based on the amount of activity in the selected traffic segment.
In this example (specifically a scroll heatmap), you can see how far down the page an average visitor goes (the effective fold). You can also see when the color fades away which represents an area most website traffic is not seeing.
Source: Lucky Orange
What are dynamic heatmaps?
Dynamic heatmaps show how visitors interact with dynamic elements of a page including forms, navigation dropdowns and popups -- in addition to the same features as their static counterparts. They also play well with SPAs and Ajax. So, they’re basically a step up in the depth of knowledge. This gives you the most complete picture possible of visitor behavior on the site.
In this example (filtered for tablet-only traffic), you can see how visitors engage with a menu that's not first visible when landing on the page. With a traditional heatmap tool, you would completely miss the top-clicked menu items here.
Throughout this article, we’ll highlight different ways to use this information to improve your website experience. Let’s get started with a few more examples and descriptions of what they’re showing.
Try the full range of Lucky Orange tools, including Dynamic Heatmaps with a .
Five common ways to use a heatmap
Average scroll depth (the effective fold)
No matter what goals you set for your website, you want visitors to check out the entire page. By monitoring the effective fold, you’re able to see where the average visitor stops scrolling when on a page.
Why does this matter?
If there’s a call-to-action or other key content block below this line, then you may want to consider moving it up the page.
You may assume that visitors will only click where you intend for them to click. This could be a form, navigation list or in-body hyperlink.
Oftentimes, though you’ll find visitors are clicking on unexpected items that may not even be linked. For example, if you list customers on your site with logos, visitors may think these are linked to something and try to click them.
Regardless of where your clicks are happening, use this view as an indicator of where visitor attention is going during the website customer journey.
As mentioned above, be sure your CTA is above the average scroll depth. Beyond that, if your CTA lives next to something else receiving a lot of clicks, determine whether or not it makes sense to separate these elements to remove the distraction.
When it comes to landing pages for paid traffic, CTA location is even more important as it might be the only desired action on the page.
In this example, we can see the CTA button is in a great spot -- with 100% of average visitors making it to that point on the page.
Take heatmap analysis a step further with segmentation. See how different traffic sources or visitor segments navigate the page to see how they’re engaging with your content.
This can be used to judge the quality of your traffic (high-abandonment rates combined with low scroll depth indicate traffic not interested in your offer) or compare the behavior of new versus returning visitors.
In an ideal world, 100% of visitors who start filling out your form will finish. The unfortunate reality is somewhere below this mark. Find the field causing the most abandonment by using a form analytics tool on top of your heatmap.
This will show you which form field the visitor was last completing prior to leaving the page. To fix this, test switching form order, breaking your form into more digestible steps or altering your approach to .
The goal here is to increase the percentage of visitors who complete this specific form field.
Do you care about mobile traffic?
The best heatmap tools will allow you to see behavior visualizations on various device types. Since many websites emphasize the mobile visitor experience, this part of the tool is vital. And if you're using a traditional heatmap tool, you may miss insights on elements that perform differently on mobile (like hamburger menus and mobile-only form flows).
We always recommend comparing mobile and desktop views to see the entire visitor behavior picture. Regardless of how much mobile traffic you receive, the percentage is likely to grow in the coming years.
In this mobile heatmap (filtered for clicks) example, we see which product categories visitors click most when reaching the site on a mobile device.
Do you have time to use a heatmap tool?
Of course, simply adding a tool doesn’t bring you value unto itself. You have to use the tool for it to improve your website. Heatmaps are very simple to use and work into your weekly or monthly analysis process.
Most of our customers either check behavior for specific segments on specific pages each month or take a general look across the entire site when they get a chance.
The point here is that heatmaps can bring you value in a variety of ways. And if your heatmap software includes other conversion optimization tools (like function), then you may find even more value in your subscription.
Pairing heatmaps with other tools like an A/B split testing software can provide powerful insights in the pursuit of increasing conversions.
Heatmaps are one of the simplest, yet arguably most powerful CRO tools you can use. They give you a behind-the-scenes look at visitor behavior, highlighting areas for improvement.
They’re easy to share with other team members who want to know what’s happening on the website and they’re concrete evidence for backing up optimization decisions.