Heatmaps are graphical overlays of your website which points out what content is hot and what not. This is the third part of the article about the heatmaps and alternatives for Crazy Egg. If you have any other suggestions, please let me know or drop a comment below.
This tool does look nice, which you can see for yourself on the website of Patrick Wied. With only javascript and the HTMLCanvas element it generates a beautifully designed real-time heatmap.
Although it looks great, it does come with a minor issue. It’s possible to save the precious data but for now you can only extract it from the biggest alert message I have ever seen, maybe useful for technicians but not for me.
Don’t forget that this concept is still in an early stage but I think this has some real potential in becoming more than just an experiment because of Wied’s approach and the simplicity of his solution. Looking forward in seeing more of it.
In this post I tried to make a small summery of really cheap or free heatmaps. Whatever your choice will be, you have to be carefull with heatmaps. Most of them make a connection with the help of Javascript (from the client-side) to the webserver for every click made by a certain visitor. This can interfere with the performance by slowing down the system. A possible solution is to activate the recording of clicks when a low number of people are visiting your website. You’ll have to test it over a longer period of time because of the sheer number of people, but at least they will enjoy your website at full speed.
All heat maps mentioned in this article work more or less the same. You add a bit of javascript to your pages, log into their website and locate the necessary heat maps you wanted to have a look at.
Heatmap.me works a little bit different than that. Sure, you still need to add javascript, but instead of navigating to the Heatmap.me website and login, you simply browse to your own website. By hitting Alt+Shift+H, a little widget appears on top of your page in which you can activate the heatmap view or initiate the tracking itself.
It’s simplicity really strikes me, but I do have some concerns about Heatmap.me.
The next heat map is provided by Feng-Gui, which has a free service for simple heat maps. Feng-Gui (so they claim) forsees human’s attention and attraction, simply by uploading a screenshot. This method doesn’t track any mouseclicks but the heatmap is generated by an algorithm, which is fabricated by the results of numerous neurologic studies. Other data sets being analyzed:
To make sure this algorithm stays intact, Feng-Gui compares the results with actual eye-tracking methods. Personally I think that these results are based too much on assumptions, rather on bulletproof evidence. Although the algorithm is continuously being checked by comparing it with actual click tracking results, I’m still not sure about its results, which is why I have given it such a low score.
One other point: you can only upload one screen shot every 5 hours when using the free version.
SumoMe was recommended by one of our readers. SumoMe is easy to install and works with a small widget, which is placed on top of your pages. SumoMe offers several apps in the Sumo Store, which you need to install in order to activate them. The apps are divided into the following categories:
All of these apps, with the exception of the paid upgrades, are free to try out. Of course there are some restrictions. In case of the heat maps, you have a maximum of 1000 clicks per page.
I have noticed a bigger flaw as well. The heat map also registers the clicks made in the widget itself, which doesn’t make a lot of sense. Clicks from my IP address should be ignored anyway. One of our readers has found out that you can turn of tracking for internal users in SumoMe’s system. It is not checked by default though so you need to switch it on.
Personally, I find it difficult to use as well. Fair enough, I have only tried the heat map app, but the widget, the different apps and interacting with its interface is just too complex. Therefore, I would not recommend this tool.
Heat-Map.co works very similar to Feng-GUI. It doesn’t use actual click behaviour to generate the heat map, but an algorithm. Just as with Feng-GUI, I highly mistrust these results.
You have two options, either track the URL of the website or you upload an image. When going for the URL option, you need to give the viewport dimensions (width and height). First of all, not everybody knows that by heart. Secondly, what with responsive designs?
I made a heatmap of my homepage, which you can see below. Maybe a few examples why I don’t trust these results. The heatmap shows that most clicks happen on the title of the article. That is actually correct. My guess, however, is that this is caused by the H2 title tag and the fact that it happens to be clickable.
Actual click events, which are reported in Google Analytics, show me that a good number of people click on the “Continue reading” link as well, which isn’t shown here in the heat map.
A second example is to be located in the sidebar: Popular UX Books, Popular Articles, Newsletter Subscription and UX Related Resources. According to this heatmap, people are clicking on the bold text. Again, Google Analytics is telling me otherwise.
One last example is to be found in the main navigation. According to the heatmap of Heat-Map.co, people are not using it at all. Once again, Google Analytics shows that “Home” and “UX Books” are clicked more often than the logo.
A heat map of my homepage, generated by the algorithm of Heat-Map.co.
More heat map tools will be added to this post as soon as we have tried them out.
The EU's General Data Protection Regulation (otherwise known as GDPR) went into effect on May…
Google stunned the world with a great piece of artificial intelligence! Oh boy, were we…
If online shopping was the same as real-world shopping then everything would be straightforward for…
Starting or progressing your career in UX? If you're not already up to date with…
We tend to go around money a lot less rational than we might think. By…
Good copy writing is to UX, what salt is to soup – it's not just…
View Comments
Very accurate job!
Another solution to avoid performance issues, could be to have a separate server just for heatmap.
What do you think?
P.S.
I didn't know CrazyEgg has got commercial, damn!
If the cost-benefit ratio was ok, then this would be a great solution... but only for those websites which attract a lot of visitors. More visitors means more clicks to be recorded, so they would certainly benefit of a second server.
great post, thanks kindly
You're welcome Dave!
I am new to the world of web analytics and i think the functions are unbeleivable. I have an online private business and it has always been so frustrating to me how i could not observe the activity of my customers. I came accross ClickTale analytics on a similar blog and i tried out the free option offered and my eyes have been opened. I now feel confident to adjust my website according to the behaviour i can see in the videos and all the heatmaps. Its so simple and so effective, I wish i had found it earlier.
@Steve Mann: Thank you for the comment Steve. Since a few weeks now I've been testing ClickTale as well. I'll let you know my findings as well.
Hi, I found your page when i was searching Google for sites related to this article. I have tell you, your site is good. I like the design too, its nice. I don't have the time at the moment to fully read your website but I have noted it and I also registered for your RSS feed. I will be back in a day or two. Thanks for a great website.
@ArticleDirectory: And thank you for the nice comment! Hopefully you like the rest of the website as well. :)
Love the list thanks so much.
Regarding clickheat - I installed it on the checkout pages of a store to see how people used the page.
A while later the site owner complained that when he viewed the checkout pages he got the IE 'this page contains secure and insecure content' error, and he worried that this was reducing the conversion rate. I checked and checked and checked again, and I couldn't find any non-https images.
Eventually I finally realised what was happening - it was the clickheat script that was the insecure content on the https page!
@Stuart: Hi Stuart, nice to hear that you like this list and thanks for your interesting comment. I've been using Clickheat sporadically for a few months now (actually only used it to write this article and test it a bit) and I never crossed this IE error message before. The implemented code from Clickheat seems a bit aggressive and maybe a good thing to keep it out of the secure checkout pages. I can imagine that the CR dropped down a bit because of this message, but maybe you can switch to a less intrusive package.
Although I find Clickheat's system interesting (follow the mousemovements of the visitor), I prefer to use A/B testing in checkout pages to increase the CR.