Understanding heatmaps for better UI design

Understanding heatmaps for better UI design

User interface design is an ongoing process. There is no such thing as a ‘perfect’ interface—and if there was, you can’t get away with designing it and never looking at it again. You need data to understand what works and doesn’t, and what changes you need to make.

Enter heatmaps, the visual way to understand how people interact with your pages and interfaces, so you can design and redesign more effective versions of them.

In this piece, you’ll learn why and how to use heatmaps to optimize UI designs, and how to get further insight by combining heatmaps with other user behavior and feedback tools.

But first:

What is a heatmap?

A heatmap is a graphical representation of data that helps teams visualize user engagement and site interaction at scale. With software, heatmaps are generated when users interact with a website or app by using a mouse or tapping a touchscreen.

You’ve probably seen a heatmap before; popular areas are highlighted in red and unpopular areas are in blue, like this:

Types of heatmaps

There are three main types of heatmap that UI designers can use to gain insight:

Click heatmaps show where users click or tap

Move heatmaps show where users move the mouse cursor

Scroll heatmaps show how far users scroll down a page

See it in action: Here’s a very meta example of a live heatmap, with data collected from a heatmap guide I wrote over at Hotjar’s blog. You can toggle to view the different Click, Move, and Scroll heatmaps, and also play around to see differences by device.

A powerful part of your UI toolkit

If you’re in the business of designing, building, and/or maintaining interfaces, you’ll want to have some data on how people interact with them. Heatmaps are a valuable part of your UI toolkit.

There is no such thing as a ‘perfect’ interface—and if there was, you can’t get away with designing it and never looking at it again.

You may already be aware of the benefits of designing with eye-tracking (a measurement of user gaze when interacting with a UI) in mind, but heatmaps provide a cheaper and easier alternative to collecting eye-tracking data.

A major benefit of move heatmaps is that they give a good estimate of where users are looking when navigating your interfaces: a study conducted by Google demonstrated eye-mouse correlation, and research from Microsoft found the average distance between gaze and mouse location is only 90 pixels.

Additionally, movement data can be combined with scroll and click heatmaps for an even more comprehensive insight into how users are experiencing an interface or design.

A scroll map (left) and click map (right) of the same landing page

How do heatmaps improve UI design?

When heatmaps are implemented on websites and apps they let you collect data on an entire page or screen; the design elements they help you test, iterate, and improve on include:

Buttons: Placement and style

Navigation: Menus, breadcrumbs, links

Images: Placement, size, links, type

Text: Formatting, length, placement

Overall layout: Information hierarchy

A heatmap will help you find redesign ideas and identify underperforming design elements to eliminate from your next wireframe. Furthermore, you can collect this data without interrupting the user journey; unlike on-page surveys or pop-ups, heatmaps work silently in the background with no disruption of the user experience.

Understand the benefits of your design

As a visual tool, heatmaps have an added benefit: they’re really easy to show off to non-designers.

Whenever you need to get buy-in for a redesign or talk to non-designers about potential improvements, having a heatmap to visually display data will help back up your proposals and show the effectiveness of your designs to people across teams.

As a visual tool, heatmaps have an added benefit: they’re really easy to show off to non-designers.

It’s hard to argue with heatmap data!

5 heatmap use cases for UI design

Generating a nice, colorful heatmap might seem fun (and it is), but there’s more weight behind this data than just a pretty image. Take this list of 5 use cases as a starting point for your first heatmap experiments.

1. Understand if your main CTA gets the most clicks

Heatmap type: Click heatmap

What to look for: Is your main CTA getting the most clicks? If not, what’s getting clicked instead—and potentially distracting users?

UI optimization: An obvious action would be to move your CTA to where your users naturally click most, but you may also want to put on your detective hat and investigate this further: is your CTA the thing your users are actually looking for?

2. Find out how far users scroll

Heatmap type: Scroll heatmap

What to look for: Where do users stop scrolling down the page? Is there important information located below that point? Are there false bottoms where you see multiple users stop scrolling?

Combining heatmap data for deeper insight

On their own, heatmaps provide plenty of value, but there is so much more you can do with them in combination with other data sources. I’ll give you two examples:

1. Heatmaps and session recordings

Session recordings (or session replay, or visitor recordings) grab the exact mouse movements of individual users and are the next-best-thing to watching people navigate a design in person.

Heatmaps are aggregated to represent the average user, but session recordings let you zoom in on individual experiences—so if you’ve spotted something interesting or unusual on a heatmap, you could just sit back and watch a couple of recordings to see where exactly people stumbled.

2. Heatmaps + website feedback

Website feedback keeps users engaged.

Once you’ve spotted a design issue with a heatmap, collecting qualitative feedback helps you dig down into the why behind it. It’s one thing to see that a lot of people fail to progress down the page through a scroll map, and quite another to read their (angry) explanation of what’s not working for them.

In the world of UI design, trends change, user needs evolve, and what worked yesterday may be broken tomorrow, but one thing will always stay the same: knowing more about the people you design for is the key to refining and optimizing your work.Heatmaps are a great way to keep delivering powerful experiences through better UI design.