You might have a great website.
But, to continue growing and improving it, you want to know how your users are engaging with it.
Google Analytics is a great place to start. But what if you want to go further, and get more visual insights on how individuals are interacting with your pages?
Enter: Hotjar heatmaps.
We've been using Hotjar for over a year, and it's something that we recommend to all clients on the launch of a new website.
If you want to give it a try yourself, today we'll walk you through what Hotjar does, how to use it and how to analyse your heatmap results.
What is a heatmap?
A heatmap is essentially a way to visualise how users are interacting with your website. It'll allow you to see areas of high activity - your website hotspots - signified with a warmer red or orange colour, and areas of inactivity visualised in cooler tones.
They can offer more insight than simply tracking the usual website KPIs, helping to identify areas for improvement and, in turn, how you can improve your user experience and conversion rates.
Essentially, heatmaps help make complex data simple to understand at-a-glance. So they're a great tool for those who prefer to take a visual approach to their marketing.
What does Hotjar do?
Hotjar is marketing software that provides you with a range of user testing tools and ways to analyse your website. You'll need to install a unique Hotjar tracking code (similar to how you would with a tool like Google Analytics) then you'll be able to get started with running website heatmaps and session recordings on your website.
Hotjar pricing
Hotjar does offer a basic plan which is free of charge. With the basic plan, you'll get unlimited team members, and you'll be able to record a limited number of recordings and run up to three heatmaps at a time.
Premium plans are also available from a monthly fee of £39 - £389 depending on the size of your business and your chosen package. These packages offer a range of features including more heatmaps and recordings, detailed targeting, tagging, insights and training.
But, for small businesses, the free package is enough to get started and get an insight into what this powerful tool can do.
Hotjar alternatives
Hotjar is one of the largest and most established heatmap tools out there, and it's the one we've used on a long term basis.
But, there are plenty of alternative options too:
- Microsoft Clarity - This relatively new tool from Microsoft offers heatmaps and recordings and integrates with analytics - and it claims to be free, forever.
- Crazy Egg - This software offers heatmaps, snapshots, session recordings and an A/B testing tool too. There are a few packages available depending on your industry and needs.
- Mouseflow - This heatmap tool also offers session recordings and a number of other features to understand how users are interacting with your website. It's a paid tool, with a 14-day free trial to get started.
- Smartlook - Offering heatmaps and analytics insights for websites and mobile apps. Smartlook also has free and paid options available.
We haven't tried out all of the platforms above, but the majority do offer free trials. If you try them out, be sure to let us know what you think!
How to set up a heatmap in Hotjar
Once you've created an account and installed your Hotjar tracking code, it's pretty straightforward to start collecting data right away. All you need to do is name your heatmap, and select the page you want it to target. Set it live and it'll start collecting data.
With a Basic plan, your heatmap will run until it has collected data from 1000 pageviews, at which point it will be complete. With a paid plan, you can set a heatmap to run continuously capturing a limited number of sessions every day.
For your first ever heatmap, we'd recommend targeting the homepage to start with. But, as you get more familiar with the process, you could start heatmapping new landing pages, under-performing pages, transactional pages and more.
How to read a heatmap
Heatmaps are a form of data visualisation that make it easy for anyone to understand at a glance how people are interacting with their website.
But you can delve deeper to gain additional insights on your website's strengths, weaknesses and how you can improve conversions.
Hotjar collects data to display three different types of heatmap for desktop users. We'll take you through each one, and some of the different insights you can gain from them.
You can also view data for mobile or tablet users, which will include tap and scroll heatmaps only.
Scroll heatmaps
This map shows you how far your users are scrolling down the page. As well as the visualisation, HotJar also provides the percentage of users that reach each section, making it easier to understand what content sits 'above the fold' and what content is potentially being missed. This will help you ensure all your most important content is nice and prominent above the fold, and avoid making your users work harder to get to the content they need.
You can also combine this information with your movement and click maps to identify areas that are getting a lot of engagement but not being seen by a large number of your users, and vice versa.
Movement heatmaps
Next up is movement. This one shows you everywhere your users have moved their mouse on the page, regardless of whether they clicked or not.
According to HotJar, research shows a correlation between where people are looking and where their mouse is, so this should help you understand how your visitors' eyes are travelling through the page. Are they focusing on your key messages and calls to action? Or are these diffused by other elements? The movement map will help you understand where your user's attention is going.
Website click heatmaps
Lastly, the all-important click data. Yes, you could probably get the majority of this data from Google Analytics but the website click heatmaps help visualise really clearly which sections are working and which are not. For everywhere that has been clicked, you can also get the exact number of clicks and what percentage that is of the entire sample size.
The click map is also good for identifying areas that may be causing frustration, for example, a text headline that people are clicking on that isn't actually hyperlinked to anything else. Of course, it also helps you see clearly if people are clicking on your key CTAs.
How heatmaps help improve your user experience
These heatmaps are a great way to visualise how your users are engaging with your website, and therefore how you can improve your user experience. They'll help you understand:
- If your most important content is being seen. Scroll maps will help identify which areas of your page are getting viewed the most, and therefore where you should place your most important messaging.
- What elements are most eye-catching. The movement map will help identify which areas of your page are drawing attention, and where users are hovering their mouse.
- Clicks and click-through rates. The click map shows you at a glance which of your CTAs are being clicked and by how many of your users. That includes where users are hovering their mouse and then not clicking, which may indicate some kind of hesitation.
- Points of frustration. You can combine this data to identify points where users are spending a lot of time hovering or attempting to click when the element isn't actually clickable.
- The experience on different devices. Hotjar splits your heatmaps by desktop, mobile and tablet so you can easily see how users are engaging on different devices.
For example, if you have a hamburger menu on mobile, you might find that this is a particularly hot area for taps - whereas on desktop the clicks will be more diffused across your header navigation.
Website heatmapping is just one of the methods we use for conversion rate optimisation. If you'd like to find out more about how we can help you optimise your website for conversions and improve your user experience, just get in touch with us using the form below.
