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
I use Clickheat on my website but i think Crazy Egg is more powerful…
Flag as inappropriateNice 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 inappropriateDesign is important. I saw when I designed a little bit. But Still my design is very unattractive compared to many sites.
Flag as inappropriateCannot someone give me good template for their ad!
uioioiu
Flag as inappropriateAnother 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 inappropriateasdasd
Flag as inappropriateExcellent post. Thanks29
Flag as inappropriateExcellent post. Thanks22
Flag as inappropriategreat tutorial . Thanks518
Flag as inappropriategreat tutorial . Thanks
Flag as inappropriateDavid,
Awesome article for the rest of us! Thanks for the great resources.
Flag as inappropriateOh 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 inappropriateGreat article.
Flag as inappropriateI hope they support flash content someday.
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 inappropriateNow i can monitor my website, and maintain it by knowing which kind of items are not really being clicked
Flag as inappropriateGreat 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 inappropriateAwesome 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 inappropriateThank you felix :)
Flag as inappropriateSweet tool. I am going to install this on my DUI website and see how it does.
Flag as inappropriateis it possible to heatmap a flash website?
Flag as inappropriateI have a new project for next week now, thanks.
Flag as inappropriateAwesome 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 inappropriatenice article David :) Thanx Again!
Flag as inappropriateGood 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 inappropriateTo 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@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 inappropriateThis 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 inappropriateGreat 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 inappropriateAbsolutely 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 inappropriateIt sad to realize that all the time spent on footers and making them as appealing as the header, and no one really uses it :(
Flag as inappropriategreat recommendations
Great tutorial! I’ve been considering using heatmaps myself and this article was just the motivation I needed to implement it.
Flag as inappropriateYay for web tutorials! I am excited about this section.
Flag as inappropriateYeah no point spending money when its not necessary !
Flag as inappropriateSetting 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
Great article.
Flag as inappropriateI’m in the middle of making a new website right now, so this should really help me when i eventually open it.
Thank you!
@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 inappropriateGreat 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