The Heat Maps

UseItBetter offers three types of heat maps: Clicks, (mouse/touch) Moves and Exposure.

Segmentation

With UseItBetter you can view heat maps for any specific segment. For example, you could generate a click heat map from visits in which users made a purchase and then generate another one from visits in which users didn’t make a purchase to see if there are any differences in click patterns on any of the pages of your website: home page, basket etc.

heatmaps-segment-example

This approach usually works best if applied to visits in which users progressed to a certain stage of your purchase funnel, for example those who visited the basket page:

  • Visits with Basket Page (M) Section=basket.html
    • Visits with a Purchase (M) Section=checkout/confirmation.html
    • Visits without a Purchase (M) NOT Section=checkout/confirmation.html

or, you could compare traffic to a landing page from different referrers:

  • Landing Page (A) entryURL=landing-pages/black-friday
    • Visits from Google (A) referrer=*google.*
    • Direct Traffic (A) referrer=none

A common use case is to analyze heat maps in a so call “inverted funnel” – segment of users who started a process but didn’t complete it. For example, users who expanded (1) the Women dropdown in the top navigation bar but (2) didn’t select any of the links in it:

inverted-funnel-segment

to see what they did instead:

heatmap-example-top-nav

Generating Heat Maps

Responsive Rules

heatmaps-responsive

  • 1) Interface allows you to narrow heat maps to visits from mouse or touch devices. By default, heat maps are generated for both types.
  • 2) With Screen Width and Screen Height ranges you can generate heat maps that will match different layouts of your responsive website.

Limiting Visit Scope

By default, Heat Maps are generated based on all interactions from all different sections of your website – from the start till the end of visits that match your segment definition. This means, that even if your segment definition returns visits in which users went to a certain section – for example a checkout page, heat maps will be generated for home page, product pages, basket and so on.

in-between-events

By Section

If you are interested only in a single section, you can specify its name in the 3) “in entire session or specified section” field. You may use a wildcard to match multiple sections, for example:

product/women/jeans/*
product/women/*
product/*/jeans/*

By Events

A heat map from a single section may contain behaviors with very different meaning. On a registration page, lots of interactions with fields may be a good sign but if they happened after users submitted the form, they mean users had problems completing the form. To get a more meaningful heat map, you could generate a heat map only from interactions that happened after a specific event.

For example, you could use the following rules to generate heat maps for a registration form:

Use Data Between The Opening Event And The Closing Event In Entire Session or a Specified Section Result
Empty
Default: START
Empty
Default: EXIT
Empty
Default: ENTIRE SESSION
heat maps from all pages visited in current segment
1 Empty
Default: Section=account/register.html
Empty
Default: Time in account/register.html=*
account/register.html heat maps of all interactions on account/register.html page only.
2 Empty
Default: Section=account/register.html
Action=Submitted form form[1]#register account/register.html heat maps of interactions on account/register.html page before the first form submission event on that page.
3 Action=Submitted form form[1]#register Empty
Default: Time in account/register.html=*
account/register.html heat maps of interactions on account/register.html page after the first form submission event.

The heat maps below show mouse moves for rules (1), (2) and (3) as described above. The heat map on the right (3) shows that users edited a phone number field after they submitted the form.

heatmaps-forms-example

Viewing Heat Maps

Once heat maps are generated you will see the actual 1) sample size on which heat maps are based and the covered time frame.

Select a type of a heat map you want to view. By default, you will be redirected to the URL specified in your Project Settings with a heat map overlay displayed. You can navigate your website to see heat maps for different pages.

heatmaps-open

You can select a different section of your website from the dropdown to jump directly to that page. Please note, that in some cases your website may not allow you to access a certain page directly. For example, to see a heat map of a checkout page you may need to add a product to the basket first.

heatmaps-jump-to