Heatmapping is a simple and efficient way to analyze visitor interaction and user behavior on your website. If you are in a Conversion Rate Optimization (aka. CRO) project with your e-commerce or startup (or any other online) business, it’s indispensable to run some website heatmaps – such as click, mouse movement or scroll heatmaps.

click heatmap example

What is a website heatmap?

If the above picture didn’t make it clear: a heatmap is created by recording all the clicks and mouse movements of your website visitors – then color the different parts by frequency. Red is the “hottest” (most frequented) and on the other end of the scale blue is the coolest (least frequented) part. This nice and easy-to-interpret visualisation format helps you to understand, which part of your page drew the biggest visitor attention.

Heatmap tools and vendors

Good news! You don’t have to develop your own solution as there are quite a few vendors on the market. I’ve personally tested almost all of them, so below I’ll share my recommendations (Note: I’m not affiliated with any of the vendors.) The (not-complete) list:

My personal favorite is Hotjar. I’ve tried it, I’m using it, I’m loving it. It gives many cool features for a very competitive price (most of the companies I’m working/worked with are using either the $29 or the $89 monthly plan). Sometimes I use Crazyegg too. It has fair pricing as well with the $49 or $99 monthly plans. The only real difference between Hotjar and Crazyegg are the features they provide:

Hotjar Crazyegg
Basic Features Click Heatmaps

Scroll Heatmaps

Click Heatmaps

Scroll Heatmaps

Extra Features Mouse Movement Heatmaps

Session Recording

Advanced segmentation
Other additional features Exit-intent polls

Funnels

Visitor polls

etc…

Pricing (recommended plans) $29 or $89 for small businesses $49 or $99 for small businesses
Trustworthy data Yes Yes
User friendly Yes Yes

 

As you can see Hotjar has more features – so my recommendation is to go with that in most of the cases – and only when you know that you need advanced segmentation, go with Crazyegg.

I don’t really like the rest of the vendors. I’ve tried Mouseflow, I didn’t find it user friendly, and the data they returned looked sometimes a bit off, so I just couldn’t trust it. When it comes to Clicktale, it’s pricing seems unreasonably high. And the built-in heatmap feature in Google Analytics, well… it’s not even a heatmap, so don’t use that either. (Just for the record: I love Google Analytics for the rest of the features it provides. Plus I have a hack in GA to get more accurate click maps for free – see in another article later).

But wait… what is a heatmap on my website good for at all?

It really depends on what kind of heatmap we are talking about.

1. Click heatmap:

This is the most clear one. Eg. you have a landing page with four CTA buttons – of course you want to know, which one brings the most conversions. A Click Heatmap can easily show you, which one was clicked the most.

click heat map example

click data

2. Mouse Movement heatmap:

Researches have already proved, that there is an ~80-90% correlation between eye- and mouse movements. I’m not not trying to suggest here, that eye tracking is not an important research to do. But for small businesses running some mouse movement heatmaps on 2.000 visitors for $29 might be better value for money, than running eye tracking researches on 5 users for $500-$5000 – if it brings roughly the same results.

move heat map example

movement data

When exactly should you use it? Eg. on e-commerce product pages, where people spend big time with reading descriptions and watching product pictures, but they do not necessarily click. Based on where they move their cursor we can conclude what part of the page they were watching and get a good estimation of which part of the text they have read and which part they haven’t.

3. Scroll heatmap:

scroll heat map exampleYou would be surprised, if you knew how many people are not scrolling. I have analysed over 1000 different pages in the last few years and barely have seen one, where more than 60% of people has scrolled below the fold. Who knows, maybe that’s not the case on your website – but it’s really easy to find out with a scroll depth heatmap.
Note: and here I’d suggest to take a further look at the differences between mobile, desktop and tablet, because on mobile and tablet usually people are scrolling.

4. Session Recording:

I know, kinda scary, but this is what it is: javascript snippets are also able to record visitors’ sessions, so you can watch them back. It’s good, because a heatmap itself is an abstraction of the user journey. On a video like this one you can also see the actual struggle of a visitor.

session recording

recording of a visitor session (anonym)

(Important note: password and credit card fields are automatically removed from tracking in most of the tools. Before you start a recording, you should doublecheck this though, to make sure you are not violating visitors’ rights.)

How to implement your heatmap tool?

Super easy.
Very obviously first you have to sign up for one of the vendors. When you do it, you have to specify your domain, then implement a tracking code into your website. Almost all the tools are working with javascript. The implementation can happen by Google Tag Manager (recommended by me) or you can copy-paste the given snippet in your website code directly.

tracking code

Note: If you are using WordPress, you can even use the free Hotjar and Crazyegg plugins.

Heatmapping as the part of your analytics strategy

Here’s how I use website heatmaps when I do conversion optimization:

Before anything else, I like to run a few usability tests, where I can meet with the potential users and website visitors in real life and where I can see their interactions with my own eyes – even more I can ask questions from them. This helps me to point my attention to some key problems – that I might never think about by myself – and to some key elements, that I should focus on more during my researches.

As a second step I like to go to Google Analytics and check the BEHAVIOUR —» PAGES and the BEHAVIOUR —» LANDING PAGES reports. With these two I can find the pages with high traffic – and probably bigger impact on my conversion results.

analytics behavior all pages landing pages

some g-analytics reports to look at

Once I’m done with the above two, I’m usually having a list of around 10-12 key-pages I want to see a heatmap of. At this phase I try to come up with hypotheses: eg. “I expect to see at least the 10% of the clicks coming on my CTA button.” or “I expect, that at least 50% of users are scrolling below the fold.”

It’s also important to see that heatmapping is not a “l’art pour l’art“ activity – once you are done with it, make sure that you are syncing the results of it with the other researches of yours (eg. five second testing, funnel analytics, cohort analysis, etc…) and these efforts all together are serving a purpose, which is usually optimizing your website content (or layout) via A/B testing.

How to set up a website heatmap?

If you are done with the tracking code implementation and with the pre-study-phase too, it’s time to set up your actual heatmaps. Don’t worry, it’s really easy. In Hotjar eg., it has 4 simple steps:

new heatmap

  1. When you click “+ New Heatmap”, you will have to give a name to your project.
    step1 - name your report
  2. Then you have to select the sample size: how many pageviews you would like to base your heatmap on. (I recommend 2000 pageviews.)
    step2 - select the number of pageviews
  3. The next step is to specify the URL. It can be a simple match (eg. www.data36.com/website-heatmap-tools-features-best-practices), but if you are an advanced player, you can use regular expressions too (eg. for monitoring multiple product pages in an e-commerce store).
    step3 - collect data on which pages
  4. If everything’s OK and ready to go: just start collecting data!
    Note: don’t worry, even if you mess up something (which is almost impossible by the way) accidentally, it won’t show up on your website and won’t hurt user experience. The only negative outcome could be, that your heatmap will be broken (most of the cases empty.)
    step4 - create website heatmap

That’s it! Let’s check the results one week later!

You will get back three types of heatmaps automatically: a click, a scroll and a mouse movement heatmap – all segmented by device type (desktop, mobile, tablet).

segmentation

If you want to create a session recording, you can do it similarly, but on this menu:

visitor session recording

Note: I usually recommend to record 100 sessions only – sometimes 2.000… but I can assure you, that you won’t watch 2000 videos after all ;-).

So how to profit from your heatmap data?

Again: if you do a research, you do it on purpose. In this case, you want to prepare A/B testing with solid user data. It’s not possible to give you exact guidelines on how to read your heatmap data without knowing the context, but for inspiration, here are 4 common scenarios I’ve met in the last years:

  1. If you see, more than 75% of clicks are going to your top menu on your start page. At e-commerce shops I have seen sometimes that visitors are interacting mostly with the top menu, when they land on the front page. In this case – if the top menu is not stick to the top of the browser – it’s a good A/B testing idea to try a sticky against a non-sticky top menu. (I had cases when only this little change – stick the top bar – brought +25% in revenue.)
  2. If you see, less than 30% of people are scrolling… then try to move your most important content and USPs above the fold. You can test out your above the fold content with five second testing too.
  3. Form analytics: An easy way to understand your conversion funnels on your (eg. registration) forms is to do it by counting the actual clicks on the different fields. Heatmaps can do the job here as well.
  4. If you see, people are not clicking your CTAs. Call-to-action buttons are the most crucial part of every website… First define, what “not clicking CTAs” means! (Sometimes even 2% click-rate counts pretty good!) If it’s still below your realistic expectations, then act on it. Let me bust the “red button is always better” myth here… Changing button colors usually do not fix users’ problems. To have more CTA clicks, try to focus on understanding your visitors’ needs and improving user experience. This means further researches. (Here’s a guide, how to do it: Online Research Framework)

As I’ve mentioned, I’m generalizing with the above four examples. The aim was to give you some ideas on how to profit from heatmapping projects – but don’t use these without context… And anyway I highly recommend to A/B test every major changes on your website to make sure, that you actually increase your conversion rate.

Conclusion

That’s all folks! Heatmapping is super-easy, super-useful and super-cost-effective for small and medium online businesses, so don’t hesitate to use it in your CRO projects! Choosing any of the tools I’ve listed, you can start within 5 minutes. When you are using heatmaps, make sure, it’s an essential part of your user research strategy: do pre-studies (eg. usability tests, and Google Analytics reports) and understand that this all happens to prepare better and more likely successful A/B tests!

If you have questions, feel free to ask in the comment section below – otherwise don’t forget to subscribe to my weekly Newsletter to be notified about my upcoming articles, video tutorials, webinars, etc.

Cheers,
Tomi Mester