New: flexible, templated dashboards for more control. Meet Dashboards

Learn / Blog / Article

Back to blog

How to use mouse tracking move maps to improve UX and conversions

Tracking where users move and rest their mouse cursors helps you build an image of what attracts attention (or doesn’t) on any website page or product interface. At Hotjar, we call this visualization a move map.

Last updated

3 Jan 2024

Reading time

7 min

Share

Learn how to use move maps to track mouse movement on your website so you can spot UX improvements, make optimizations, and increase conversions.

This guide takes you through what move maps are, why they’re useful, and how to analyze mouse movement data to make customer-centric optimizations that improve user experience (UX) and conversions.

We cover:

  1. What is a move map?

  2. 4 ways to use move maps to increase website UX and conversions

  3. Which pages should you use mouse tracking on?

  4. Move maps vs. click maps vs. scroll maps

  5. How to set up a move map on your website

Find your website’s attention hotspots

Use Hotjar Heatmaps to visualize mouse movement, spot UX improvements, and increase conversions.

What is a move map?

A move map—also known as a mouse movement heatmap, mouse tracking heat map, or attention map—tracks the overall movement and placement of a user's mouse cursor. 

Mouse movement heatmaps use color to show how much attention users pay to different page elements: the longer a mouse cursor remains at a certain point, the redder it becomes.

#A move map showing popular mouse positions on an example pricing page
A move map showing popular mouse positions on an example pricing page

📝 Note: some move maps also collect finger activity on mobile devices, but this is generally less useful as most mobile users only touch the screen to click or scroll. 

Why use a move map to track mouse movement

Move maps show you which parts of a page attract the most attention. Since they overlay mouse behavior for multiple users at once, move maps are quantitative representations of page elements that are actively read or seen.

A Hotjar move map on UI-Patterns.com shows the sidebar getting ignored

Research shows a correlation between mouse and eye movement. This means move maps are also a decent proxy for understanding where people look when browsing your site. 

Compared to eye tracking in a lab, mouse movement heatmaps are cheaper and easier to generate, capture more users at scale, and measure real-world behavior.

4 ways to use move maps to increase website UX and conversions

Use the examples below for ideas on how to make the most of move maps in your next UX design or conversion rate optimization project:

1. Find where you’re capturing user attention

Move maps show you which elements capture the most attention on any page—just look for the red hotspots.

Once you know what’s getting seen by page visitors, you can make optimization recommendations and get ideas for what to investigate next.

A Hotjar move map on a University of Baltimore library site shows the search box getting all the attention

For example, the University of Baltimore used Hotjar Heatmaps to add a move map to a library homepage. The heatmap showed most homepage visitors focused on the tabbed search box, with almost no interaction with other page elements, like the ‘Ask a Librarian’ button.

If this was your site, you could do any of the following: 

  • Get more data with session recordings to see exactly how individual visitors use the search box

  • See where users rage click and get confused

  • Consider A/B testing new layouts (like three separate search boxes instead of a tabbed one), then put move maps on your A/B test variants to see why successful variants win

  • Consider adding an on-site survey to ask users if anything is missing from the page

2. Measure if unclickable elements are being seen

Most text and images don’t require visitors to click, so move maps are the only way you can know at scale if they’re being read and seen.

#Part of a move map on a previous iteration of our guide to heatmaps
Part of a move map on a previous iteration of our guide to heatmaps

For example, we generated the above move map on an earlier version of our heatmap guide. It showed many visitors pausing to look at an image that compared scroll maps to click maps. This insight compelled us to keep the image when we updated the page. If you spot similar images in this blog post, now you know why!

3. See which elements get ignored

Since move maps measure continuous mouse placement, which can correlate with eye movement, they are better than other analytics tools at showing which elements users ignore.

A Hotjar move map on Ukrainian fashion retailer Intertop shows visitors ignoring product listings

For example, UX/UI agency Turum-Burum used Hotjar to create a move map on fashion store Intertop’s product category pages. Search filters got all the attention instead of the product listings, which suggested users were unable to find the results they needed. The team made some changes and added more product filters, which contributed to an increase in product clicks and an extra 13.3% average revenue per user (ARPU).

4. Segment your move maps to generate targeted insights

Different user segments behave differently on your website, and some are more important to your business than others. Segmenting your move maps helps you focus on your most valuable cohorts.

If you’re using Hotjar, you can filter heatmaps retroactively: click ‘Add filter’ to view the options.

#Hotjar’s heatmap filters
Hotjar’s heatmap filters

Some ways you could use this feature include:

  • Filter by exit page to view what users paid attention to before bouncing

  • Filter by event, like clicking a ‘Sign up’ button, to see what users paid attention to before converting

  • Filter by referrer or identifier (like UTM parameters) to isolate and investigate paid traffic behavior, specifically

A Hotjar move map on IDX’s homepage

For example, CRO agency The Good used Hotjar Heatmaps on privacy protection service IDX’s website to improve ad traffic ROI.

Which pages should you use mouse tracking on?

You can track mouse movements on any website or product page that gets traffic, but move maps are most useful on business-critical pages, and anywhere you want to check interaction with non-clickable elements. 🐭 For example:

  • Ecommerce product pages: use move maps to measure if customers spend time reading product descriptions and looking at product images

  • Blog posts: use move maps to see which paragraphs and images attract the most attention

  • Pages with high dropoff rates: use funnel analysis and tools like Google Analytics to identify conversion leaks and then move maps to see which areas get user attention

  • Business-critical CTAs: if calls-to-action (CTAs) aren’t getting clicked, use a move map to troubleshoot the issue

Move maps vs. click maps vs. scroll maps

Move maps aren’t the only type of heatmap you can use: click maps track where users click or tap, and scroll maps track how far users scroll down a page. Unlike these alternatives, move maps measure user behavior continuously, even in between page actions. 

In this way, move maps reveal insights other heatmaps miss. For example, a scroll map could show a high percentage of users scrolling to the bottom of a page—but a move map could reveal they completely ignore the sidebar. Similarly, a click map may show no clicks on a product description, but a move map could reveal that users who see it go on to convert.

A Hotjar move map (left) and click map (right) on Data36.com

No type of heatmap is better or worse—use them together to get clearer insights:

  • Use click maps to see if people click CTA buttons, broken links, or unlinked elements

  • Use scroll maps to visualize the average fold and see where most users scroll to

  • Use move maps to find which areas of a page attract attention

💡 Pro tip: if you’re using Hotjar, heatmaps are continuously captured on all pages, so you can toggle between click, move, and scroll maps without having to change any settings. 

Two ways to toggle between click, move, and scroll maps in Hotjar Heatmaps

📝Note: you may notice a fourth heatmap type in the image above, engagement zones. This heatmap combines click, move, and scroll data in a grid form, so you can see which areas of your pages get the most engagement. Try it out!

Move maps vs. session recordings

A session recording recreates an individual user’s browsing session across multiple pages: you’ll see mouse movements, but only for a single user at a time.  

Move maps, however, aggregate mouse movement for multiple users on a single page. You can use them to look for overall trends and get a broad idea of how different elements attract attention. 

💡 Pro tip: combine qualitative and quantitative data together to draw stronger conclusions. Use move maps to spot the main trend, like an element being ignored, then look at session recordings for a qualitative understanding of what individual users do instead.

User mouse movement tracked using Hotjar Recordings

How to set up a move map on your website

To get started, sign up for a free Hotjar account and add our tracking code to your website. Turn session capture on, and Hotjar will automatically collect move maps across your site. 

#How to view a move map in Hotjar Heatmaps
How to view a move map in Hotjar Heatmaps

Once you’ve received some website traffic, click the heatmap icon on the left, enter a URL, and click ‘View heatmap.’

#Click to toggle between move maps and other heatmap types in Hotjar
Click to toggle between move maps and other heatmap types in Hotjar

Select a timeframe, e.g. the last 30 days, and click the move map icon to generate your move map. It’s that easy!

Create a free move map and increase conversions today

Move maps give you a big-picture overview of what people pay attention to (and ignore) on your web and product pages.

On their own, they’re great visual assets to help explain user behavior to your team and stakeholders. But they become much more valuable when combined with other insights from your analytics stack: funnels to tell you where you’re leaking conversions, session recordings to show you how people browse across the whole of your site, and surveys to get feedback in your customers’ own words. 

And guess what? You can do all of the above with Hotjar. 😉

Find your website’s attention hotspots

Use Hotjar Heatmaps to visualize mouse movement, spot UX improvements, and increase conversions.

3 common move map FAQs