How to use Heatmaps to Improve the UX of Your Website

heatmap helps track user activity on a web page using a contour map indicating the most and least frequently visited places on the page as determined by the position of the mouse pointer.

There are more sophisticated analysis tools that can also determine where the eye is drawn to on the page, though this tends to be used for different purposes. Both types of technique can highlight important issues for usability on a website.

Two other variations on heatmaps which can also provide useful data are confetti maps and scroll maps; both use similar information gathering techniques as the standard heatmap but confetti maps show the actual positions of clicks rather than the general dispersal. This can be useful in seeing where (and perhaps why) users are clicking in certain places and – importantly – when they are repeatedly clicking places that have no useful purpose. Scrollmaps show the same basic information as heatmaps but in relation to how far down a page the user has scrolled. This can be useful in determining how far down you can place important material and still have it seen.

Heatmap tests are relatively easy to conduct and interpret. The findings are presented as a colour spectrum across the page with the warmer areas (denoted by red, orange, yellow) showing where the predominance of clicking is taking place and the cooler areas (blue/green) indicating lower traffic areas for mouse clicks. There is simple software you can buy and install to do the tracking for you and produce the maps in interpretable form.

So what useful insights relating to website usability can heatmaps provide?

Firstly, it is always useful to know where on the page your users are clicking as this gives some indication as to what is working and what isn’t on the site. It can be especially helpful where an element (say a ‘buy here’ button) isn’t attracting the clicks it might. You can see whether other features on the page are, perhaps, fighting for attention and distracting users from their objective or simply confusing the issue for them.

Second, heatmapping can help in the layout and construction of pages, showing areas of higher traffic and interest and highlighting areas and elements that don’t appear to attract as much attention. Confetti heatmapping can help with more specific issues such as users clicking in areas where they are not supposed to or being confused by other elements or devices. Similarly scroll heatmapping can identify exactly how far users are scrolling so can help with positioning of Call to Action (CTA) elements or ‘buy now’/’go to checkout’ buttons.

Heatmapping can also differentiate between the behaviours of different market segments eg male v female, old v young, English v non-English speakers. You might find that different elements are more appealing to specific parts of your population – eg women might be more attracted by imagery but men by money or offers. Heat mapping can give you a good idea of which aspects of your site are attractive and doing their job and which are not; and it can suggest positions or devices to improve the laggards.

Heatmapping can be a very revealing technique for assessing site effectiveness. If you would like to know more about the process , why not ring us on +44(0)800 024624 or email us at