The complete guide for getting started with heatmaps | UXCam | Blog

The complete guide for getting started with heatmaps

Traditional analytics tools shows ‘charts and graphs’ and answers your quantitative questions such as ‘What’ and ‘How’ but they fail to explain ‘Why’. Putting it another way, the traditional analytics tools gives you the holistic view of which part of your product needs attention, however, it doesn’t tell you which part of the page needs rework.

heatmap-product-app

This is where qualitative analysis comes in plays, allowing you to make decisions based on understanding user’s actual experience with your product. Learn more about the differences here.  One the key offering of Qualitative tool (including UXCam) is Heatmaps, which we will talk about in this post.

Heatmaps

Heatmap aggregates user interactions (touch/tap, swipes, pinches, scroll) with your product enabling you to answer questions such as:

  • Where in the product users are clicking (or not) and how are CTA’s performing ? (Click / Touch heatmap)
  • Which area of the product is being viewed and used the most ? (Attention heatmap)
  • How far users are investing on your content ? (Scroll heatmap)
  • What path are users taking to perform an action ? (Mouse movement heatmap)

To answer these questions, Heat map uses a color coded overlays to show the “attention areas”. Let’s look into these different types of heatmaps.

Type of Heatmaps

Click / Touch Heatmap

Click Heatmap shows where exactly people are clicking on your site allowing you make informed decision on repositioning, changing color etc. of Call-to-Action, improving conversion.

 

UXCam Click Heatmap

UXCam

 

What can click heatmap answer ?

  • Where in the product users are clicking and what they are ignoring ?
  • Which call-to-actions are performing best ?
  • What features are being used the most ?

Scroll Heatmap

Scroll heatmaps shows you what percentage of visitors are scrolling till which position of your page. This allows you to make decisions on page content and layout to ensure user sees the content you are intending them to see.

Below is a screenshot of Hotjar’s Scroll heatmap showing you what percentage of visitors reached certain point.

 

hotjar-scroll-heatmap

HotJar

Questions scroll heatmap can answer ?

  • Which section on your page are users most engaged ?
  • Is the CTA placed in the area where users scrolls to ?
  • How to redistribute content and layout for maximum exposure ?

Mouse movement Heatmap

Mouse movement heatmap highlights the areas where users read contents and engage on the pages,  by displays user’s  mouse movement. This is the closest alternate solution for expensive eye-tracking and on a scale.

 

vwo-heatmap

 VWO

Questions mouse movement heatmap can answer ?

  • Are users reading your contents ?
  • Which contents are being read the most ?
  • How to edit and distribute content for maximum interaction ?

Attention Heatmap

Attention heatmap shows you the most valuable areas on your page by tracking the amount of time a visitor stays on a region of that page. 

 

clicktale-attention-heatmaps

 ClickTale

Questions attention heatmap can answer ?

  • What’s most interesting for the user on a particular page ?
  • Where is the best position to place CTA ?
  • What sections could be removed or repositioned for maximum exposure
  • What’s the optimal length of a page ?

As a follow up to this, let’s look into various tools that can be used for heatmap generation and optimization in this follow up post.

Top heatmap analysis tool for website and mobile apps

top-heatmap-tools
Heatmap aggregates user interactions (touch/tap, swipe, scroll) with your product enabling you to answer questions such as:

  • Where are users clicking and how well the CTA’s are performing ? (Click / Touch heatmap)
  • Which part of the product is being viewed and used the most ? (Attention heatmap)
  • How far along are users investing on your content ? (Scroll heatmap)
  • What path are users taking to perform an action ? (Mouse movement heatmap)

Heat map uses a color coded overlays to show the “attention areas”. We have looked at these various kind of heatmap here. In this post, we will look at top heatmap solutions for mobile and web.

Read More