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.

Ja, ich möchte bei Kommentaren benachrichtigt werden!

Loved KnowTes

• SEO: Create Advanced Sitemaps with A1 Sitemap Generator
• 20+ Amazing Video Apps for Twitter
• Create and Share Reviews Using New Adobe CS Review
• WordPress: Custom CSS stylesheets for Posts or Pages
• 100+ Brilliant Free Go Green Eco Friendly Vector Graphics and Icons
• Web Strategy: Get real-time comments built for the social web with Lifefyre
• What Does Google Wallet do for Mobile Marketing?
• iPhone App for Designer: Proportions Calculator by Erik
• Combine Wordpress, PHPBB and 4Images together without multiple user-registrations
• Facebook vs. Google: How Marketers Can Learn Out Of the Recent Smear Campaign?
• Social Media: How to Create Automatic If This Then That Tasks
• Selected Free Wallpapers That Rock - Volume 1
• 350+ Free eCommerce Icons for Web Design Projects
• Convert your Image To Vector Online For Free
• 80 Free Mobile Device Icons Including BlackBerry Special
• Free iPad Vector GUI Elements for Adobe Illustrator
• 56 Free Vector Arrow Symbols & Icons
• UI Inspiration: A Showcase of Beautiful User Interfaces
• Free Hand Drawn Social Media Icon Set as Vector for Bloggers
• 10 Awesome And Creative Google+ Brand Pages
• 20 Amazing Mobile Friendly Tips and Tools for your Website
• Icons: Free Social Media Icon Set With Bubbles
• Free Photoshop Case Templates For DVD, CD and Cassette
• Seven Big Mistakes Of A Twitter Addict
• 8 Free Brand Logo Download Websites You Should Know
• Styling Website Comments: Correct Markup and Free Examples
• Go Google: Socialize Your WordPress Blog without Using Plugins
• Brilliant 3D Flash Image Slider For Websites
• 35 Free Beautiful Japan Theme ICONS
• 125 FREE Oldschool Pattern Swatches for Illustrator
• How To Create a Retro Wallpaper
• 8 Heatmap Tools and Why / How to use them
• Introducing New RSS Generation - What is pubsubhubbub?
• 10 Hot Facebook Plugins For Wordpress
• 28 Free Twitter Background PSD Templates
• Impressive Ways to Present Your Portfolio or Media Files
• Mega Drop-Down Menu Inspiration
• 160+ Brilliant Web Design Templates & Tutorials
• 11 Hot Tips and Tricks to Speed Up Wordpress
• Semantic Wordpress - Automatic Semantic Metadata for Your Content
• 800+ Free HTML Newsletter Templates for Startups
• Hot Trends and Insights On Web 3.0
• How To Build a Clean Modern Website Design From Scratch
• Inspiration: What If Google Ruled The World
• Analyzing A Trademark Brand: Absolut Vodka
• Free iPhone Design Set for Photoshop
• 72 Questions to Ask New Web Design Clients
• How To Easily Move or Export Your Thunderbird Mails to Outlook
• How To Add License Free Images To Any website - PicApp
• Awesome Slideshow jQuery Plugin For Portfolios with SlideDeck
• Gpanion - A new google workspace with all your apps
• 17 Free Brilliant Photoshop Browser Templates
• How Workstations Of Designers and Bloggers look like
• Small and Accessible News Slider in JQuery
• Free Icons: Digg, Twitter, Stumble, RSS, Delicious & Reddit
• 20 web-based business collaboration tools that lets make you breathless
• Use A Body ID To Style Your Website In CSS
• How To Create A Webdesign Company Layout in Photoshop
• Old eMail - New eMail: Google ReNews Email Communication
• GIVEAWAY WINNERS - 3 x Fanurio Time Tracking License

Recommendation

• Business Cards from Betterprint
• Church Bulletins
• link building services

Community Links

• 20 Mind Melting Examples of Light Painting

  Photographers utilize their knowledge of the different colors produced by various lights, and how they interplay with white balance settings. Light paint brushes can be as simple as a flash light, laser pen, old lantern, or even off-camera flash combined with colored gels.

• KP Design

  Inspiration for all - photography, design, art, travels, and more!

• 30 Free Christmas Icon Sets for Designers

  Christmas is just around the corner and this is the time when designers need loads of different resources and material to design Christmas related themes,

• Domain Name Selection: How to choose the best

  To have an appropriate domain name is always the cause of worry for most website owners, the reason being, it is the primary step to ensure the success of a website or an online business. But there are several other benefits of having a right domain name such as it helps in effective marketing, branding, attracting visitors, building credibility, etc.

• 60 Remarkable Examples Of Typography Design #6

  It’s been a really long time since we did our last installment series of “Remarkable Examples Of Typography Design.” To be precise, the last post was way back in June, 2011. Christmas is right around the corner and many designers are using their creativity at a maximum expense.

• Make Forms More Usable With HTML5

  html5 introduces new form elements, new input types, and new attributes to help making building and using forms easier.

• Examples of Street Art and Graffiti Art

  With today’s collection, we aim to pay tribute to some of the best street art that will simply blow your mind away.

• Showcase of Beautiful iPhone Wallpapers

  Acknowledging the fact that the design and development community love to decorate their devices with stylish and classy wallpapers,

• Beautiful Tera Environment Concept Art & Character Design

  Developed by Korean game developer Bluehole Studio and published by Frogster who also manage Runes of Magic, these environments are breathtaking with some being just concept art and not the final version they show that the world will be beautiful. In addition featuring detailed character design I can not wait for the release of Tera next year.

• 25 Incredible Logo Designs Inspired by Plant

  Logos are the visual representation of the organizations and their businesses,

• How To Add Images To Your CSS Borders

  How to use css3 border-images, instead of generic styles, as borders around your elements.

• 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

KnowTeBook.com

• About Us / Legal notes
• Advertise here
• Archives
• Contact Us
• Publish here
• Publishing & Privacy Policy
• Subscribe

UserTalk

• спортни стоки: That gives me ideas what to do with mine. :)
• BestBit: Very interesting free tool, but if you have a big site, with more than 500 pages, you have to pay for it.
• andrew: cool
• Randy: I am thinking of using Lifefyre but maybe for now, I’ll use Disqus. I have a friend from peak...
• Niringalpha: Wow, this is soooooo cooool . Guy’s if ya want to seek out cool wallpapers , take a peek out...

Friends

• Business Cards Online
• Craig Farrall’s Blog
• CSS Built
• Design Inspiration
• Design Resources
• Design Tutorials
• Dezignus
• Flash Mint Design Blog
• Free Photoshop Brushes
• fudgegraphics
• Fuel Your Creativity
• Just Creative Design
• Logo designs
• My Ink Blog
• NaldzGraphics
• Onextrapixel
• Pelfusion
• Photoshop Girl Tutorials
• spidanet.de
• Tasarimini | Graphic Tools
• The most stylish websites
• Vector Pack
• Wallpapers
• Website templates
• Webtoolkit4.me

Random KnowTes

• Mobile Web Marketing - Ten Mistakes you should be aware off
• Resource of web design material at Spoono
• CSS: 40 Layout Variationen kostenlos
• Suchmaschinen-Optimierung durch Keyword-Optimierung
• Free Icons: Digg, Twitter, Stumble, RSS, Delicious & Reddit
• Free iPad Vector GUI Elements for Adobe Illustrator
• SEO: Optimierte Ping Listen für Webblogs erstellen
• Old eMail - New eMail: Google ReNews Email Communication