https://gdsdata.blog.gov.uk/2014/11/12/how-to-create-heatmaps-to-summarise-user-navigation/

How to create heatmaps to summarise user navigation

This posts outlines our steps to producing web heatmaps with the help of Google Analytics. It follows my recent post on how heatmaps can show how users navigate around GOV.UK.

Heatmaps are reports that show what parts of a webpage are looked at and clicked on. They are often used to compliment other web analytics data, giving data scientists a full view on how certain content is performing.

The heatmaps below represent every user navigation made on GOV.UK in September 2014 from one section to another. The heading columns on the left show where users navigated from, while the headings rows at the top show where they went. The corresponding cells shows the approximate number of times they made a particular journey, with the different colours portraying the journey's relative frequency. The ‘hotter’ or darker the colour, the more times the journey took place.

Click on the images below to view the full versions of the heatmaps.

Heatmap by numbers
Heatmap by numbers

 

Heatmap by percentages
Heatmap by percentages

Sectioning the site

I first identified the main content sections on GOV.UK. Most of these top-level sections could be determined by their URL structure or page title. However, a popular section of GOV.UK focuses on the general needs of citizens and businesses. This ‘mainstream content’ doesn’t have an identifier in the URL or page title, but it was reasonable to assume it would make up the majority of remaining top-level pages.

Setting up filters

Then to create the heatmap report, I set up a new View in Google Analytics to track how users were navigating the top-level sections.

I made a series of filters to aggregate all the pages within a top-level section. These were then displayed in Google Analytics under a recognisable name.

For example, we have a section called the Government Service Design Manual in which all the pages begin with /service-manual in the URL. The custom filter configuration to group these manual pages together is:

Example of aggregate filter
Example of aggregate filter

We have content called detailed guides which are only identifiable by the page title (all contain the label ‘detailed guidance’).

I used this advanced filter configuration to aggregate them together:

Aggregate filter from a page title
Aggregate filter from a page title

The reason I included ‘x:’ in the naming of the aggregated pages is to enable mainstream content pages to be included. To then aggregate mainstream content pages I created this filter:

Filter for mainstream content pages
Filter for mainstream content pages

This filter tells Google to find any remaining pages that don’t start with ‘x:’, group them together and call them “x: Mainstream”.

Once the filters became active, here’s how the data appeared in the All Pages report:

The All Pages report
The All Pages report

After making some checks to ensure the data was appearing correctly, I allowed the data to collect for the whole month of September.

Bringing the data together

After a month’s worth of data had been collected, I produced a custom report that showed how many times a user navigated from one section of GOV.UK to another. Here is the configuration used:

Custom report configuration
Custom report configuration

And this is how the custom report looked:

The resulting custom report
The resulting custom report

As we have a Premium account, I was able to request an unsampled CSV (comma-separated values) file in order to get exact figures. (Note: this is not a necessary step if the data has a high sampling rate, as it will then be quite representative.)

Pivoting the data

The next stage was to pivot the data in the CSV file to form the basic construct of the heatmap. I used the Previous Page Path dimension as Row Labels, the Page dimension as Column Labels and the Sum of Pageviews as Values. This was the resulting table:

The pivoted data
The pivoted data

Then I copied and pasted the table into a spreadsheet and tidied it up. I moved some columns, renamed the labels, formatted the cells and deleted anything that wasn’t needed. After this phase, this is what the table looked like:

The table tidied up
The table tidied up

Exit behaviour

To obtain a more comprehensive picture of navigations I wanted to include exit behaviour, which I decided to break down into 2 types. The first was ‘bounce’ exits, in which the user only looked at a single page and left; the other was exits made after looking at more than one page.

The overall number of exits per section was available from the standard Exits report. To get the bounce exits, I applied an advanced segment using Page Depth. Here’s the configuration:

Advanced segment configuration for one page visits
Advanced segment configuration for one page visits

I entered the resulting numbers as a separate column in the far left of my table, and labelled it ‘no navigation’. These numbers were then subtracted from the overall exit figures to show the number of non-bounced exits.

I inserted a new column called ‘exited’ to the right of the table for these numbers. The table then looked like this:

The table with exit columns added
The table with exit columns added

‘Heating’ the cells

Now that all the data was in place, it was time to apply colour to show the relative differences between cells. I applied conditional formatting using a colour range from deep red (for the highest end of the scale) to a pale yellow (for the lowest). Zero values were greyed out.

Here’s part of the conditional formatting settings:

Conditional formatting settings
Conditional formatting settings

This is the resulting heatmap, with a title added:

The finished heatmap by numbers
The finished heatmap by numbers

Heatmap by percentages

I used the heatmap as a basis for creating another one.

My second heatmap shows the percentage of navigations from each top-level section. This was achieved by simply adding the total number of navigations to each row in the table. Then I entered a formula to calculate the percentage of each of the individual cells in those rows.

Here's an example:

Example of formula for percentage heatmap
Example of formula for percentage heatmap

The completed heatmap:

The finished heatmap by percentages
The finished heatmap by percentages

Feedback

The heatmaps have given us intriguing insights into how users have been moving around GOV.UK. We'll continue to iterate them further, for example by segmenting them by device type.

In the meantime, if you have any comments or suggestions, or you want to share your experiences of creating navigational heatmaps, then please get in touch in the comments section below.

 

Ashraf Chohan is a Product Analyst at GDS.

If work like this sounds good to you, take a look at working for GDS. We’re usually searching for talented people to come and join the team.

Sign up now for email updates from this blog or subscribe to the feed.