Hotjar Heatmap Guide

8 Heatmap Tests that reveal visitor behavior.

A heatmap is more than just 'eye candy'. It's an extremely insightful tool as long as you know what you are looking for. To help you get there, the Hotjar team put together 8 quick tests that will give you simple and actionable ways to improve your site pages.

The 3 Hotjar heatmaps used in these tests:

Click HeatmapsTap Heatmaps

Click and Tap Heatmaps

Shows where visitors click their cursor on desktop devices and where visitors tap their finger on mobile and tablet devices.

Click and Tap Heatmaps

Move Heatmaps

Move Heatmaps

Only available on desktop devices – shows where visitors move their mouse on the screen. This gives a very good indication of where the visitor is looking on the page.

Move Heatmaps

Scroll Heatmaps

Scroll Heatmaps

Shows you to what position your visitors are scrolling on a page. Includes the exact % of visitors that see a specific vertical position.

Scroll Heatmaps

The Link Test

Are visitors clicking on dead ends?

clicktab

Problem: Visitors will often click and tap on elements in your pages that are not links.

Click and Tap Hotjar Heatmaps will reveal this behavior. Look for images, titles or graphical shapes that have a lot of click and tap activity. It's important to discover these opportunities since they are potential 'dead-ends' and can lead to visitors abandoning your site.

Heatmaps - The link Test

Solution: Link elements to the appropriate pages or content. To avoid distracting visitors with new pages consider an in-page modal window. A modal allows you to give more information while reducing visitor bounces.

The Distraction Test

Are irrelevant elements distracting visitors?

Move

Problem: Elements on your site pages will distract visitors if they are not important or relevant.

Its incredibly easy to distract your visitor from what they are looking for, and from reaching their goal, such as placing an order. You can spot this behavior in Hotjar Move Heatmaps when cursor activity is spread all over the page instead of focused on the pages' key messages and call to actions (such as buttons and links). On the other hand, high activity on very small areas of the page means that your visitors are not really interested in other content on the page.

Heatmaps - The Distraction Test

Solution: First and foremost, you want to test removing content that users are not engaging with at all. Start by setting up an open-ended Hotjar Feedback Poll on the page and ask your visitors "Quick question: What is missing on this page?'. Use your visitors' replies to create new content that will be a better use of this space. If activity is spread out equally over the page consider asking your visitors "If you decided not to signup today – what was it that stopped you?". This will reveal your visitors' objections. Consider a redesign of your page content, headline and CTA to address these objections.

The Information Test

Is there missing information from your page?

clicktabMove

Problem: Visitors are looking for information that is missing on your site pages.

You can detect this behavior on pages using Hotjar Heatmaps. Typical patterns are high density of moves, clicks or taps in a very small area or high % scrolling to the very end of your page (visitors reached the end of the page and are still looking) without any click or tap activity. Identifying and adding missing information will have a big impact on visitor engagement and goal conversion rates.

Heatmaps - The Distraction Test

Solution: Any content areas that are receiving a large amount of attention should be expanded to include more information. You can remove elements with low engagement levels to make space for your new content. In such cases, you should also use a specific question in an open-ended Hotjar Feedback Poll e.g. "What would you like to know about our money back guarantee? Is anything missing?". Use the replies to add new content to the area and create a new heatmap report to compare results.

The Device Test

Does your page work on different screen sizes?

clicktabMoveScroll

Problem: Your site pages look very different on devices with different screen sizes.

With the rise in popularity of extra large screens, netbooks, tablets and phones your site is experienced in different ways on different sized screens. Important content that is high on your page on a desktop could end up well below the fold on a phone. Equally, your page content could look sparse and unreadable on very large screens. Hotjar heatmap reports will easily reveal these differences across different browsers – as well as the difference in how your visitors use your pages differently on different screen sizes.

Heatmaps - The Device Test

Solution: Introduce responsive design so you can control what your page looks like across different screen sizes. Use your findings from Hotjar Heatmaps to tweak the responsive design for high engagement and clicks on your important content. Follow up on your changes with new heatmap reports to see the impact of your changes.

The Depth Test

Is all your content easily reachable?

ScrollMove

Problem: Your visitors are not reaching all the content on your page.

It is very common for your visitors not to realize there is additional content lower on your pages since this is not readily visible. In most cases, this is due to false bottoms. A false bottom is a line break or color block can make visitors think they have reached the end of the page. Too much white space close to the fold will also mislead your visitors into thinking that what they are seeing is the complete page. Your Hotjar Scroll Heatmaps will easily reveal this behavior.

Heatmaps - The Depth Test

Solution: If most users do not scroll beyond the fold you should remove any design elements that can lead to users thinking there is no more content. Consider adding anchor links to content lower on the page (especially content with high activity in move heatmaps). Another solution is to add a johnson box above the fold with a short bullet list of links to key content on the page – similar to a table of contents. You can also highlight content below the fold by using an arrow or visual aid.

The Engagement Test

What are your site visitors really looking for?

clicktabMoveScroll

Problem: Your visitors are not engaging with what you consider to be important or critical content on the page.

Low attention and engagement can be easily detected using the Hotjar Move and Click / Tap heatmaps.

Heatmaps - The Engagement Test

Solution: Use a Hotjar Feedback Poll to ask your visitors why they are visiting the page – "Quick question: Why have you visited us today? What are you looking for?". You can also ask them why they are not engaging – "What is missing on this page? How can we improve it?". Once you discover the visitors' intent and any objections you can change the content on the page and monitor changes in your visitors' engagement patterns by creating a new heatmap report. A good practice is to use words and phrases your visitors use in their replies on your polls. This approach will eliminate any misleading or confusing terminology you might be using.

The Fold Test

Does your page have what it takes to keep your visitors?

click tabMove Scroll

Problem: Within a matter of seconds of landing on your site, your visitors will decide to stay – or move off elsewhere. The first elements they see on the page will determine this behavior.

You have a very small time window with which to engage your visitors and communicate your key messages. Every Hotjar Heatmap will show you the average fold position for each device – giving you an instant view of the area within which you need to engage you visitors and convince them to stay.

Heatmaps - The Fold Test

Solution: Test moving up content that visitors engage with below the fold. Alternatively you can also add anchor links above the fold to the content sitting in lower parts of the page. Check your Hotjar Heatmaps to see if your visitors are engaging with your headlines i.e. do they move their cursor, click or tap within this area? Your headline is the most critical element above the fold. If you don't have a prominent headline – then add one. If you do and it's not being engaged with – test some new variations.

The Header Test

Is your page header helping or hurting your site?

clicktabMove

Problem: The header on your site pages can easily eat away a lot of vertical space and visitor attention on your pages.

Hotjar Click, Tap and Move heatmaps will reveal how much of your visitor's attention is being used for elements in your header e.g. navigation.

Heatmaps - The Header Test

Solution: If visitors are heavily engaging with navigation in your header this means they are not easily finding what they need on the page. Similarly, it can mean they are confused by the structure of your navigation. Consider setting up an open-ended Feedback Poll with a question such as "What's missing on this page?". Use this feedback to improve your page and monitor the change in activity in your Hotjar heatmaps. If the Hotjar Scroll Heatmap does not show scrolling on your page you should consider reducing the size of your header so you can move up more content above the fold. Resist the temptation to 'improve' your header navigation. Simplify it instead. Visitors are typically distracted and confused by complexity. Include critical content directly within the page itself.

Sign up for Hotjar and start gathering insights for your own site!
Sign Up for Hotjar