Getting started with Heatmaps

Hotjar Basics


Heatmaps are exactly what their name suggests: 
visual representations (maps) of the most clicked, tapped, swiped, and viewed (hot) points of a website page or app.


1. What Hotjar Heatmaps can do for you

Heatmaps give you an at-a-glance overview of what people do when they get onto your website or app. Using colours on a scale from cold to hot, Hotjar heatmaps show the ‘hottest’ elements that get the most interaction and views in red, so you can immediately spot what your users are clicking on, scrolling past, and ignoring.  

To see a real heatmap, take a look here: it's a heatmap of the page you are currently on, generated based on 70 pageviews (note: it will open in a new tab). 

Heatmaps can be an extremely powerful tool when you need to:

  • find specific issues: for example, you get to see whether your users click or tap on your main buttons or on elements that are not links;
  • discover opportunities: for example, if you find out that key information is getting ignored, you can move it to a more visible place;
  • make informed decisions: for example, you can get clarity on whether one or more elements on the page are distracting your users and need moving, or get additional insights when you run an A/B test on a page;
  • get team members and stakeholders on board: heatmaps can be easily downloaded and shared, so other people can quickly see and understand what is going on.

2. Where to set up your first heatmap

Setting up a heatmap in Hotjar is quick and straightforward, but first you need to decide which page(s) you want to track. 

Here are a few pointers:

  • your homepage and main landing page(s) are the main entry points into your website. They are often responsible for your visitors’ first impressions and for their decision to continue browsing or abandon the website. A heatmap on these pages will help you determine how much information gets seen or interacted with, and what elements are being clicked on or ignored.

  • your best-performing pages (the most viewed product page, the most commented blog post, etc.) are obviously doing something right: a heatmap can help you understand what is working well, so you can replicate the success elsewhere.

  • your worst-performing pages are as important as the previous ones, but for the opposite reason: there is likely something wrong with them, and placing a heatmap there can help you understand what your visitors are (not) seeing or interacting with, so you can take action.

  • your newest pages don’t have a lot of data: if you recently added a page to your website, a heatmap might be a good way to get some initial information about how the page is performing.

For example:
 we published the page you are currently reading in the first week of December 2017. We know how many people reached it from Google Analytics, but with a heatmap we can also see how far down the page people are (or not) going. Take a look for yourself (opens in a new tab). 

3. Reading your first heatmap

After you set up your first Hotjar heatmap, Hotjar starts recording your visitors’ behaviour when they do things such as click or tap on a button, swipe and scroll up or down a page (it only takes one person to visit the page for the heatmaps to start working, but of course data based on just one visitor might not be very useful). 

As more and more data of this kind gets recorded, Hotjar generates visualisations that look something like this:

Tip: if and when your page design changes, you should start a new heatmap so you can revise the old version and compare it to the new one. 

These are the main things you should know and look out for in a heatmap:

# Red elements get the most interaction.

If the reddest elements on the heatmap are not links, you might be causing confusion or frustration for users who waste their clicks while expecting to be taken elsewhere.

Red elements also give you important information about what visitors are interested in: what is the most clicked element, and where does it take people who click on or tap it? Is the reddest element the most important one, or are users ignoring something you'd rather they focused on?

hotjar-menu-mapour old menu raised a question: (why) were people not seeing the blog? 

Once you have this data, you can think about changing page elements accordingly to get clicks where you want them.

# Red areas on a scroll map have been seen the most.
If some of the most important information on the page only gets seen by a small percentage of your visitors, you may need to move some elements around to give them more visibility; if the change in colour is particularly sharp, people might think they have reached the end of the page and you should be thinking about removing confusing design elements.

b_6_hotjar_scroll_heatmapone of our pages: should we bring some of the elements higher up?


This is particularly important when you have longer pages (such as a landing page) with a lot of information that you want your users to see.

# Your website looks different on different devices.
Important content that is prominent on a desktop page could sit much further below the fold on a phone, where fewer users see it; viceversa, your page content could look very compact and well-structured on a mobile device, but sparse and poorly organised on very large screens.

Hotjar allows you to look at your heatmap data based on the behaviour of desktop, tablet, and mobile users, so you can look at device-specific information. Comparing performance on different devices will also help you uncover and fix obvious inconsistencies.

4. Combining heatmaps with other insight

Heatmaps can be used in isolation (here is a list of 8 heatmap tests we recommend to get you started) to help you understand what is happening on your website and make quick changes or fix issues. 

But when you want more details and/or an in-depth understanding of why things are happening, you might need to do start using multiple data sources. 

Your next step is to combine heatmaps with other Hotjar tools to get richer insight. For example, you can:

- use heatmaps with recordings to watch exactly how users interact with the page;

combine heatmaps with polls to ask users on the page what they are looking for;

 -use heatmaps and surveys together to get granular detail from your users.

Are you ready? Log into your account and get started! 

Hi! We created this page based on conversations we had with current Hotjar users. If you have any tips for using Hotjar or suggestions for what we should write next, send us an 📧and let's talk! 

🙌 ,
Fio Dossetto - Content Marketer & Editor