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.
Heatmaps give you an at-a-glance overview of what people do when they get onto your website or app. Using colors 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 a previous version of the page you are currently on, generated based on 70 page views (note: it will open in a new tab).
Heatmaps can be an extremely powerful tool when you need to:
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).
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 visualizations that look something like this:
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.
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; vice-versa, your page content could look very compact and well-structured on a mobile device, but sparse and poorly organized on very large screens.
Hotjar allows you to look at your Heatmap data based on the behavior 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.
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.
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, reach out to
Fio Dossetto - Content Marketer