Loading Jaywing website
21 November 2018 / Opinion

Heat maps: why and when should you use them?

Gintare Gervyte

The whole purpose of a website is allowing visitors to fulfill specific goals such as find information, sign up for a service or buy a product. So, to create an effective website that helps you to generate leads and conversions, it’s important to understand exactly how visitors interact with your site.

What do they find the most interesting? What makes them stay? What pushes them to leave? When visitors land on your website but struggle to find or use what they’re looking for, they get frustrated by the experience and, in the worst-case scenario, they leave your website and never come back!

Heat maps are an extremely useful tool for visualising how your website visitors interact with and use your site. Heat maps aggregate user data showing red for the elements that visitors use the most and blue for the areas they don’t look at or interact with the least .

This visual representation of how visitors interact with your website is extremely useful in identifying trends and optimising your website pages for further engagement.

How can heat maps help to improve your website?

Analysing the heat maps placed around your website allows you to determine if visitors are:

  • Reading valuable content or failing to see it
  • Finding and using a page’s main links, buttons or CTAs
  • Paying attention to the most important elements
  • Getting distracted by non-clickable elements
  • Reaching all of the content easily
  • Experiencing issues across devices

In addition to identifying how visitors interact with a website page and any sticking points that may be preventing them from taking action, heat maps are also useful on a wider business scale, allowing you to:

  • Provide your stakeholders with a visual analysis of your website pages, helping them to gain a clear understanding of what’s happening without needing to crunch numbers
  • Make informed, data-based decisions when it comes to testing, updating or redesigning your website
  • Measure improvements to your site based on changes you have made from analysis of previous heat maps
  • Provide proof to team members and stakeholders around what’s happening and get them on board more easily when changes are needed - it’s hard to argue with a heat map!

By tracking user activity and analysing their behaviour whilst they’re on your website, heat maps allow you to effectively identify any issues with your website and determine how effectively important elements are positioned on your website.

Where are heat maps most useful?

It is usually recommended that you study heat map records for the most important pages on your website in terms of revenue and traffic and for any pages you feel might have usability issues. Whilst it’s true that many heat maps reveal elements that are predictable, this is not why you should use them. It’s important to ignore the predictable elements of heat mapping and focus on the anomalies to gain the most value.

If you’re wondering where to begin with heat maps, here are a few places you could start with setting them up:

Homepage and landing pages

Both your homepage and any landing page you have set up act as the main entry points into your website. It is these pages that are responsible for forming your visitors’ first impressions of your brand and website and for their decision to continue browsing or abandon your website completely.

A heat map on these pages will help to determine how much information is seen or interacted with by your visitors and which elements are being clicked on or completely ignored.

Top-performing pages

Top-performing pages such as your most viewed product page or most commented on blog post are obviously doing something right and a heatmap is a great way to understand which elements are working well so that you can replicate its success elsewhere.

Under-performing pages

Under-performing pages are just as insightful as your top pages for offering insight into your visitors website usage. If these pages are not performing well, it’s likely that there is something that’s just not working so placing a heat map on these pages can help you to understand what your visitors are looking at or interacting with so that you can take action.

New pages

The newest pages of your website don’t have a lot of data so, if you have recently added a new page, a heat map might be a good way to get some initial information about how the page is performing and what changes are likely to improve it.

Case study: Using Hotjar to increase Time4Sleep’s mobile conversion rate by 63%

At Epiphany, we used Hotjar as our heat mapping tool to improve the website of our client, Time4Sleep, an online retailer of beds and bedroom furniture with more than 200,000 sessions/month and a large mobile audience.

Our main objectives were to:

  • Improve overall conversion rate
  • Improve mobile conversion rate
  • Increase the number of visitors who reached product pages
  • Increase the number of visitors who reached the basket

Our team undertook an intense research period during which we used heat maps in combination with other Hotjar tools such as Recordings and Polls, along with Google Analytics.

Combining data from these sources, we were able to paint a complete picture of how people interacted with the website to formulate a specific diagnosis: the existing category pages were not helping visitors to find what they needed and a new page structure was required.

Here’s an example of a heat map used on Time4Sleep’s website:

Time4Sleep Hotjar Heat Map

We found that visitors were scrolling deep down the page but not because they were enjoying the content! Visitors were scrolling because they could not find what they were looking for.

The heat maps we used confirms finding from other data sources so our team reorganised the page with a new filtering system at the top. After this change was made, far fewer people scrolled to the bottom of the page because they were able to find what they needed very quickly at the top of the page.

This, combined with other changes involving separate SEO, CRO, design, content and PR teams, Epiphany tested different versions of the page and achieved:

  • +19.7% increase in conversion rate
  • +63% increase in mobile conversion rate
  • +36% more users reaching the cart
  • +124% more users reaching the informational content (e.g. bed size guides, children bed guides)

Our work with Time4Sleep is a great example of just how powerful heat maps can be when used in combination with other behaviour and feedback tools.

When used in isolation, heat maps are a great way to understand what is happening on your website, allowing you to make quick changes or fix issues.

However, for extra detail and an in-depth understanding of why things are happening, multiple data sources are much more effective.