When trying to optimize your website for conversions and user experience you need to know what your visitors are already doing, using heatmaps can give you that information. For those of you that don’t know, a heatmap is a graphical overlay of your website that shows you how people interact with it. Areas that your visitors click on the most often are represented using colors to represent heat. From cold blue to white hot and every color in between.

Heatmap Sample

Why do I need to use heatmaps?

1. What is your customer’s most important goal?

We have seen time and again that what we think is our customer’s most important goal is often not what we think it should be. When creating a list of featured jewelry items, or product categories, or even basic menu navigation, we start with what we think should be the most important items. A heatmap will give a visual cue about what your customers are actually doing.

Is there a product category that is almost never being clicked on? Maybe it should be replaced with a different category. Is there a Call To Action that is rarely clicked? Perhaps moving it somewhere else on the page will improve that CTA.

2. Are you confusing your customers?

A heatmap can show you where customers are clicking, even when there is nothing to click. In nearly every heatmap study we have done we have found areas on websites that were clicked enough to register as yellow or white hot, yet there is no action associated with that location on the page. This happens most often when you use a compelling picture that isn’t clickable, or place text that is clickable near and assume that the customer will find it. Having something that a customer thinks should be clickable not be, can discourage them and force them to move on to another website.

3. Do you have irrelevant information “above the fold”?

Part of a heatmap study is also a scrollmap, or how far down a page a person scrolls to find information. If your scrollmap and heatmap combine to tell you that many, if not most, of your customers are scrolling down your page to get to what they want, then you may need to consider a redesign. One of the biggest things we’ve found on repeated tests is that most viewers don’t care about that pretty image carousel at the top of the page. You know, the one that nearly every website has these days.

Hero Banner

Placing higher priority content above the fold may improve your conversion rates. Split testing and heatmaps work very well together in these cases.

4. Combine clickmaps with Event Tracking

Adding Event Tracking to the buttons on your website can tell you exactly how many people click on a button. Adding clickmap tracking to this can tell you how many people tried to click on that button. A recent study found that people over 55 failed at clicking a specific button on a website as much as 1.9 times as often as people under 25. A clickmap combined with event tracking can tell you if you are frustrating your customers with hard to use navigation elements.

Run your Own Heatmap Tests With These Tools

It is possible to set up your heatmaps with online tools. Here are a few that we have used in the past to get you started.

Crazyegg. Crazyegg is my default goto heatmap tool. It’s easy to use, very accurate, and not terribly expensive. It can handle large volume sites easily.

Clickheat. Clickheat is part of the SumoMe family of marketing tools and you can try it out for free.

Mouseflow. Mouseflow is a little more expensive than the previous two tools, but it also handles mouse movement tracking. This gives you an extra layer of data to look at.

When it comes to website design it’s important to design for your customers and not your web designer or your own personal taste. There are a lot of “standard practices” when it comes to good site design, but like every other aspect of your business, you should be testing everything to make sure that you are maximizing your potential results.