Heatmaps visualize the stream of visitors on your website – showing hot and cold click zones. They provide an overall view of the activity and helps you to see every mouse movement and every click. It will improve web usability, conversions and revenue. In this post you will learn where you can find free services or tools, how and why you should use them.
Reasons to use heatmaps
* See, where people don’t click and why. It helps to…
* Optimize landing pages
* Optimize link & advert placement
* Minimize shopping cart abandonment
* Maximize conversions of online forms
* Predict how visitors will use your site in the future.
* Simplify web usability testing
* Short: Find problems and fix them to boost your web project!
How to understand and use heatmaps
As an example we will take a look at PatioSigns.com. A heatmap overlay on the right shows the pattern of user behavior for the sample page on left. If you don’t know what all these different colors mean, don’t worry, we will explain it below.
 |
 |
Colors
As you can guess by naming in heatmap, the colors show the density of userclicks. Cooler colors such as blue and green get less clicks. Warmer colors get the most clicks.
The color key references the amount of participants whose eyes fixated on certain parts of the page. The red/orange/yellow areas are where the larger amount of the groupd looked most. The dark blue areas are where they looked least (Source: Poynter Online).
The red/orange color indivates that almost all subjects halted their gaze at that part of the page for at least a fraction of a second.
The yellow color indicates that more than half of all subjects haltered their gaze the part of the page for at least a fraction of a second.
Sometimes there is more used as colors to visualize the userstream. Crosses are used to represent a mouse click. A horizontal dotted line can represent where the page breaks on the computer screen. A red horizontal line can indicate how far down users scrolled before leaving the page.
Get on it and analyse
This isn’t as boring as it sounds. It is the most important and interesting part of analysis as I think, because it makes me breath faster if I see why people miss to click or do not see things I want them to see. I found a good walk through and what you keep in mind as you analyse.
Heatmap Tools and Services
Clickheat
A really good open-source tool which you can install on your server. No fees, full control!
Crazy Egg
A easy to use interface with nice effects like the confetti effect, a special kind of visualisation. There is a free plan, but you probably need to upgrade if you have more than 5.000 visits per month.
FuseStats
Free, simple, and effective way to manage and anaylize your website statistics. It inlcudes a easy-to-use HeatMapping technology that can be used on every page of your site.
Clickdensity
Real-time visitor tracking with different price plans (free for a small website).
phpmyVisites
A free and powerful open source (GNU/GPL) software for websites statistics and audience measurements including heatmaps.
Feng-GUI
Awesome online tool. Just upload a picture of a website up to 5MB and it will create a heatmap based on data collected on other websites.
WordPress Heatmap Plugin
Provides you with three new template tags for displaying a heat map in WordPress (V. 2.3 or newer). It is similar to colored cloud tags.
Conversionstats
A professional conversion tracking tool that enables you to get heatmaps as well. Prices start at $29.
Corunet. El blog
This is more for geeks. If you want to know how to make your own heatmap service, follow davids article. You can download the final code at the end of the tutorial.
