How to Use Heat Maps to Maximize Your Site’s Success

As a website owner, there are tons of tools out there designed to give you more information about the people who visit your website.  From Google Analytics’ deep tracking tools to the real-time data updates provided by sites like GetClicky or Chartbeat, it’s easy to get the information you need to make informed decisions about improvements to your website.

However, one of the most overlooked site analytics tools out there is the heat map – a fun way to visualize different types of data, including where people’s eyeballs first land on your site and how likely your visitors are to click on different areas of your pages.  If you’re interested in learning as much as possible about your visitors’ behavior, studying the data provided by heat maps is an absolute must!

But before we jump in, it’s a good idea to familiarize yourself with the different types of heat maps that can be used to drive decisions about your website’s design and content.  Each type offers a slightly different set of information, so if you’re interested in one type of data over another, you’ll need to be sure your chosen heat map tool provides that specific type of visualization.

Consider some of the following types of heat map when adding this analytics element to your site:

Click Heat Maps

The image to the left is an example of a click heat map, which shows the exact locations where visitors’ cursors clicked on this sample webpage.  From the concentrated areas of blue, we can determine which links and images were most likely to draw each reader’s attention, as well as which secondary pages seem most interesting to readers.

This type of information can be especially useful in showing you where to place your most important links, as well as which elements on your site should be linked.  In this case, if the large solid-colored boxes on the right-hand side of the screen were simply graphics (not navigation elements), the site owner might use this information to decide to make these items clickable.

Scroll Heat Maps

On a website, information that does not immediately appear in the initial screen view when a site first loads is referred to as being “below the fold.”  In general, this information is viewed far less frequently than content that appears above the fold, but a scroll heat map will tell you exactly what percentage of your audience is reaching these lower portions of your page.

For example, say you had an opt-in form on your website that encourages visitors to sign up for your email list in order to receive a free coupon.  If your opt-in form was located in a lower section of your website below the fold (as indicated by the lighter pink band in the image above), a significantly smaller number of people would see your form than if you simply bumped it up a little on the page.

In this particular example, as shown in a case study by Referral Candy, only 56% of viewers on this page reach the middle pink band.  By bumping the opt-in form up a small amount into the top tier, it would be seen by 77% of all visitors to the site.

Mouse Movement Heat Maps

Another interesting type of heat map to consider is a mouse movement or eyeball tracking study.  Essentially, these heat maps show where visitors are most likely to look on a site – either by tracking where users’ cursors hover or by extrapolating where a viewer is most likely to look based on past data.

This type of heat map can be extremely useful to internet marketers, as they help to determine the ideal placement for any promotional information.  In the example shown at left, imagine how a sales promotion would perform if it were justified to the right side of the screen versus the upper left-hand corner.  It’s pretty safe to say that sales messages positioned directly under the solid red dot shown in this heat map would result in more sales or conversions.

By now, you should be able to see a few opportunities for using heat maps to drive decisions about your site’s content and design.  But how do you get started?

Well, to harness the awesome power of heat maps, you’re going to need a tool that ties in to your site and analyzes your visitors’ behaviors.  Unfortunately, there aren’t many free tools that offer high quality heap maps, but there are plenty of reasonably priced programs to consider that will help you generate the information you need.

Keep in mind, each of the following tools offers a different set of features at a different price point.  As you would with any paid service, be sure to read through each service’s terms and conditions before signing up to be sure your chosen program will meet your needs.

• Attention Wizard – Attention Wizard is a predictive tool that extrapolates which portions of your site will receive the most “eyeball time” based on its own exclusive algorithms.  The program offers a 30-day free trial and is most useful for picking out which elements of a site are most under-utilized.
• ClickDensity – This program is one of the oldest heat map tools on the market, and it offers each of the different types of heat maps described above, as well as the ability to tie your heat map data to your Google Analytics account.  If you’re on the fence about the power of this type of data, ClickDensity does offer a free account level that tracks a limited number of pages and clicks.
• ClickTale – ClickTale isn’t cheap, but it offers one of the most comprehensive heat map packages around.  In addition to the standard heat map options listed above, it also offers a suite of conversion tools designed to help you get the most out of your sales funnel.  The program offers a free account level, but the amount of tracking provided is so little as to be nearly worthless.  Try the risk-free trial instead to determine if this program is right for you.
• Crazy Egg – The Crazy Egg heat map programs offers a similar set of features as ClickDensity, but with a few extra additions.  The “confetti” mode that allows you to separate clicks by source and the ability to exclude your own visits to your site are just two of the features that make this heat mapping program worth a good look.
• Seevolution – Seevolution is a relative newcomer to the heat mapping scene, and its biggest advantage lies in its ability to provide the real-time data that many website owners are looking for.  As with ClickDensity, the program integrates with Google Analytics, and like most of the other programs listed here, the site offers a free base plan you can use to try the site out.

Whichever plan you decide to go with (and this list certainly isn’t all-inclusive when it comes to all of the different heat mapping programs out there), be sure that your heat maps don’t become just another analytics tool that you reference every so often and forget about.  Use this powerful information to make good decisions about how to design and promote content on your website in order to receive the biggest possible benefits from these fascinating programs.