Blog Improve your user experience by listening to your customers.
3-heatmap-examples-header

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

June 4, 2019 by Fio Dossetto UX Design Read/Write Comments

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 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 on improving the user experience, heat maps 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.

Table of contents

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.


what-is-a-heatmap

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

skyscanner-hotjar-heatmap

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 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-map-example

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).


scrollmap-average-fold

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.

issues-across-devices
HOW RESPONSIVE WEB PAGES LOOK DIFFERENT ON DESKTOP AND MOBILE

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 tools and feedback. 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 heat maps, 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

Recordings
A GIF SHOWING A REAL 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.

on-page-feedback
AN ON-PAGE SURVEY SHOWING ON DESKTOP AND MOBILE

After you've used heat maps to reveal design issues on specific site pages, ask your users for 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).

bannersnack
HEAT MAP DATA ON BANNERSNACK’S HOMEPAGE BEFORE AND AFTER A/B TESTING

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.

Set up a heatmap today 🔥

Grab a free Hotjar trial, pick your most important business page (homepage, pricing, etc.), and find out how your users scroll through it!

Free forever. Get started!
3-heatmap-examples-header
1fio2
Fio Dossetto

Fio manages editorial production at Hotjar, generally over-uses em dashes, and makes sure we publish specific, actionable pieces—with a sprinkle of our signature style on top.