Ok, first things first:

What is a heat map?

Trademarked by Cormac Kinney back in the 90s, heat maps were designed for visualising financial market data. In this context, a heat map tracks users’ movements through a website, helping us understand where their attention is focused. Ideally, you need a decent sample size for the results to have real meaning; the more users you track, the more trustworthy the data.

old skool heat map

via wikipedia.com

There are different kinds of heat map, and each has its merits:

The Hover Map

A hover map is based off of the same principals as eye-tracking, where a sample of users is selected to have their eye movements recorded to determine where they are looking on a given web page. Sounds expensive, right? Well, mouse tracking is the cheaper alternative where users’ mouse movements are recorded, which indicates where they are looking, and so reveals how they are engaging with a web page.

Of course, this won’t account for users looking at web page elements without hovering over them, or they may hover over something while looking at something else. There’s evidence to show that, on average, there are just 90 pixels between the cursor and where the user is looking (which is about the width of a twenty pence piece); but on the other hand, Google’s research data highlights only 6% of people showed some vertical correlation between mouse movement and eye tracking.

Mouse Tracking Heat Map

via mazeberry.com

Due to this potential inaccuracy, we risk making assumptions when referring to hover map data, and misinterpreting data can lead to reporting misleading findings. A large sample size will help counteract, but not solve this issue.

Are algorithm generated heat maps the answer?

If accuracy is your main concern… probably not. These are created using an algorithm to analyse the colour, contrast, and size of different web page elements to visualise where users may focus their attention.

algorithm generated heat map

via feng-GUI.com

Worth considering if you’ve not got the budget for eye-tracking, or if you’ve not got a lot of site visitors, but these are based on what a machine thinks your users are looking at, not what they’re actually looking at.

The Click Map

Now we’re talking. Click maps show where abouts your users have clicked on a webpage (like links, buttons, images, text, anything!) and, just as importantly, where they have not. All clicks are aggregated and the resulting heat map overlay will reveal the hotspots (where users are mostly clicking).

Click Heat Map

blog.cloudflare.com

So these are actual interactions, from actual people, which means they’re far more indicative of user behaviour/intention. If you’ve got a cool graphic on your page that users keep clicking despite it having no other purpose than aesthetics (as in, it’s eye catching, but it’s not a link) then reconsider its prominence, or give it a worthwhile function.

Similarly, if you’ve got a link that users aren’t clicking, you can start questioning why: Does it need to be more prominent? Are there too many distractions around it? That sort of thing.

The Scroll Map

The clue’s in the name here, but scroll maps reveal how far the visitors to your site are scrolling down a given page. They’re useful on any page with a fold, but are especially insightful on longer pages – you’d assume that the longer the page is, the fewer people make it aaallllll the way to the bottom.

Scroll Heat Map

via softway.com

Although we know that users are happy to scroll, it makes sense to move your important content to toward the top of the page, prioritising it in line with how the colours on the scroll map fade into one another. If you’ve got very distinct colour-changes, rather than the fade, this indicates a sharp drop-off from  a certain area on the page. If you’re worried about people missing your content, you can add anchors and other forms of navigation where these drop-off points occur.

Getting warmer with Heat Maps

I like to think of heat maps as an icebreaker (was that a pun?) in terms of conversion rate optimisation. They can help identify problems, and offer visual cues where a list of urls and numbers may be a little daunting in a report. Much more user-friendly if you’re building a case for CRO!

It’s all too easy to misinterpret the results of a heat map, especially the mouse-tracking kind, and, really, they often present more questions than they do answers. Heat maps show the what but not the why – and that’s why you need to be using other methods of research, and kick off some user testing.


Also published on Medium.