{"id":84039,"date":"2021-07-26T08:13:00","date_gmt":"2021-07-26T15:13:00","guid":{"rendered":"https:\/\/thegood.com\/?post_type=insights&p=84039"},"modified":"2021-08-09T12:15:31","modified_gmt":"2021-08-09T19:15:31","slug":"heatmaps-scrollmaps-clickmaps","status":"publish","type":"insights","link":"https:\/\/thegood.com\/insights\/heatmaps-scrollmaps-clickmaps\/","title":{"rendered":"Your Guide to Increasing Conversions with Heatmaps, Scroll Maps, and Click Maps"},"content":{"rendered":"\n

Conversions don\u2019t just happen.<\/p>\n\n\n\n

People look and read and click before buying.<\/p>\n\n\n\n

They need to shop or look around and build trust in who you are and what you have to offer.<\/p>\n\n\n\n

Low conversions, then, are a byproduct of all this other \u2018stuff\u2019 that leads up to the point of truth. To fix that problem, you often have to go back to the source and run through these same footsteps.<\/p>\n\n\n\n

It\u2019s not easy. But it\u2019s not impossible, either. Especially because your site visitors are already telling you what they want.<\/p>\n\n\n\n

They\u2019re leaving a \u2018digital paper trail\u2019 if you know where to look.<\/p>\n\n\n\n

The trick is using tools like heatmaps, scroll maps, and click maps to understand what they\u2019re telling you. Here\u2019s how to do it.<\/p>\n\n\n\nHeatmaps, scroll maps, and click maps help you understand what your visitors are telling you. <\/a><\/span>Share on X<\/a><\/span>\n\n\n\n

Heatmaps: How to Figure Out Where People are Paying Attention<\/h2>\n\n\n\n

People don\u2019t read online. They scan.<\/p>\n\n\n\n

This was confirmed by Nielsen years ago<\/a> during an eye-tracking study, where they literally tracked the points on a page that consumed the most attention.<\/p>\n\n\n\n

The infamous \u201cF\u201d-shaped pattern shows that people tend to start on the far left-hand side, slowly scanning to the right before dropping down back to the left to repeat. The end result is that some places on the page get the lion\u2019s share of attention, while others are almost ignored completely.<\/p>\n\n\n\n

\"heatmaps,
(image source<\/a>)<\/em><\/figcaption><\/figure><\/div>\n\n\n\n

The above example is a heatmap<\/strong><\/a>. It\u2019s showing you where attention and focus are centered. And it can be used to help you understand why some design element is either helping or hurting conversions ultimately.<\/p>\n\n\n\n

Here\u2019s a simple example.<\/p>\n\n\n\n

Visual cues are used online to help point out (literally, in some cases) something somebody should be looking at. An arrow is a perfect example. But even a person\u2019s eye-line sight can do it, too.<\/p>\n\n\n\n

For example, the use of the hero image as a visual cue helps increase focus on the important aspects of a landing page:<\/p>\n\n\n\n

\"heatmaps,
(Image Source<\/a>)<\/em><\/figcaption><\/figure><\/div>\n\n\n\n

When the baby is facing forward, the reader is distracted by the cute baby\u2019s face, rather than focusing on the title and important landing page text.<\/p>\n\n\n\n

BUT, when the baby is turned sideways, pointing a visual cue towards the title and text, we see a different result:<\/p>\n\n\n\n

\"heatmaps,
(Image Source<\/a>)<\/em><\/figcaption><\/figure><\/div>\n\n\n\n

The primary element on this landing page is explanatory text and the product logo next to the product. You want people to click it and purchase it.<\/p>\n\n\n\n

So calling extra attention to it, with even a basic image change, can work wonders for focusing attention.<\/p>\n\n\n\n

Sounds easy enough, right?<\/p>\n\n\n\n

Except if you don\u2019t do it right, your design can actually backfire; sabotaging the very goal that you\u2019re trying to accomplish.<\/p>\n\n\n\n

For example, in that first image, their design focus and image choice portrayed the wrong visual cues, leading users to become distracted and skim past the important information priming them to convert.<\/p>\n\n\n\n

Without the use of heat maps in this example, the company would be losing out on invaluable CRO data.<\/p>\n\n\n\n

This is a simplified example, but the point remains.<\/p>\n\n\n\n

Now that you know how heatmaps work, where can you run one for your site? <\/h3>\n\n\n\n

Hotjar<\/a> is one of the most accessible tools out there, Hotjar helps you see what visitors see (via heatmaps), record real visitor behavior on your site, and survey visitors based on what they do.<\/p>\n\n\n\n

Harnessing the power of AI for quick and accurate data, VisualEyes<\/a> is a powerful tool that simulates eye-tracking studies and preference tests. You receive in-depth insights in just a few seconds. If you\u2019re interested in learning more, check out the video below all about interpreting Attention Maps from VisualEyes.<\/p>\n\n\n\n

\n