Knowledge base | mouseflow

Heatmaps Overview

Click Heatmaps

A click heatmap is valuable in revealing the effectiveness of links throughout your site.

Whether a link is part of the main navigation, text content, or a multi-step form, you need to know whether it helps or hinders usability.

On our home page, the links in the main navigation receive the most clicks. You can tell because there are clear areas of hot (white) activity. However, there are also areas where it doesn’t make sense to have clicks. This happens because visitors are confused or have an expectation that something is clickable (for more information) when, in reality, it isn’t.

In our page, the call-to-action buttons are the main focus. We want people to click them. If other text or areas are a distraction, it kills our conversion rate. Part of great design is making sure that a page has everything you need and nothing more.

Although our pages have a lot of elements, they used to be much more complex. We spent time running A/B tests to determine the optimal layout that balances clicks to the locations that we want.

We recommend you look at your click heatmaps and see if they make sense, too.

Here are some questions to ask:

  • Do important page elements have click activity?
  • Do unimportant page elements have click activity?
  • Are there certain elements, relative to others, that receive more activity? Is there a good reason for this?
  • Do you need to reorganize/reorder the links in your main navigation to draw focus/attention?
  • Do form fields receive equal amounts of click activity? Or, are there certain fields where there is considerable drop off?

Movement Heatmaps

Movement heatmaps focus on where users navigate their mouse on your site – it’s a great measure of attention and engagement.

This is insightful because you can gauge whether the key areas of a page receive adequate attention.

Below you can see that most of the user attention on our site is focused on the article content and top links (white areas). This is optimal, because we can tell that users are actually reading the content on our blog. As we scroll down further in this heatmap, we notice that some of our blogs are surrounded by white/red and others are cooler. This tells us which blogs are the most and least popular. You can effectively translate this to tell you what content on your website is the most engaging, as well.

 

In practice, the optimal page layout is dependent on visitors and how they behave. We tell clients to focus on one main goal for each page. Then, in each movement heatmap, make sure that content which supports that goal is located in the “hot” areas. This will improve usability and boost conversions.

We recommend you look at your movement heatmaps and see if they make sense. Here are some questions to ask:

  • Are there “hot” areas over content (buttons, links, text, etc.) that supports the overall page goal?
  • Are there “hot” areas over content (buttons, links, text, etc.) that detracts from the overall page goal?
  • Are there “hot” areas of equivalent size over each form field? If not, does having less activity make sense for some fields (optional comments, etc.)?
  • Are there “hot” areas over content that isn’t well explained/elaborated upon in the content? If so, visitors might be interested in learning more. 

Scroll Heatmaps

Scroll Heatmaps give you an idea about how much of your page is visible to visitors.

Each section provides statistics about visibility and time spent – either viewing or interacting with different parts of the page.

A great example of an insight from the Scroll Heatmap is when key page content is located in a low-visibility area.

Let’s face it: you don’t know how visitors will browse. But, a scroll heatmap shows you, in aggregate, whether people are able to see/interact with content as you expect. For example, a call to action button is almost always best suited in the top fold of your page. But, not all layouts look this way.

A typical checkout screen will have a “Submit” or “Pay Now” button in the lower-right corner. This, unfortunately, results in cart abandonment as users don’t see how to proceed and leave the site in frustration.

Another common problem is that websites will have a large footer (at the bottom of each page) with links that go unseen for most visitors. If these links are important (like pricing/contact), they may be more effective in the menu bar or on a side panel which receives more attention.

We recommend you look at your scroll heatmaps and see if they make sense.

Here are some questions to ask:

  • Is key content (that supports the goal of each page) visible above the fold line?
  • Is there sufficient time spent either viewing or interacting with parts of each page that are important? If, for example, you have a form that isn't reporting much engagement, consider relocating it.

Attention Heatmaps

Our attention heatmaps show you how much time users are spending on your pages. It shows what parts of the page are most and least actively engaged by using a colored overlay.

The key on the bottom left corner of the heatmap reflects the level of interaction throughout your page. A red area is where there is the most activity and then, as the color gets cooler, there is less activity. The least amount of activity is displayed in the dark blue color.

By watching the color change, you can interpret the level of activity on the page. The hotter the activity, the hotter the color. The cooler the color gets, the less activity. This is extremely valuable because you can interpret what parts of your page are the most attractive to your users. When you analyze your website, notice if important elements are in areas that are cooler: indicating they’re not getting as much attention.

We recommend putting important content in areas that are most likely to consume user attention. For example, if you have a crucial Call-to-Action element, you’ll want to put it in the red hot area of your site. Here's an example:

The Hover Menu

This heatmap also provides a quick hover menu with additional metrics about the engagement. If you hover over any part of the page, a menu pops up that gives you more details:

  • Line: The exact pixel location on the page - useful for precisely locating elements.

  • Viewed by: The percentage of all visitors who have seen this part of your page.

  • Avg. Time: The average amount of time users spend in this part of the page.

  • Avg. Engagement: The total time of engagement (clicking, scrolling, movement, and similar activity) that users spend in this part of the page.

If you scroll down, you can hover over specific parts of your website to see this data. This really comes in handy if you’re trying to figure out how many people engage with certain pieces of content (like blog posts or photo galleries). It’s also fascinating to see the engagement for buttons, call-to-action (CTA) elements, and contact information.

Geo Heatmaps

The Geo Heatmap view lets you see where visitors are located on a world map. It’s illustrated with colors by area and concentration and provides a summary count of visitor location metrics for each major country.


Like our other heatmaps, the Geo Heatmap allows you to spot trends and patterns that would otherwise not be possible. This is because all of our filter options are available for this heatmap. You can create/save views for a particular subset of visitors and understand how those visitors behave by region. For example, do you know whether you get more cart abandonment in the United States or Canada? This heatmap will show you.

--

Have any questions about what you just read? No worries -- reach out to us at support@mouseflow.com. We’d love to help you.