Sign In  |  Join Now Become a member to add links and start earning points!

Using Click Heatmaps to Understand Your Viewers

While there are some quick & easy solutions for making our websites more usable, not everything can be made clear through standard analytics programs overnight.  One way to accurately visualize how our visitors use our sites is through the use of Click Heatmaps.

What’s a “Click Heatmap”?

A click heatmap is a visual piece of data that shows where viewers are clicking on your website — and as the title suggests, shows more ‘heat’ in areas that are clicked more.

They’re useful for many reasons, some of which include:

  • Knowing exactly how a viewers uses a specific page.
  • Seeing which parts of a page are unused.
  • Seeing parts of a page that are most used.
  • Understanding patterns of use on your site as a whole.
  • Predicting how visitors will use your site in the future.
  • Using that insight to better cater to your viewers.

Where can I get a Click Heatmap?

There are several services out there that provide wonderful heatmap applications (my personal favorite would have to be CrazyEgg, which delivers lots of useful features in a beautiful package) but ClickHeat is the one I find myself using most often… and it’s free.

ClickHeat is installed on your own server, and can be used on unlimited pages, and track unlimited data (provided your server will allow it — it can hog resources, so be careful).  The installation is very simple, and should start gathering accurate data in no time at all.

Now What?

You should let ClickHeat run for a good amount of time before analyzing the data.  You could adjust your site based on how 50 people use it, but wouldn’t it make more sense to see how 1,000 viewers used it?  10,000?

Once you have a nice sized data group, spend time observing how your viewers are using your site.  I like to actually print out my heatmaps, and make notes on paper to have something in front of me when making adjustments on my site.

Keep these in mind as you analyze:

  • Areas that see very few clicks can probably be removed.  If your viewers don’t find it to be important, it could be more of a distraction and hindrance to them.  Consider removing such elements, or even replacing them to see if different use of that area may lead to more interest in your sites content.
  • Look for Clicks that don’t lead anywhere.  If you notice patterns in users clicking in areas that are not links, you may be confusing them, and once again slowing them down.  Consider making those areas links, or removing them altogether.
  • Observe areas that get LOTS of attention.  These are the parts of your site where you should be spending most of your time on (In terms of polishing and content development).
  • Observe areas just after content to see if your viewers are led anywhere else.  If you don’t see any clicks after your content, it could mean that your viewers have hit a dead end, and have no where else to go.  Try to turn your endings into new beginnings.
  • Compare clicks above the fold to after the fold.  The results may be shocking to you.

Redesign

With some good notes jotted down, you probably can already see a few things that might need improvement.  There is no sure way to fix problems on any given site, but there are a few good rules to keep in mind during the design process:

  • Usability is a lot about direction.  You want to give your viewers a direction — guide them to where you want them to go.  Too many choices, and you’ll confuse them.  Not enough emphasis on the right choices, and they might get mislead.
  • You’re job as the designer is to maximize interest in the site, while at the same time maintaining usability.  Try to balance the aesthetics with the function.  Areas that deserve more attention might deserve some highlighting in the design.
  • Your users probably think above the fold.  You should too.  Move elements in your design that you want your viewers to notice to a location that will be immediately visible to them.

Adjust as Needed, and Test Again

Your website will never be perfect.  If I’m wrong and your website is perfect, there is nothing I can show you that you don’t already know, so you might as well leave.  Remember that just because you make changes to your site doesn’t mean you’ve solved all your problems.  Chances are, you’ve solved some usability issues, while creating new ones.

Retest your site after making any improvements.  Check to see if your adjustments improved the user experience, and also check to see if those improvements are reflected in your statistics programs (Such as Google Analytics).

We may not be able to make the perfect website, but we can at least always strive to make our websites better.

46 Comments

  1. Add point Subtract point
    Pret immobilier (2 Points) September 6, 2010 at 5:50 pm

    I use Clickheat on my website but i think Crazy Egg is more powerful…

    Flag as inappropriate
  2. Add point Subtract point
    Jason (1 Point) May 18, 2010 at 8:12 pm

    Nice post David. What features/benefits are most important for you in heatmap applications (aside from being free)? We’ve developed a free client side heat mapping product – http://www.picnet.com.au/met

    Would be great to know your thoughts.

    Flag as inappropriate
  3. Add point Subtract point
    Satya Prakash (0 Points) April 23, 2010 at 8:13 am

    Design is important. I saw when I designed a little bit. But Still my design is very unattractive compared to many sites.
    Cannot someone give me good template for their ad!

    Flag as inappropriate
  4. Add point Subtract point
    Easy Street Interactive (1 Point) February 9, 2010 at 3:19 pm

    Another great tool to anticipate eye tracking is attention heatmaps. They are 75% as accurate as eye tracking solutions made for small businesses. If you would like a free sample heatmap, contact us.

    Flag as inappropriate
  5. Add point Subtract point
    เพลงใหม่ล่าสุด (0 Points) February 2, 2010 at 11:29 pm

    Excellent post. Thanks29

    Flag as inappropriate
  6. Add point Subtract point
    เพลงใหม่ล่าสุด (0 Points) February 2, 2010 at 3:35 am

    Excellent post. Thanks22

    Flag as inappropriate
  7. Add point Subtract point
    ดาวน์โหลดเพลงฟรี (0 Points) February 1, 2010 at 5:18 am

    great tutorial . Thanks518

    Flag as inappropriate
  8. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) January 30, 2010 at 11:37 pm

    great tutorial . Thanks

    Flag as inappropriate
  9. Add point Subtract point

    David,

    Awesome article for the rest of us! Thanks for the great resources.

    Flag as inappropriate
  10. Add point Subtract point

    Oh my god, this is revolutionary!

    This will help EVERY single website!

    I’ve never seen this and now I have, it changes all the thoughts in my head and this will improve every site!

    Flag as inappropriate
  11. Add point Subtract point
    Thiago (1 Point) June 16, 2009 at 7:12 am

    Great article.
    I hope they support flash content someday.

    Flag as inappropriate
  12. Add point Subtract point
    Claire (1 Point) May 13, 2009 at 4:04 am

    Well, i have not ever heard of this until now. What a fantastic idea to use. I have downloaded it and am hoping to install it later. It does say html pages – does it also work on php pages?

    Flag as inappropriate
  13. Add point Subtract point
    huwaw69 (1 Point) April 23, 2009 at 9:08 am

    Now i can monitor my website, and maintain it by knowing which kind of items are not really being clicked

    Flag as inappropriate
  14. Add point Subtract point
    HipHopMakers (1 Point) February 3, 2009 at 7:34 pm

    Great Post. I just recently signed up for the basic crazy egg plan. and I ran my first test, I found the information to be interesting. People weren’t clicking what I thought they were clicking. So now I have been working on making some changes to my home page. Great post

    Flag as inappropriate
  15. Add point Subtract point

    Awesome article I found it very useful and am installing crazy egg on my server ASAP ha by the way I love the design of the site it is very aesthetically pleasing, keep up the amazing work!

    Flag as inappropriate
  16. Add point Subtract point
    Michael (1 Point) January 15, 2009 at 1:29 am

    Sweet tool. I am going to install this on my DUI website and see how it does.

    Flag as inappropriate
  17. Add point Subtract point

    is it possible to heatmap a flash website?

    Flag as inappropriate
  18. Add point Subtract point

    I have a new project for next week now, thanks.

    Flag as inappropriate
  19. Add point Subtract point
    Michael Rice (1 Point) August 27, 2008 at 8:29 am

    Awesome little article there David, will be using it along with my Analytics account to improve one of my sites and introduce some more features!

    Flag as inappropriate
  20. Add point Subtract point

    nice article David :) Thanx Again!

    Flag as inappropriate
  21. Add point Subtract point
    missionsix (1 Point) August 19, 2008 at 3:44 am

    Good article David. I’ve used crazy egg but I’ve found the service to be a bit slow. I’ll be sure to check out the server side one soon once i release the next iteration of my website.

    Flag as inappropriate
  22. Add point Subtract point

    To everyone else, I’m very happy that this was our opening tutorial in our Web Tutorials Category. Really hope you’ll stick around for more! We’ve got an easy way to subscribe via Email or RSS if you’d like the latest updates sent directly to you ;)

    Flag as inappropriate
  23. Add point Subtract point

    @Tom Sinclair: We’ve reduced the price to something a bit more affordable now. Thank you for your suggestion. That’s one of the aspects of Tutorial9 that we’re still working diligently on. The better product we can offer advertisers, and more sponsors we can maintain, the fewer ads within Tutorials we’ll need to run :)

    Ads are good, but I’d like to sell our inventory directly to sponsors 100% of the time in the future to keep things tidy.

    Flag as inappropriate
  24. Add point Subtract point

    This is the sort of process that really moves the game forwards, in my view. It’s simple to implement, and gives meaningful feedback on how the web is used.

    Excellent stuff!

    Flag as inappropriate
  25. Add point Subtract point

    Great article! I’m definitely going to use this, since I’ve been looking for this for a long time! I didn’t design my site, I kinda got there when site was already 2 months old, but I’m in a process of re-designing and hopefully this will help my redesign adventure!

    Flag as inappropriate
  26. Add point Subtract point
    George (1 Point) August 16, 2008 at 3:27 pm

    Absolutely amazing! Not only did you bring heatmaps to my attention for the first time, you gave us more than one service to pick from. ClickHeat was very fast and painless to setup. Only took couple minutes. It’s so worth it. Thanks David.

    Flag as inappropriate
  27. Add point Subtract point

    It sad to realize that all the time spent on footers and making them as appealing as the header, and no one really uses it :(
    great recommendations

    Flag as inappropriate
  28. Add point Subtract point
    Philadelphia Internet Marketing (1 Point) August 16, 2008 at 12:31 pm

    Great tutorial! I’ve been considering using heatmaps myself and this article was just the motivation I needed to implement it.

    Flag as inappropriate
  29. Add point Subtract point
    Matthew (1 Point) August 16, 2008 at 12:22 pm

    Yay for web tutorials! I am excited about this section.

    Flag as inappropriate
  30. Add point Subtract point
    Tom Sinclair (1 Point) August 16, 2008 at 12:20 pm

    Yeah no point spending money when its not necessary !
    Setting that up early next week and get some advertisements going to track people and see what they think!
    You need to make your medium sized adverts cheaper :P

    Flag as inappropriate
  31. Add point Subtract point
    Dominic Dale (1 Point) August 16, 2008 at 11:55 am

    Great article.
    I’m in the middle of making a new website right now, so this should really help me when i eventually open it.
    Thank you!

    Flag as inappropriate
  32. Add point Subtract point

    @Tom SInclair: The free “Clickheat” heatmaps are just as powerful of a tool as Crazy Egg in my opinion, so there isn’t too much sense in getting Crazy Egg. I suppose they do have a few extra features, and it looks prettier — but hey, better to save cash when possible right?

    I guess Crazy Egg would make the most sense to companies that want to automate more of the analyzing process. It does make it easier, and it’s more nicely packaged for sharing reports.

    Flag as inappropriate
  33. Add point Subtract point
    Tom SInclair (1 Point) August 16, 2008 at 11:14 am

    Great short article!
    Was looking at heatmaps last week but didn’t take it further as I assumed it would be a pay only service! Going to download the free one now and get it installed for a new website thats nearly ready go go live

    Thanks a lot!

    Flag as inappropriate