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

The clue is in the name: UX (user experience) is all about your users. So it makes sense that the more user-focused you are when collecting website data, the better equipped you’ll be to make optimizations that serve your users’ needs.

You probably already have some clues about user behavior from traditional UX analytics data (e.g. bounce rate, page views, conversions). But how do you know what to fix first when you spot a problem? And where do you start when you’re looking to increase conversions?

If you’re a UX designer, developer, or marketer working to enhance the user experience, heatmaps can help you collect data on how people interact with your website, so you can use those insights to improve UX and the metrics that matter to your business.

What is a heatmap?

A heatmap (or 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 heatmap 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)

Want to see a heatmap in action? Play around with the Hotjar Heatmaps demo to get a feel for the tool. Toggle between heatmap types on the right-hand sidebar to see the different insights you can get from each.

5 ways to use heatmaps to evaluate UX

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

1. Showcase your best-performing designs

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

Heatmaps 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 UX design projects. This impact is especially useful if you want your pages to perform better.

Over at Spotahome, an online platform for mid- to long-term property rentals, Customer Knowledge Manager Sara Parcero-Leites uses heatmaps to make sure her team is aware of UX areas that need improvement.

During regularly scheduled Hotjar ‘parties’, Sara showcases 3–4 interesting heatmaps, along with insights from other Hotjar tools, to spark discussion and collaborate on solutions. 

Sara told us that most developers and product managers had never actually seen users interacting with the features they built before she started hosting these parties and showing them visual evidence like heatmap data—now they leave each party with eye-opening information, and plenty of bugs to fix.

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 that other page elements distract users from seeing your main CTA, or you might identify an opportunity to test a new CTA in an area that’s attracting more user engagement.

Here’s an example: while introducing Hotjar tools to his team, Conan Heiselt, a UX designer at the software company Techsmith, discovered that users weren’t interacting with product CTAs as intended—this revelation came by viewing a click map.

After applying a click map to their service page, Conan and his team saw that many users ignored the CTA text buttons and preferred to click on product images, so they decided to make the whole area clickable during a redesign. Concrete visual evidence collected from just one click map enabled his team to provide users with a more intuitive user experience.

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 not all of them get to see the same information above-the-fold (the part of the page that’s immediately visible without scrolling).

Scroll map tools can show you where the average fold is on mobile and desktop devices, 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 full picture of where you’re losing user attention.

And with Hotjar, you don’t have to frantically toggle between two or three heatmaps: the streamlined Engagement Zones map combines click, move, and scroll data into one view so you can see which parts of your page users engage with most.

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 heatmaps will collect data from enough users to disregard anomalies and show you common click patterns across your audience.

By looking at a click heatmap, 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 frustrate your users, causing them to exit your site. There’s a specialized heatmap to visualize this: Hotjar rage click maps uncover which elements cause friction by showing where users repeatedly click over a short period of time—it’s the perfect tool to turn to if you want to avoid enraging users during their experience.

5. Optimize for mobile and desktop

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

Compare mobile and desktop heatmaps to spot any difference in behavior and see if mobile app users are missing important CTAs or other elements. You may need to design different user-friendly interfaces for mobile and desktop to ensure good UX across all devices.

Using heatmaps to optimize pages for multiple devices significantly increased conversions for Materials Market, a website that connects construction material suppliers with customers across the UK.

CEO Andrew Haehn used a Hotjar scroll map to discover that very few mobile users scrolled far enough down the page to see the main CTA, so his team redesigned the button and placed it higher on the page. This simple change contributed to a 1.1% increase in conversion rate, generating £10,000+ more in yearly revenue.

Using heatmaps with other UX tools

Heatmap 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’s look at four examples:

1. Heatmaps + traditional analytics

Traditional web 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 heatmap and start seeing what makes people leave.

You can take your heatmap analysis to the next level with Hotjar Trends. Set up a heatmap to analyze user behavior before and after a page launch or redesign, then jump directly from the heatmap to charts to see how engagement evolves over time.

2. Heatmaps + session recordings

A session recording (or 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 heatmaps help you visualize data from all your users at once, recordings are created for each individual user. Instead of making assumptions about the clicking and scrolling you see on a heatmap, try viewing some session recordings to see how real people actually interact with the page.

Let’s say you discover a concerning user interaction during one session recording and want to know whether it’s an isolated incident or a more widespread functionality issue. Hotjar’s zoom out feature lets you view a recording of a user struggling, then toggle directly to the heatmap of that page to see if other users experience the same issue.

To give you a real example, let’s see how Hotjar Recordings paired with Heatmaps helped digital UX design agency Turum-burum increase shoe retailer Intertop’s store conversion rate by 55%. 

Session recordings first revealed that customers experienced issues with Intertop’s product filters—they were browsing through a huge number of pages to look for their shoe size.

After analyzing a click map, the Turum-burum team found that many users were clicking ‘show all’ while searching for a product because they lacked the necessary filters to find what they were looking for.

With insights gleaned from both session recordings and heatmaps, Turum-burum was able to implement a more streamlined filtering feature by identifying and prioritizing clear product categories, an essential navigation element in the ecommerce shopping experience. Turum-burum’s improvement led to a better UX and an increase in sales for their client.

3. Heatmaps + 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 heatmaps to reveal design issues on specific site pages, ask your users for UX feedback on each page to learn what they think is missing or what 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.

In addition to the click map insights that led software company Techsmith to provide a better UX by redesigning their product CTAs, UX designer Conan Heiselt also used Hotjar Surveys to gain a deeper understanding of their customers’ needs.

With a simple on-page survey, Conan asked users who completed certain interactions one open-ended question: “What’s your biggest frustration with this page?” He was able to collect enough answers to identify 15 general themes and start taking action to address specific user needs.

If you don’t have enough time to prepare an in-depth and actionable UX research report like Conan’s, try Hotjar’s AI for Surveys and watch as it generates an automated report with key insights and suggested next steps based on real feedback from your users.

4. Heatmaps + A/B testing

Heatmap data and A/B testing go hand-in-hand: you can use heatmap data to craft a test hypothesis, and you can run heatmaps 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 heatmaps 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 heatmaps insight with A/B testing.

How to get started with heatmaps

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

Whether you use heatmaps 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.