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.

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?

Name (required)

Email (required)

Website

Note: You can also use your free Gravatar avatar on Knowtebook! Please also read our Publishing Policy before posting.

Yes, I would like to receive notification on incoming comments!

LovedKnowtes

• Pattern Freebies: 26.000+ Free Photoshop Patterns for any use
• Graphics: 15 000 free high quality icons
• Community Link Feed
• Graphics: 9 Free Vector PNG Icons
• 8 Free Brand Logo Download Websites You Should Know
• Graphics: 66 free logo vector templates for your business
• Free Simple Wordpress Portfolio Theme
• Free Design Portfolio Theme for WordPress: ImPress
• Free Wordpress Theme for Designer and Portfolio Websites
• How To Promote Your Posts in 10 Minutes to 1 Mio People
• 35 Free Beautiful Japan Theme ICONS
• 34+ free HTML newsletter templates for startups
• Cool Business Cards That People Will Never Throw Away
• 8 Heatmap Tools and Why / How to use them
• 148 free beautiful vector graphics for web and print
• Free iPhone Design Set for Photoshop
• The Most Stunning Viral Ad Campaigns Ever
• 56 Free Vector Arrow Symbols & Icons
• Free Photoshop Case Templates For DVD, CD and Cassette
• Free vector brand logotypes in CDR, EPS and WMF formats
• 20 web-based business collaboration tools that lets make you breathless
• Creative Online Ad Design: Ideas & Trends in 2008
• Graphics: Great Free Icons & iphone Wallpaper at Pixelgirl
• Convert your Image To Vector Online For Free
• Free Brilliant Website Chats and Why / How to use them
• Graphics: 2000+ Open Source Web Templates
• CSS: How to make a footer which really stays on the bottom
• Free iPhone style Photoshop Icons
• Most Awarded Advertisements in 2008
• Free Vector Graphics at Vecteezy
• Free Icons: Digg, Twitter, Stumble, RSS, Delicious & Reddit
• PDF-Dokumente kostenlos aus Microsoft Word, Excel oder Powerpoint erstellen
• Freebies: Twitter Bird Icons & Illustration
• SEO: How To Create a Google Sitemap in 5 Minutes
• Graphics: Free Smashing Vector Icon Set - Milky
• Create a realistic Credit Card in Photoshop
• 6 Awesome Wallpapers for PC, MAC and Iphone
• 25 graphic resources for ornaments, fleurons, and more
• Freebies: Creative Twitter Themes
• What's better? Ruby on Rails vs. PHP
• 1.000 More Free High Quality Icons For Download
• Graphics: 15 Free Outstanding Icon Sets for iPhone
• CSS: How To Hide Headlines For Better SEO Effects
• CMS: Open source php cms without database
• Brilliant Ways to Style Blockquotes
• Free Unique WordPress Magazine Theme: ZinePress
• CSS Revolution - Use Condition Rules WITHIN Styles
• Combine Wordpress, PHPBB and 4Images together without multiple user-registrations
• Tutorial: How to make Professionell Glossy Web 2.0 Graphics
• Graphics: Free Web Development Icon Sets
• Von Word zu PDF kostenlos in 3 Minuten
• Interesting Sites
• Ambient Media Premium Advertising Inspiration
• Self-Marketing: Outstanding Portfolio Ideas in 3D
• 100+ Free Photoshop Actions at Erics FX
• CSS: Ãœberschriften durch Bilder ersetzen
• Free Maps Of All Countries and States On the World
• CSS Freedom - Redesign HTML Form Elements As You Like
• How To Create a Retro Wallpaper
• CSS: 7 Free Perfect Multi-column Liquid Layouts

Recommendation

• Free Wordpress Themes
• Dish Network
• 365° Marketing | mediaplana

Community Links

• 70 Impressive Painting Artworks - Winter Inspiration

  Where do mixed media artists find inspiration in the winter? We have hand-picked an incredible amount of amazing painting artworks from deviantart to inspire any artist

• Six Thinking Hats

  Applying the Six Thinking Hats method can greatly improve our web design process.

• 3 Methods To Exclude Wordpress Categories In A Post

  Although there are a lot of methods to exclude categories on your articles or sidebar. But i am going to show you 3 methods which commonly use by people.

• Marta Dahlig - digital painter

  Marta Dahlig is one of the most known deviants on deviantart.com with nearly 4 milion views on her profile and who knows how many on all her deviations. She is known for her 7 deadly sins drawings of women.

• Web Designs with Coffee Aroma

  The stimulating collection of Top Coffee Brands websites!

• Bible Design

  Illuminated Manuscripts to Postmodern Power Plays

• 45 Vintage 'Space Age' Illustrations

  An inspiring collection of 45 vintage illustrations of a space age tomorrow!

• 8 Wrinkled Paper Textures | Texturise

  8 assorted wrinkled paper textures scanned at 300 DPI.

• Red themed CSS and Flash design gallery - Part 1

  I’ve decided to make the web design showcase themed as it is more easy to find what you are looking for. You will be surprised but there aren’t many quality red CSS and Flash sites. But don’t worry. I’ve gathered in this showcase article 22 of the best, and 23 more are waiting for the release of Part 2 so they can show off their red design.

• Typography resources for all things typographic

  Here are a few resources I have bookmarked along the way that relate to inspirational galleries, fonts, tips and other type resources.

• 10 Blender 3D tutorials worth a look

  Blender is the free open source 3D content creation suite, available for all major operating systems under the GNU General Public License. I have always wanted to learn a 3d program to extend my capabilities and a little 3D in our designs can take your designs to another level. There is no harm in learning something new so I will list a few good tutorials that I will use to learn my way through blender.

• web 2.0 templatesWeb 2.0 templates with simplicity, cleanliness, and elegance in design and the less number of columns and work great for all your needs and have all the great features of Web 2.0 technology.

Subscribe to RSS | Submit a Link

Knowty Links

• About Us
• Advertise here
• Archives
• Contact Us
• Publish here
• Publishing Policy
• Subscribe

UserTalk

• 3wlink: Hi, I was looking for exactly this code. Thanks a lot for the nice and excellent solution.
• The Palermo Project: again, web analytics play a central role thanks to these tools- questionnaires, audience...
• kovilen: That’s a great list, Thanks!!!
• Heru: It’s a very fantastic design,,
• CrazyLeaf Design Blog: JvM has launched a new advertisement campaign for SIXT on the airport of Hamburg (Germany)...

Friends

• Craig Farrall’s Blog
• Dezignus
• fudgegraphics
• Fuel Your Creativity
• Just Creative Design
• My Ink Blog
• NaldzGraphics
• Realwebmaster.net
• scripthosting.net
• spidanet.de
• Store 64
• tutorialzone.de
• Webtoolkit4.me