How to increase conversions with 5 heat map tips

heatmaps conversions

How to increase conversions with 5 heat map tips

Buffer this pageShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

I love to use click tracking heat maps because you can create them with almost zero effort. It takes some experience to read them the right way, but once you get that it is a great way to improve the usability of a website and help you push conversions the way you want!

Wait a second, what is a heat map?

Heat maps are visual representation of the interactions that a user makes with an interface. The color shows you where the “warmer” and the “colder” spots are, accordingly to how many interactions have been made in a certain area.

1. One photo can make the difference

This kind of heat map was made by tracking the movement of the user’s eyes traveling across the screen.
In this first picture a photo was tested where the baby was looking towards the viewer. A lot of views on the baby, many happy users.. but sadly there where few conversions.

When the marketers turned around the photo and let the baby look towards the text the conversion rates improved drastically.

Putting the eye line on the text or on your “call to action”, will help you pointing the attention towards your content.

What we’ve learned is that by publishing an image of a person, the user’s eyes will follow the image’s eye line. You can use this little trick to help you improve conversion rates! Generally speaking we can say that images of people should always face the text instead of the viewer.

2. We live in a western world

heat map conversion

People generally look more at the left side of the screen. Why? Certainly it depends on how the text is being aligned on the page. But I think the main reason is that people in the western world read from left to right, top to bottom.

This doesn’t mean we should put our “call to action” on the left side of the screen, but since people start reading websites from left to right, top to bottom, the top left content will get their attention first. Thanks to this info we can create content that drives the users attention as soon as possible to your action area.

3. Heat maps and bug fixing: a love story

heat-map viando

In this example we can see a mouse click detection heat map on a travel websites we needed to improve the conversion rates. We saw that everybody was clicking on the date picker, but we could not explain why.
After a recording some browsers sessions with Hotjar we found out that the date picker on some Android browsers was hidden underneath the search button. A big percentage of users couldn’t choose a date! After this change the conversions on the site improved by 18%. Heat maps can be a great way to spot bugs on your website!

4. Keep the juice “above the fold”

Scroll-Map- coversion -Pricing-PageThe “average fold” of your website is the magical line you shall not pass (cit.). Just kidding, of course you will need to use that area too. We know that by scrolling down just a few pixels you will loose a big, big percentage of viewers. All your important “action areas” should be above the fold.

This example has been created by tracking the vertical scrolling movement of 2000 users on a webpage.

What we can learn is that only people who need more time to understand your products and services are going to scroll under the fold, because they want to get more info. This means that we should get rid of all the distractions and put the juice on top!

5. A/B testing is the key

Almost all the previous points could never have been done without it. Conversion rate improvements most likely come along with A/B testing. You think something could be improved? try to create an alternative or two. Start testing it and try to include a heat map next time. This combination almost certainly can reveal something you would not expect!



These are my top 5 heat map services to get you started

1. Hotjar is a really precious tool, considering that can easily create a few heat maps at the time, download them and create more ..for free!
2. Sadly Crazy Egg is no a free service anymore, but you can get a free 60 day trial!
3. Mockingfish will help you combine A/B testing and heat maps, great service, free for one year.
4. ptengine is not as good ad the ones we’ve seen before, but, hey it’s free.
5. We have met one of the founders of EyeQuant and he explained us that it is not a common tracking service. Artificial intelligence predicts which parts of your design are most and least eye-catching, so you can make sure that your most important content is visible right away. Is it free? No, but it provides a great alternative to eye tracking services.

Buffer this pageShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Fabian Niederkofler

UX designer | The day has 24 hours, you just need to hustle | Golf addicted

1 Comment
  • Ven Hudson

    March 14, 2017 at 11:11 am

    Thanks for sharing blog regarding Heatmap tool.

Post a Comment

Let us contact you,
we’ll discuss your dreams.