{"id":8565,"date":"2020-08-12T08:21:13","date_gmt":"2020-08-12T14:21:13","guid":{"rendered":"https:\/\/www.topspot.com\/blog\/?p=8565"},"modified":"2021-04-15T12:18:29","modified_gmt":"2021-04-15T18:18:29","slug":"understanding-and-using-heatmaps","status":"publish","type":"post","link":"https:\/\/www.topspot.com\/blog\/2020\/08\/understanding-and-using-heatmaps\/","title":{"rendered":"What Heatmaps Can Tell You About Your Website and Its Users"},"content":{"rendered":"\n

Imagine what you could learn about your website if you could see how your users were moving their mouse, clicking on buttons, or scrolling through your website. Thanks to the data found in heat maps, you can view those behaviors and more. In fact, when viewing heatmap analytics, you can determine if and where users are getting stuck throughout a tracked landing page, whether visitors are utilizing your website’s navigation as intended, the content they are finding most useful, and other opportunities for improvement.<\/p>\n\n\n\n

Since we began using heatmaps several years ago<\/a>, it’s become a staple of our data analysis. In this blog post, we outline the different types of heatmaps and how our Conversion Optimization<\/a> and SEO Specialists<\/a> use them to make websites more user friendly and optimized.<\/p>\n\n\n\n

What Are Heatmaps? <\/h3>\n\n\n\n

When a heatmapping tool<\/a>, such as HotJar, is applied to a webpage, it will demonstrate the way users are interacting with the page itself. There are a few types of heatmaps and each one can provide you with a lot of information about what your visitors are doing when they land on that page. <\/p>\n\n\n\n

Click Heatmaps<\/h4>\n\n\n\n
\"example<\/a><\/figure><\/div>\n\n\n\n

The \u201cClicks\u201d heatmap shows which areas on the webpage are being clicked on the most by users. <\/p>\n\n\n\n

This view is one of the most useful as it shows the user\u2019s interaction with your website. It can tell you whether the on-page elements are being interpreted correctly and how your website users are interacting with those individual elements. The more the colors are in the red and yellow range, the higher the number of clicks that element is receiving.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Movement Heatmaps<\/h4>\n\n\n\n
\"example<\/a><\/figure><\/div>\n\n\n\n

The movement view is used to see what items are being hovered over the most and the direction a user’s mouse is going on a page. <\/p>\n\n\n\n

The areas where users tend to hover over the most will be bright red. Even though a user might not be clicking or taking any actions on the page, by hovering over certain areas, you can see what parts of the page your users are deeming as most important. <\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n

Scroll Heatmaps<\/h4>\n\n\n\n
\"example<\/a><\/figure><\/div>\n\n\n\n

The scroll heatmap view shows how far users are scrolling down while viewing your landing page. <\/p>\n\n\n\n

This view will help you understand how far down a landing page your users will typically read. In the example, you will see the entire page as a heatmap with 100%, 75%, 50% and 25% markings for each section starting with red, then yellow, and so on. This is helpful to determine if important content is being missed because it is too low on the page.<\/p>\n\n\n\n

<\/div>\n\n\n\n