Leverage website heat mapping to optimize your designs

Profile picture of Michael J. Fordham

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Website heat maps use color to visualize user activity on a site, serving as a valuable tool in analyzing its performance.

5 min read

A graphic illustration showing three website browsers with differently colored circles representing website heat maps and user engagement

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

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.


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.



Four types of website heat maps: Click maps, scroll maps, mouse maps and eye tracking maps


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.



A website heat map