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.
9 Easy Usability Improvements for Blogs
A SEO Strategy You Shouldn’t Ignore: Be Helpful.
Interview on PSDFAN and More Awesome
What’s New at Tutorial9?
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!
@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.
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!
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
Yay for web tutorials! I am excited about this section.
Great tutorial! I’ve been considering using heatmaps myself and this article was just the motivation I needed to implement it.
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
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.
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!
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!
@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.
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
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.
nice article David
Thanx Again!
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!
I have a new project for next week now, thanks.