In an ideal world, your web design projects would be perfectly optimized from their inception and your conversion rate would be huge. However, we live in a world of incremental tweaks and iterations, and slowly improve our designs over time. In order to achieve optimal results, we need to know where our design is not performing as well as it could be. (Read more on good website design here.)

Website heat mapping can provide a valuable insight into what your visitors are doing, what they’re most interested in, and where they might be facing a problem.

What is a website heat map?

A website heat map is a data visualization tool, showing how visitors of your site interact with it. The heat maps display areas of user interactivity via color - typically the popular areas will be red and less interesting spots will be blue. The various colors convey differences in user interaction or attention.

Website heat maps are useful in illustrating how people are using your site or product, and can highlight certain trends or areas for improvement very quickly.

Types of website heat maps

There are different types of heat maps:

• Click maps which show you where users are clicking and tapping on your page.
  

• Scroll maps which help you understand how far down your users are navigating your webpages.
  

• Mouse map or hover maps show you what your visitors are doing on your site, and which sections they are particularly interested in.
  

• Eye tracking maps visualize where your visitors are looking on your webpage.

Different heat maps serve different purposes. For example, a scroll map may be useful for long web pages such as landing pages in understanding why sign-ups are low when the contact form is at the bottom of the page. The scroll map may show us that our visitors are spending more time in the section above the fold compared to anywhere else on the page.

In contrast, a click map may help highlight where users are struggling to use your site. For example: imagine you had a list of pricing plans. Your users want to sign up, so they’re clicking the plans - but the plans aren’t clickable. When users repeatedly click and nothing happens, they leave the page frustrated. If you could spot this pattern, then you could make the plans clickable or add buttons for users to easily select a plan.

Website heat maps are useful in illustrating how people are using your site or product, and can highlight certain trends or areas for improvement very quickly.

Which heat map to choose, and how

Different types of heat maps help you analyze a variety of behaviors and interactions, from user clicking and scrolling, to where users’ cursors are navigating on page, to their eye movements.

In order to properly use website heat mapping, we need to define our goals for the research. For example, if we were running an eCommerce website we could have these goals:

1. Improve the efficiency of the checkout process.

2. Increase the number of add-ons added to a purchase.

For goal #1, we could set up a hover map to review where people are spending the most time during checkout, and where they might be getting confused and idling for a while. We could then take those insights to iterate on the checkout (for example, getting rid of an annoying popup or making the CTA clearer).

For goal #2, we might decide to use a click map or an eye tracking map.

If we use a click map, we could analyze where our customers are clicking during checkout. We might find that they’re clicking pictures of the additional add-ons but are missing a small text link to add them to the basket. We could trial creating the whole thing clickable or a more prominent CTA, and run another click map to see if our ideas worked.

If we went down the route of an eye tracking map, we would look for slightly different issues. We could try to find areas of the checkout which are visually distracting, taking the customer’s gaze away from the add-ons. This might be a brightly colored banner which we could remove, for example. Additionally, we could analyze the path of the customer’s vision and place the add-ons in that path to attempt to make the desired action more visible.

Of course, any iterations we make to the design should be tested to ensure we don’t hamper the design further or negatively impact another important metric.

We could run A/B website heat mapping tests to monitor the impact of the newly iterated design. We’d keep our original design live for a percentage of users, and put our new design live for another group. We could then observe the differences in how they interact with our site and review whether the changes we made helped us reach our goals, or if we need to do another iteration to effectively solve the problems.

[Related: How to adapt to a cookie-free future]

How to set up website heat mapping for your project

Now you have an idea of why you’re using heat maps and understand the difference between the varieties on offer, you can now look into setting some up for your project.

Luckily, there are a number of great website heat mapping tools available. Here are some recommended tools:

• CrazyEgg offers a selection of heat maps for you to choose from, with integrations into many website builder tools and the option for A/B split testing.
  

• Hotjar is one of the most popular user research tools. They have a great list of integrations and offer many different types of heat maps (including scroll maps, click maps and hover maps). On top of that, they have some nice supporting functionality like user feedback and survey widgets you can overlay on your website in a few clicks.

Most of the online tools available allow you to directly integrate without really having to worry about code. Just link them up to the specific pages you want to target, and watch the results stream in as visitors browse your website.

As you check back periodically, insights will begin to appear, showing you how your visitors are interacting with your site and where you could improve. In some tools you are also able to set up zones on your site results to automatically group desired areas of interaction, and the tools will show you a comparison of desired versus erroneous behavior.

Heat mapping your design files

Just as heat mapping can do wonders for live websites, you can get heat maps on your design mockups too. Tools like UsabilityHub and Maze allow you to export your artboards or prototypes and get feedback on them before a line of code is written.

This can speed up your workflow and mean less re-work is needed once designs are implemented on your live site. It also allows you to test multiple concepts early on in your ideation phase to find the best performing version to progress with.