Using heat maps to improve your website’s UX: 5 ways to get started

Table of contents

• What is a heat map?

• 5 ways to use heat maps to evaluate UX

• Using heat maps with other UX tools

• How to get started with heat maps

What is a heat map?

A heat map is a data visualization that shows how website users click, scroll, and move on the page. The ‘heat’ part of the name comes from the color scale: red depicts popular (hot) areas of the page, and blue less popular (cold) areas.

You can collect heat map data on any website page on desktop and mobile devices, and visualize it in different ways:

• Click maps – highlight where users click the mouse (or tap on mobile devices)

• Scroll maps – highlight where users scroll on a page

• Move maps - highlight user mouse movement (without clicking)

Not sure what a heat map looks like? Here’s a real example of a live heatmap that’s collecting data on Hotjar’s heatmap guide. Toggle between the click, move, and scroll heat maps to see the different insights you can get from each.

5 ways to use heat maps to evaluate UX

If a picture is worth a thousand words, then a heat map is worth a thousand insights. A thousand-insight list might be a little too long for this article (!), so here are five key ways you can use heat maps to collect UX data to validate your ideas and spot optimization opportunities to get you started.

1. Showcase your best-performing designs

Your web pages may look stunning on their own, but heat maps let you demonstrate to clients and colleagues how well they actually perform.

Heat maps are super easy to understand at a glance and can help you explain your work to non-designers, allowing you to get important buy-in for website redesign proposals or showcase your successful projects.

2. Find CTAs with the most (and least) clicks

CTAs (calls-to-action) are prompts for user action—usually buttons or links—and can be specifically designed to attract clicks to increase sign-ups or sales.

Click maps show which CTAs have the most clicks, and which are getting ignored. You may find elements that are distracting users from seeing your main CTA, or identify an opportunity to test a new CTA in an area that’s attracting more user engagement.

3. Measure how far users scroll

Not every user who lands on your website scrolls down to the bottom of each page, which means they might be missing important information. People also visit your site from many different devices and browsers, so they are not all getting to see the same information above-the-fold (the part of page visible immediately without scrolling).

Scroll map tools can show you where the average fold is on mobile and desktop, so you can place essential information and CTAs where they get seen the most. You can also learn how far down the page users scroll, and move elements up the page to get them seen by more people.

Remember, you don’t have to look at scroll data on its own; compare your click maps and scroll maps to get a fuller picture of where you’re losing user attention.

4. Spot problem clicks

Sometimes users click on elements (e.g., images or headings) they expect to be links. These can be mis-clicks, but heat maps will collect data from enough users to disregard anomalies and show you common click patterns across your audience.

By looking at a click heat map, you can spot incorrect clicks and fix the issue by adding links there or modifying unimportant elements to make them less clickable.

You may even find website bugs or design errors that are frustrating your users.

5. Optimize for mobile and desktop

Responsive web design (pages that adapt to the user’s screen) is a fast and efficient way of delivering content to all of your users, but you need to remember that what looks like a few lines on desktop can require a lot of scrolling on mobile devices.

Compare mobile and desktop heat maps to see if mobile users are missing important CTAs or spot any differences in behavior. You may need to design different interfaces for mobile and desktop to ensure good UX across all devices.

Using heat maps with other UX tools

Heat map data looks impressive and will give you plenty of insight on its own, but you’ll get more out of it by combining it with other analytics, feedback, and UX design tools. Let me show you four examples:

1. Heat maps + traditional analytics

Traditional analytics tools (like Google Analytics) give you lots of quantitative data points like page views, traffic sources, and bounce rates, but they can't explain why, or even how they happen.

By combining traditional analytics with heatmap analytics, you can remove some of the guesswork and find out why your metrics occur. Got a page with lots of traffic that doesn’t convert? Then set up a heat map and start seeing what’s making people leave.

And here is a pro tip: it doesn’t end here!

2. Heat maps + session replay

Session replay is a rendering of a user browsing session that lets you watch the actions of a single (anonymized) user across multiple pages.

While heat maps help you visualize data from all your users at once, replays are created for each individual user. Instead of making assumptions about the clicking and scrolling you see on a heat map, try viewing some session replays to see how real people actually interact with the page.

3. Heat maps + on-page feedback

Quantitative (numerical data) is hugely important for making data-based UX decisions, but don’t overlook the value of qualitative (non-numerical) data.

After you've used heat maps to reveal design issues on specific site pages, ask your users for UX feedback on each page and learn why they think is missing or you should change to help them reach their goals.

Website feedback doesn’t need to be disruptive to users; a simple, non-intrusive one-question poll might be all you need to kick-start some UX improvements that you hadn’t thought about.

4. Heat maps + A/B testing

Heat map data and A/B testing go hand-in-hand: you can use heat map data to craft a test hypothesis, and you can run heat maps on A/B test variations to gather useful data about why a page variation is successful (or not).

For example, UX designers at banner design company Bannersnack use heat maps on key landing pages to gather evidence of how people interact with them. Based on the data, the team creates an alternative design and A/B tests the old and new versions; in one test, Bannersnack increased sign-ups by 25% by combining heat maps insight with A/B testing.

How to get started with heat maps

A website heat map tool like Hotjar is really easy to use by simply adding tracking script. You can set up a heat map in just a couple of minutes and data will start being collected every time a user visits your website.

Whether you use heat maps to showcase your work, increase conversions or get ideas for new tests, the invaluable insight you’ll get from these rainbow-colored graphics will likely give your UX approach the shake-up it needs to take your work to the next level.