User interface design is an ongoing process. There is no such thing as a “perfect” interface—and if there were, 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 were, 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.
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:
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?
UI optimization: Move essential elements above the average fold and remove possible distractions or confusing elements that discourage users from scrolling further. Consider creating multiple, shorter pages.
3. Identify false clicks
Heatmap type: Click heatmap
What to look for: Which non-links are users consistently clicking? Are users clicking on images or elements that look like buttons?
“Generating a nice, colorful heatmap might seem fun (and it is), but there’s more weight behind this data than just a pretty image.”
UI optimization: Create links to direct users correctly; modify unimportant elements to make them less clickable.
4. Spot distracted users
Heatmap type: Move heatmap
What to look for: Are users moving around the page randomly—indicated by lots of small patches of disconnected ‘low-temp heat’ and lots of dots around the page—with little to no ‘hot’ areas?
UI optimization: Reduce or redesign attention-grabbing elements to give users a clear focus on each page. Create linear visual flows (e.g. top left to bottom right) to complement your visitors’ natural reading style.
5. Compare device behavior
Heatmap type: Click and scroll heatmaps
What to look for: When you compare device-specific heatmaps (mobile vs. desktop), are mobile users missing important elements? Are desktop users behaving differently?
UI optimization: Use the data to optimize different designs and interfaces on desktop and mobile so the cross-device experience is consistent.
(Need more ideas? Here are 8 more heatmap tests for better UI.)
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
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.
Simple website feedback polls or surveys on the page let you ask users straightforward questions like:
- Did you find what you needed today?
- What’s stopping you from continuing?
- What’s missing on this page?
- If you could change just one thing on this page, what would it be?
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.
Want to read more on heatmaps?
by Fio Dossetto
An ex-academic turned editor, Fio manages editorial production for the Hotjar blog where she also writes about UX, optimization, and what work looks like in a remote-only company.
