Blog

Heatmaps are a powerful tool that we can use to analyse and understand what users do when they visit your site. Where do they click? How far do they scroll? What do they look at, and what do they ignore? Why is this important, you may ask? Well, we’re about to tell you.

Who uses heatmaps?

Long story short, we do. Heat maps are used by designers, UX specialists and marketers to identify the best and worst-performing sections of your web pages. With this information, we can optimise subpar webpages, identify optimal page lengths, discover segment-wise behavioural patterns, user experiences breakages and find solutions through specific data points highlighted in the generated map.

A heatmap is a two-dimensional graphical or visual representation of data that uses a system of colour that represent various values.

The concept of heat maps is thought to have originated in the 19th century, where manual grey-scale shading was used to depict data patterns in matrices and tables. During this period, different shades of gray were used to indicate values. As depicted in the example below, darker spots depicted heavily populated areas of Paris with light grey/white represented the less densely populated areas.

The term heatmap was first trademarked in the 1990s, when software engineer Cormac Kinney created a tool to graphical display real-time financial market information.

What is a website Heat Map

Website heat maps visualise engagement and the most popular (hot and unpopular (cold) elements of a website using the scale from cold to blue.

Reading heatmaps

Today heatmaps are used in many fields like biology, geology, aviation, or, you guessed it, e-commerce. Heatmaps used on websites (and other areas for that matter) will show you how much engagement there is within different elements or sections of the website. Heat maps allow us to understand at a glance how people interact with your site and helps us identify trends and optimise for further engagement.

Main types of heatmaps

Heat maps is really an umbrella term for different heatmapping tools. There are a few types of heat maps out there. However, here at Blend, we see ourselves leaning towards our three preferred types that show us the most useful information and allow us to investigate specific aspects of your website performance.

Click map

This type of map shows us where users click and how many clicks there are on the page. The more clicks in the area the more red we see there. Further down, we see more blue in the areas where there are no or very few clicks.

Scroll map

In this example, our map measures how far people scroll. It gives us information on what percentage of users reached a certain height of the page.

The red colour means that majority(~100%) of users have reached this section. As we keep going along the gradient we will associate the colour shift with people that cease to scroll. In the example we will see that yellow means 75% of visitors reach that part of the page. Going down we will encounter the 50% mark and if we decided to go deeper we would find lower numbers meaning fewer users continued to scroll all the way down to the end of the page.

Move map

The move map, not to be confused with the similar-looking click map, shows us the movement of the cursor, but without the clicks. Those maps indicate where users cursors end up the most and mark those spots with red. Just like in other examples - blue/black spots are the opposite and indicate a smaller cursor presence.

It is worth noting that this type of map doesn’t apply to mobile/ touchscreen devices as they don’t have cursors.

Taking advantage of heatmaps

Heatmaps are a great representation of what your website really is and how your customers use it. Analysing them can open a lot of opportunities for improvement that one wouldn’t ever think of!

Opportunities

By analysing heatmaps we can gain insights into how users interact with the page. This process can lead to improved site design with lower bounce rates, fewer drop-offs, more views and better conversion.

How we analyse our heatmaps?

Analysing heat maps is a skill that can be learnt just like any other. Whether it is juggling or remembering to unmute yourself when you start speaking during a zoom meeting - analysing heatmaps may seem difficult at first, but comes easily with time and practice.

When we analyse Heatmaps, we take four criteria into account.

• Scrolling- By looking at the scroll map, we can estimate which parts of the page are being accessed. For example, when the colour shift is sudden, many customers are lost and don’t realise there is more content.
• Clicks - By looking at the click map, we can see where exactly our viewers click. For example, we can find that people click on an unclickable element and bounce out of frustration.
• Distractions - By looking at the move map we can track if the cursor hovers over high-value elements. In most cases - the cursor is an onscreen representation of where people are looking. If they scatter across the page, it might be challenging to scan, too busy, making it difficult for users to focus on the primary action.
• Device-specific issues - By looking at the scroll maps for mobile and desktop, we can compare how much information is being consumed on those devices. If we notice a significant change, that may be a sign to review the worse performing page by changing the layout, size, proximity between elements, etc. We can increase the effectiveness of our actions by combining heatmaps findings with tools or techniques like Google Analytics, A/B testing or session recordings.

Who are heatmaps for?

Everyone. Any website can benefit from installing and analysing heatmaps whether it’s an e-commerce store, social media, simple informative page or any other digital application.

Here at Blend Commerce we install Hotjar on our client’s websites and combine our findings with years of experience in order to design and build stores that delight and convert.