Using Click Heatmaps to Optimize Web Design
How Heatmaps Work
To generate a heatmap, a script must be installed on each page you want tracked. In web analytics terminology, this method is referred to as “page tagging”. In addition to other web analytics data (page views, links, referrers, etc), the script collects X and Y coordinates each time a user clicks. A heat map program then aggregates the data from all users and displays clicks through an overlay on each studied page. A legend (typically visualized as a spectrum) is included to show the ”hot” (and cold) areas of a page.
Heatmap Variations
Eye Tracking
Being able to track a user’s eye movement is very valuable as it provides insight into how the user is processes information. However, collecting this information requires a recruited participant, a lab environment, special software and a test faciliator. While useful, the ability to aggregate data consistently from users who are self-motivated to perform a test in large numbers is very expensive.
Vertical Scrolling
ClickTale provides a heat map of how far down a user scrolls down the page. I don’t find this information terribly enlightening, but there is value in understanding how much content a user will consume.
Total Mouse Tracking
This is my personal preference. Total mouse tracking collects not only mouse clicks, but mouse movement and activity as well. By studying the heat map of aggregate mouse paths and clicks, one can determine if or where users are having trouble.
Why You Should Use Click Heatmaps
Your website has a at least one goal - whether it’s to communicate information, get users to register or get users to purchase a product. Each page on your website contributes to users achieving that goal. By using heatmaps, you can optimize a user’s propensity to reach the goal(s) you have for your website.
Embedding calls-to-action, say a register button, is one way to help your users acheive the goal of registering on your site. Heatmaps provide visibility to competing calls-to-action or confusing page elements which detract from users completing your site’s goals. By increasing the size or position of the call-to-action, or by removing or reducing the attractiveness of competing actions, one can improve your site’s conversion rates.
Free and Inexpensive Heatmap Solutions
I’ve compiled a list of heatmap solutions that are either completely free or are inexpensive with a free trial. I highly recommend testing one out to see for yourself how heatmaps can work for you.
ClickHeat
This solution is free free free. However, you must have access to your servers to install it. I personally use ClickHeat for both by own site and my clients’ and have included mods for Total Mouse Tracking. I’m aware of a report that the installed code may include cloaked links which google’s search engine frown upon. Whileve I’ve not personally experienced this, it should serve as a warning before installing the software.
Click Density
Click Density is very easy to implement and works well as an excellent alternative to google analytics for an SMB web analytics solution. A free 30 day trial is available.
Crazy Egg
This is another software as a service provider and their solution is also very easy to implement. The user interface for the dashboard rocks and they have a Confetti feature that you have to check out!
FuseStats
I have not implemented FuseStats, but they seem to have a solid product.
The Definitive Heatmap by Corunet
Note: The installation instructions aren’t well documented.
ClickTale
ClickTale’s forté is in recording visitor sessions and provide the vertical scrolling heatmap discussed above.
VisiStat (added 01.09.08)
Didn’t realize these guys had heat maps. I’d certainly give this one a try.
Chalkmark
I also want to highlight a solution that combines heatmaps with surveys. This solution allows you to upload screenshots and ask questions to users visiting your online prototype. Clicks are recorded and heatmaps are generated. No code implementation required - just upload screenshots, ask questions and send to your participant list.
Feng Gui
The heatmap generated from Feng Gui isn’t actual, but inferred. It basically uses artificial intelligence to simulates human vision during the first 5 seconds of exposure to visuals. No implementation is required and it’s free!
Final Note
There are several heat maps solutions available to help optimize your site. Feel free to contact me at lana@obzervant.com if you need help or advice on the best tool for your specific needs.