Measuring The Impact Of Heat Maps On Landing Page Conversion

Heat Mapping Your Site To The Next Level

One of the buzzwords that has become hot in the search engine marketing industry over the last year has been ‘conversion’.  More specifically – what things can be done to the pages that traffic is driving to so that we can encourage the visitor to complete the goal that we want them to achieve?

Also on TechWyse: Improve Landing Page Conversion Rate Implementing Killer Landing Pages That Convert

The first thing we want to ensure is that the page the visitor is landing on has relevant information on it to the keyword the visitor found the website on the search engine for, e.g. SEO Toronto. Once we have confirmed this what can be done to ensure we are converting visitors to the goal that we want them to complete?

At TechWyse, we use several methods for conversion rate optimization; we build sales funnels, ensure we are using conversion oriented content, and make sure the conversion point is easily recognized. One of the most effective things that can be done to quantifiably measure visitor behaviour is to use heat maps to help understand what visitors are looking and clicking on when visiting a specific landing page. To help you understand how heat maps work and why they can help improve conversion what better way to show it than a real life example?

How To Improve Conversion Using Heat Maps

Many clients come to our internet marketing agency with landing pages (either in PPC or there actual public website) which have really sharp designs – but they don’t seem to convert.  By using heat maps we are able to begin observing data that we would not have considered otherwise. Looking at the landing page below for example, it seems that the design is both professional and sales driven.

Original Landing Page

Original Landing Page – Heat Map

After reviewing the actual heat map (below) we could see that there were many issues with what visitors were actually looking at.  Remember – this heat map represents a span of no more than 5 seconds of a person’s time and is the action people take in deciding whether to stay longer or bounce and visit another page.

Findings

Using the heat map analysis above, keep in mind that red means it has engaged the visitor, orange and yellow mean that they may slow down slightly and green means very light attention is paid.  Also note the lines and numbers as they represent the path the user takes when looking at the page and in what order. After review, here are just some of the issues that the original landing page presented:

• Since we naturally notice color differentiation, the first thing looked at was the red starburst which actually has no click action or conversion related text.
• If you actually click on the image above you can see numbers which represent where the eyes start and the path that they follow.  In this case the eyes are all over the place.  The screen looks very messy.
• The action button in the top banner isn’t even observed in the scan of the page.
• The form is located below the fold for most browsers and even in this example is not even noticed.  This is another conversion item.

Revised Landing Page V1

Based upon the above results we decided to redesign the homepage.  The main goal was to remove clutter and have the visitor focus on items that created ‘action’. Here was what we came up with:

Revised Landing Page V1 – Heat Map

The heat map below illustrates what the visitor began to see with the new landing page.

Findings

In this design concept the first thing the visitor looked at was an image of the truck.  This was also the most intense area for the visitor as illustrated by the red tone.  Following the viewing path the visitor then scans the main selling points listed in the top sales funnel then scans the logos, the form, then the image. The main issue with this landing page is the actual call to action (located in the top banner in light blue) isn’t looked at whatsoever. An improvement, but back to the drawing board.

Final Landing Page V2

In this version we kept the same design but made slight modifications according to our heat map findings.

• We changed the truck in the top banner from red to blue so it would blend with the site better and take attention away from the image and over to selling features.
• We changed the color of the main call to action in the top banner from blue to yellow and also changed the checkmarks for the top bullet points to yellow to attract attention.
• We moved the logos which previously appeared in the top banner to the bottom of the page where they would be visible if the user scrolled.

Final Landing Page V2 – Heat Map

Findings

Success!

• Visitor first sees the image but is not as fixated on it as previously.
• Visitor then moves to the main call to action and is the most engaged in this location.
• Visitor then also reviews the quick contact form.
• Visitor then investigates the offer in the top sales banner and is engaged.
• Visitor then goes back to the truck image
• Visitor then views the call to action in the top banner again.
• Finally – the visitor ends on the Truckers Assist logo.

When this entire exercise began, we thought we had a page that was designed nicely and was effective.  After building another landing page, testing and revising we quickly realized the issues the original landing page had and created a design that was more effective. All items we would not have identified unless we used a heat map site scan tool!

Think this can help your web pages?  We can do the same thing for you that we did for this client.  To begin the process you can give us a call or fill out this form.

Heat Map Testing Tools

There are several tools available that can help you understand what visitors see when they come to your web pages.  The heat map tools we used in this example came from Attention Wizard and Feng-GUI and are recommended for people that want to quickly measure a concept. Crazyegg is another amazing heatmap to track where your eye travels. Many thanks to them for building such a lovely tool! Many thanks to them for building such a lovely tool!

Post By DJ Kennedy (154 Posts)

DJ has been a high profile Internet Marketer since 2001. He is the CEO of TechWyse and as a passionate member of the internet marketing industry is a key contributor on the 'Rise To The Top' Blog.

Website: →

Connect