> For the complete documentation index, see [llms.txt](https://www.designreference.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.designreference.xyz/ux-methods/testing/heatmaps.md).

# Heatmaps

<figure><img src="/files/yoAQ5DgtmQbjWKMO1Wg8" alt=""><figcaption><p>Image by <a href="https://www.ramotion.com/blog/heatmap-in-ux-design/">RAMOTION</a></p></figcaption></figure>

Heatmaps are a powerful visual tool used to show how users interact with a specific page by representing their actions as colours.&#x20;

Instead of looking at a spreadsheet of numbers, a designer can see a "thermal" overlay on top of their website where "hot" red areas indicate high activity and "cool" blue areas show parts of the page that are being ignored. This makes it incredibly easy to see at a glance if users are clicking where you want them to or if they are missing your most important information.

There are several different types of these maps, with the most common being click maps, scroll maps, and move maps. A click map shows exactly where people are pressing their mouse or tapping their finger, which can reveal if users are trying to click on elements that aren't actually links. A scroll map uses horizontal bands of colour to show how far down a page people typically get before they leave, helping you decide if your most vital content is buried too low for anyone to see it.

Using this method is especially helpful for identifying "friction points" in a user’s journey. For example, if a move map shows that users are hovering their mouse over a confusing image instead of your signup button, you know that the image is a distraction. By turning raw data into a clear visual story, heatmaps allow design teams to make informed decisions about layout changes and ensure that every element on the screen is serving a clear purpose for the visitor.

#### Further Reading

{% embed url="<https://www.qualtrics.com/articles/customer-experience/website-heatmaps/>" %}

{% embed url="<https://medium.com/@andrew-chornyy/top-10-heatmap-tools-for-ux-in-2025-click-scroll-move-61969ad2d3f4>" %}

{% embed url="<https://contentsquare.com/guides/heatmaps/ux/>" %}

{% embed url="<https://www.ramotion.com/blog/heatmap-in-ux-design/>" %}

#### Further Viewing

{% embed url="<https://www.youtube.com/watch?v=tokYjWcu5ok>" %}

{% embed url="<https://www.youtube.com/watch?v=aCZUOnrQpao>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.designreference.xyz/ux-methods/testing/heatmaps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.