Getting the best from Heatmaps and Session recording

Why Are Visitors Not Engaging?

You’ve spent time and effort building your website, you’ve great analytics giving you the click stream data and the popular content, but are visitors truly engaging with this content? Are they actually doing something useful for them and beneficial for your organisations mission?

This is where heatmaps and session recordings become invaluable. In my time as Head of Conversion we used these extensively (after a small battle to get them live in the first place) - They require time and effort (but doesn’t everything that’s worth it!!) but they really do help uncover hidden barriers, highlight opportunities and give you the insights needed to optimise your website for higher engagement, conversions and client actions.

Let’s explore what they are, why they matter and how to use them effectively.

1. What Are Heatmaps & Session Recordings?

📌 Heatmaps: Visualise your User clicks, scrolls and hovers.

Heatmaps provide a color-coded or percentage representation of visitor interactions on a webpage. They show:

• Click Maps – Where users click most (or not at all).

• Scroll Maps – How far users scroll before dropping off.

• Hover Maps – Where users hover their mouse (desktop users).

📊 Example Insights: If key CTAs (like "Donate Now" or "Sign Up") are in areas with little engagement, it may be time to test new placements or colours. If an image on your page is inviting loads of clicks but it is not clickable – make it clickable – it will be causing rage in you visitors!!

📌 Session Recordings: Watching Real User Behaviours

Session recordings capture real-time videos of users navigating your website. They highlight:

• Where users hesitate or get stuck.

• Repeated actions that suggest confusion.

• Form abandonment and field based errors.

📽️ Example Insight: If users are always inputting the wrong format in one of your fields the odds are you have the instructions wrong or not enough instruction on how to complete.

2. Why Heatmaps & Session Recordings Matter for Engagement

💡 Traditional analytics (like Google Analytics) tell you what is happening—but heatmaps and session recordings help tell you why (along with surveys). When used as a triad of data it becomes really really powerful (analytics, survey data, replay/heatmap data):

✅ Identify UX Friction Points: Where users hesitate, get frustrated, or leave.

✅ Optimise Page Layouts: Improve CTA placements based on high-engagement areas.

✅ Reduce Form Abandonment: Find where users struggle, fail and drop off.

✅ Boost Donations & Conversions: Make sure your key actions are easy and intuitive.

3. How to Use Heatmaps & Session Recordings for Optimisation

First things first – none of this is a quick win, don’t get me wrong it will highlight the ubiquitous “low hanging fruit” but all too often site owners expect these tools to be a silver bullet (not helped by the vendors usually telling you they are the silver bullet that no vendor ever is!!) – Getting the right insights that then generate your hypothesis and design ideas takes time and EFFORT.

So – you have data from analytics saying your micro conversion of step 1 to step 2 is not as high as you would think, lots of repeat page visits but no progress forwards…..

Step 1: Start with Heatmaps for Quick Insights

1️⃣ Run heatmaps on key pages - Don't do every page as you will be overwhelmed (e.g. homepage, donation pages, event sign-ups, etc.).

2️⃣ Check Click Maps: Are users clicking non-clickable elements? Are CTAs ignored?

3️⃣ Analyse Scroll Depth: Are users reaching your most important content? If not, move key messages higher. (side bar – how do you know what the most important content is? This should be coming from user research or feedback)

4️⃣ Identify Distractions: Are secondary elements (like images or links) taking attention away from conversions?

🔍 Example Fix: If users aren't scrolling far enough to see your donation appeal, test moving it higher up the page, if they are seeing it but not clicking what is the supporting information around the CTA or is the CTA contrasting enough vs the rest of the page content to draw the eye?

Step 2: Review Session Recordings for Deeper Insights

1️⃣ Watch recordings of high-exit pages. Can you see what is causing drop-offs?

2️⃣ Look for repeated behaviours: (some tools will do this for you – ContentSquare for example uses AI to find insights for you) Are users getting stuck in loops, clicking aimlessly, or struggling with navigation?

3️⃣ Observe form completions: Do users abandon forms halfway? If so, what fields seem to be causing friction?

4️⃣ Analyse Mobile vs. Desktop Behaviours: Are mobile users struggling with elements that work fine on desktop – this is really really common – Serious question -  What screen size are your designers building your experiences on? Is it a 27” double monitor set up or similar? Is the “mobile first” approach simply viewing their big screen designs on a small screen every few hours?? If you are not truly doing your design mobile first you really should be!!

🔍 Example Fix: If users abandon forms at the "Phone Number" field, consider making it optional or explaining why it’s needed or making sure it allows the space that everyone puts in the middle (you’d be surprised how many forms can’t handle spaces elegantly)

4. Practical and potential outputs following Heatmaps & Recordings analysis.

• Ensure donation buttons are in high-click and high engagement areas – note that right at the top may not be high engagement – banner blindness is a thing as is immediately scrolling after landing

• Remove distractions from donation pages.

• Make forms as easy and frictionless as possible – handle errors and common customer inputs elegantly (As Steve Jobs rightly said “if a user has a problem, that’s our problem!”)

• Test different button placements for better visibility.

• Identify where users drop off in the sign-up process.

• Optimise mobile experience to prevent frustration.

• Make sure key product areas get attention.

• Reduce abandoned carts by improving checkout UX.

• Highlight best-selling products in high-engagement areas.

• Place important messages in high-scrolled areas.

• Use visuals effectively to keep attention.

• Make CTAs stand out in heat-heavy sections.

5. Tools to Get Started

There are several easy-to-use tools for heatmaps and session recordings:

🔹 Hotjar – Good for beginners, offers heatmaps, session recordings & surveys.

🔹 ContentSquare– Enterprise level and advanced (owner of HotJar), offers heatmaps, session recordings & Automated AI driven insights.

🔹 Microsoft Clarity – Free tool with great session replay & AI-driven insights – Microsoft promise it will always be free..

🔹 Crazy Egg – Great cheaper option for smaller sites (they do cover enterprise level as well) for detailed heatmaps & A/B testing.

🔹 FullStory – Advanced tool with deep analytics & user frustration tracking.

By using heatmaps and session recordings, you’ll see your website through your users’ eyes and make data-backed decisions that boost engagement, donations, and conversions.

Final Thoughts

Don’t guess what’s wrong with your website (YOU are not your typical visitor!!) - see it in action. Heatmaps and session recordings offer visual proof of where your site succeeds and where it needs improvement.

Whether you’re running a charity, non-profit, or an ethical business, making optimisations based on behavioural data can have a huge impact on engagement and fundraising success.

🛠️ Ready to start optimising? Try one of the tools today and watch your engagement skyrocket! Get in touch for your free, no obligation conversion review