Skip to the content 
Having a website that generates attention from its target market, that has a low bounce rate and converts visitors into sales is the dream of everyone that sells or promotes products online.
To achieve that, even simple tools like heat maps (or heatmaps) can be extremely useful, as they help identify pages or areas of your site that need to be improved upon in order to funnel visitors to key information or to the path you want them to take.
What are Heat Maps?
Developed in the 90s by Cormac Kinney with the purpose of providing a visual representation of financial data movement (price, profit, volume and volatility throughout the day), heat maps are, in essence, a visual representation of data.
They allow us to see exactly which elements attract the user’s attention (and which don’t), and quantify the interaction with these particular areas by displaying it visually.
See the example of Apple’s website home page below:
By knowing where users are interacting with your website, you can make strategic changes to the way you place your content (text, images, CTAs etc.) so that you draw more attention to the important parts and ultimately increase your conversion rates.
WHY SHOULD YOU USE HEAT MAPS?
According to a study by the Nielsen Norman Group, the content above the fold considerably influences the user experience on any particular page. Regardless of device, users spend 80 per cent of their time on-site looking at the information above the fold, while only 20 per cent scroll down and pay attention to what’s below.
As a general rule therefore, you should always place your most important content at the top of the page, and one of the reasons for using heat maps is to ensure that you do so.
In addition, heat maps help you to better understand how users interact with your website so you know exactly what’s drawing attention and what isn’t. You can then decide where to place the most important elements in accordance with your page goals, for example visit review page, click affiliate link, subscribe to newsletter etc.
Do bear in mind that while heat maps are a fantastic tool for identifying which areas of your website need improvements, you shouldn’t rely on them solely to improve conversion rates. Make sure you also analyse Google Analytics data, and compare and act on your findings for the best possible results.
THE TYPES OF HEAT MAPS
There are three different formats:
- Hover maps (tracking where the user moves their mouse)
- Click maps (tracking where the user clicks)
- Scroll maps (tracking how far down a page the user scrolls)
As there are differences between each of them, I’ll quickly examine all three so you can decide which will be of most value to you, although I would recommend that you use them all, as it won’t take you long!
Note: Some paid tools (like ClickTale) also offer another type of heat map called an ‘attention heat map’, which uses a combination of hover and scroll maps data to detect which parts of the page users pay most attention to. This can be useful if you have long pages and you want to establish which elements are grabbing the most attention.
Hover Maps (tracking mouse movement)
Hover maps are the ‘default’ type of heat map. It’s what people generally assume you’re talking about when you mention heat maps to them.
These basically assume a correlation between eye tracking and mouse movements. In other words, hover maps suggest that your mouse cursor is always hovering over the part of the website that you are looking at.
While for some of you this will seem logical (especially if you move your cursor over what you read), the reality is that not everyone browses in this way, so the data obtained from hover maps might be inaccurate. In 2010, Dr Anne Aula, the current Head of User Experience at Verily (formerly Google Life Sciences), presented some findings that supports this view:
- Only 6% of users show some vertical correlation between mouse movement and eye tracking.
- 19% of users show some horizontal correlation between mouse movement and eye tracking.
- 10% of users hovered over a link while they continued reading other elements.
On the basis of this study, you should probably discount the validity of this type of heat map, but you could always have a quick glance to cross-check for any odd behaviours.
Click maps (tracking user clicks)
Click maps, in contrast to hover maps, are based on actions (clicks) and are therefore a more accurate source of data.
If you compare this image with the one in the ‘Hover Maps’ section, you’ll see that they aren’t so different in terms of key areas of activity. However this second example is easier to analyse since it has fewer clusters of potentially useless movement data.
As one of the most useful types of all heat maps, click maps allow you to easily find flaws in your website pages by highlighting:
- Areas where users are clicking but where you haven’t added a link.
- Areas where users aren’t clicking, where it may be worth changing or removing copy.
If you own an affiliate website (or a few!) and you’ve never run a heat map analysis before, the procedure would probably identify areas where you could make a few quick fixes, such as:
- Menu navigation has items that aren’t getting any interaction – are they necessary, or causing extra distractions?
- Content images are getting clicks but you haven’t added a link to them – what are you waiting for?
- Your primary CTA isn’t getting the clicks it should – why not try a more appealing visual, or different copy?
These are just three examples of basic improvements you could easily make by using this type of heat map.
Scroll maps (tracking user scrolling)
And finally, scroll maps. These are pretty simple and straightforward. They work by giving you an indication of how far down your page users are scrolling.
This is amazingly useful information particularly as, due to the colour coding, this type of heat map literally shows you at which point users normally stop reading and drop off your pages.
As an example, if you have an affiliate link at the bottom of your product reviews, you could use scroll maps to see how many users actually reach it. It may surprise you to discover how many of your visitors don’t get to see any calls to action!
TOOLS TO CREATE HEAT MAPS
In order to start generating heat maps you will need some tools. Thankfully, there is a wide variety of both free and paid tools you can use to get going. Here’s a selection:
Hotjar – A fantastic tool that supports all three types of heat maps for free (up to 2,000 page views per map). Simply create a heat map, let Hotjar collect data for a few days, and you will soon have actionable insights to improve your website conversion rate. It also has a variety of other free conversion tools, such as user recordings and on-site surveys that you’ll love!
SumoMe – Yet another free option, SumoMe offers heat maps as well as a variety of traffic and conversion tools. It has a WordPress plugin so the install is quick and easy.
Crazy Egg – A paid tool created by influencer Neil Patel, Crazy Egg starts from as little as $9 a month. It provides various options including traditional heat maps, confetti mode (allowing you to distinguish clicks through a variety of criteria), scroll maps and overlay reports. There’s a 30-day free trial available if you want to give it a shot.
Mouseflow – Also paid, Mouseflow allows you to generate traditional click, hover, scroll and attention heat maps. It also has a variety of extra tools such as user recordings, funnel and form analysis.
Clicktale – One of the oldest tools out there, Clicktale is still going strong and is trusted by major brands. It has everything the others offer including all the heat map formats, as well as a variety of extra tools such as extra analysis for link performance, which can be extremely useful for affiliate marketers. To try it, you will need to get in touch to request a demo and discuss pricing for your traffic volume.
Lucky Orange – With a 7-day free trial option, and prices from as little as $10 a month, Lucky Orange also has a bunch of extras including recordings, funnels, form analytics, pools and chat. However the best part is that it provides heat maps that, “work with everything”. This is critical, especially if your website is fairly dynamic. It also has some great segmentation so you can see different devices, locations and traffic sources, and how each of them interacts with your website.
SIX WAYS TO USE HEAT MAPS TO INCREASE AFFILIATE EARNINGS
As an affiliate, the reality is that your websites are likely to be very simple (content, content, content) but heat maps can still provide you with a load of useful information.
Once you’ve generated some heat maps, (start by analysing your highest traffic pages as well as your home page) have a look at the following ideas and see if you can apply any of them.
1. Optimise placement of key product features
Using hover maps, check if there is any movement over the key product features on your reviews. For example, this may be a bullet point list. If not, is there a place where visitors are spending more time that you could move your key selling points to?
2. Optimise placement of your affiliate links
Using scroll maps, find out whether visitors on different devices are reaching your affiliates links. Could you be leaking traffic? If they aren’t reaching your links, consider moving them higher up the page or using ‘sticky’ side, top or bottom bars.
3. Reduce click waste
Using click maps, establish whether there are areas where visitors are clicking (images, text) that don’t have a link. Consider turning these into links to ensure you get the most out of every click.
4. Improve CTA effectiveness
Using hover and click maps, check whether certain calls to action are getting more interaction than others. Learn from the best-performing CTAs, and apply your findings to your worst performers throughout your site.
The same goes for images. Here’s an example of how an alternative image can make a massive difference in user interaction:
5. Optimise your content for easy reading
Does your content contain large blocks of text which show no interaction? This could be because it’s too long or hard to read. Try making sentences shorter and dividing them into more paragraphs. Also consider whether particular text is adding enough value to justify its inclusion.
6. Understand how visitors react to content
Are particular parts of the page or certain keywords getting a ton of attention? These could be the focus for your target market so try to build your copy around them.
If you want to fully understand the behaviour of your site visitors, data analysis from services like Google Analytics are extremely important. However to ensure the best results, you should enhance these findings with usability analysis.
Analysing heat maps is a great way to do exactly that. You will be able to see how users interact with the pages of your website; where they are having difficulties; which content they are most and least interested in; and whether your main links are attracting sufficient attention. All this is vital for improving your conversion rate and for ultimately increasing sales.