userfly.com from Chris Estreich on Vimeo.

Updates (+1):

• 2nd september 2008: added phpmyVisites

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.

Demo:

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.

At the end

I hope to have helped you to understand heatmaps and that your can improve your site or revenue. If you want to stay updated about more posts of this kind, why not subscribing to Knowtebook and get all information right in time?