Did you know that heatmaps are great for getting an overview of how visitors behave on a landing page or website? The more we understand the users, the better the design will be and hence, the website goals will be met. To my surprise many designers have never even looked at a heatmap to help them with web design and/or UX.
Heatmaps help you in analyzing your UX, ad placement, link optimization, minimizing shopping cart abandonment, and plenty of other things. It helps you identify the areas of interest that attracted people the most on your webpage in contrast to those areas which did not interest people. It is easy to implement the software like Crazy Egg or Clicktale by simply putting a short snippet of code on the page you want to analyze for 30-60 days (or as long as you can) and the software will do the rest.
The Click Tracking Heatmap
Where do people click? With this method, you will develop a better understanding of how visitors are viewing your website and what interest them. Moreover, it will enable you to create customized analysis areas of interest on your website and help you to visualize their clicks and movement.
Scroll Tracking Heatmap
How far do your visitors scroll down a page? This makes it easy for you to determine how far visitors go down on your webpage to understand if your content is getting read/viewed or where to place your ‘call to action’ button. You can see by color how long people are interacting with your content or not.
This is an interesting case study from Siddharth Deswal.
Case Study: Heatmap shows that the navigation bar is a distraction
Pair (an app for couples, now rebranded as Couple) had a simple landing page where visitors could download the app or go to their Blog, Help and Jobs pages. This is the original page (click to see larger version)
Lim Cheng Soon, the growth hacker at Pair, decided to run a test on the homepage using tools in which he recorded the heatmap from visitors.
Lim explains what he did after that:
“Turns out, I found out too many people click on the navigation bar on the top instead of clicking the conversion button (link to AppStore and Google Play). So I made up a theory that having too many “distractions” around the conversion button wasn’t such a good idea.
So I do a couple of A/B tests based on the theory of removing the “distractions” around the conversion button. Such as hiding the navigation, hiding the social sharing button, hiding the “Download for Free” text. I even do “counter theory” test as to prove my theory wrong by having a larger “Download for Free” text.
And turns out, my theory was almost correct:
Hiding “Download for Free” text above the button gave a 10% increase of conversion.
Hiding navigation menu gave a 12% increase of conversion.
Hiding social sharing icons (facebook, twitter) wasn’t so good, a 34% decrease in conversion.
Having a larger “Download for Free” text (my counter theory) gave a 42% decrease in conversion.
Based on the result of A/B testing, I did a new version of a homepage for split testing by moving navigation menu to the footer (instead of header), hiding the “Download for Free” text, but keeping the social sharing icon intact. And the result? 25% increase in conversion. Win!”
Conclusion:
Heatmaps have provided us invaluable insight into the subconscious mind of the web user. They’ve taught us the best places to place important content, including
Above the fold
On the left-hand side
In the first two paragraphs
In the area where your models’ eyes are looking
They’ve also taught us where NOT to place important content:
In typical ad locations (like the top banner and the right margin)
In animated header format
Heatmaps have taught us what our web content should look like:
Short and sweet if in e-mail format
Emphasized, so people will pick it in a hurry
Visual for men and informational for women
Similarly, there are Google analytics that will give you a lot of traffic information but will not identify why visitors are leaving your page. On the other hand, your objective might be to get people to whatever your “call to action” is, so it must possess a great UX and with appropriate keywords so people react to the design positively.
Give Heatmaps a Try
Heatmaps are just one wonderful way to improve your UX, design and conversions. They identify users’ behavior and understanding, what’s behind it, and help you in establishing your best and most appropriate design to meet your website goals.
I think the design community is catching up to this over the last few years but I have talked to a number of people who have never used a heatmap for anything. I have been a big fan of using them upfront in the design process to better understand the users so we can create better webpages that convert more leads, sell more products, and better tell the story. You should think about using heatmap information before starting on your next new web design! They are easy to understand and give you more ways to understand your users’ behaviors.
