How to Use Heatmaps to Improve Your Visitor Engagement

Published Jun 09, 2014 by James Parsons in SEO
Estimated read time of 4 minutes and 5 seconds4 0
The views of contributors are their own, and not necessarily those of

One interesting technology you can use on your website is the heatmap. Heatmaps are used in life to track the flow of people; where they go, what paths they take, where they avoid and so on. It’s used in multiplayer video games for the same purpose, to streamline map design. Using one on your website shows you, not where people go, but where they click. You might be surprised at the utility of the information you can gain.

Types of Tracking

There are three basic types of tracking for heatmaps. You can choose from click tracking, cursor tracking and eye tracking.

Click tracking is the most basic form of heatmap tracking. It shows your entire website in a cool blue tint. Each time a user clicks on a page, that spot is tinted a little higher, from blue to green to yellow to orange to red. More clicks mean a warmer color, forming hotspots around your pages.
Mouse tracking is a little more advanced. It tracks clicks, but it also actively tracks cursor position. If your users are spending more time highlighting words in a given area, or positioning their cursors in certain spots, it can tell you some interesting facts about your site.
Eye tracking is, unfortunately, not something you can implement on your site. It requires a live test audience and a specific setup involving eye monitoring cameras. It shows you, not where your users put their cursor, but where they put their eyes. It can be very interesting to see, but it’s not convenient to implement.

Most forms of heatmaps found today combine both click and mouse tracking. You’ll see trails around your site where users move their mice, and hotspots where they click.

What a Heatmap can Tell You


“So I can see where my users click; so what?” Heatmaps can give you very valuable insight into the behavior of your users.

• It shows you, in graphic detail, just how much more activity your site receives above the fold than below. Most users simply don’t scroll down.
• It shows you any spot on your page that users click often. If you’re testing out different types of buttons, this can let you identify the most attractive of them. It also lets you discover which navigation links are most used.
• More importantly, it shows you where users aren’t clicking. Do you have a link on your top header that no one ever clicks? You should probably change it. Are some of your most-clicked links hidden down low on the page? A reorganization may be in order.
• Another insight is where users click that isn’t clickable. Do you have an image logo in the upper corner without a link attached? Many users will click it, thinking it will take them back to the homepage. There may be other graphics causing confusion on your site as well.

One thing that will probably become clear is the F pattern used by most web searchers. They start in the upper left and scan the horizontal navigation. They scan the left sidebar navigation. If anything interests them, they click. Within content, it’s the same story. They read headers and scan the opening sentences of each paragraph. Subheads get more focus, as do bolded points along the way. Very few users actually read through your content entirely.

Gathering Data

You need to install a heatmap plugin on your site. You have a few to choose from, so investigate your options and pick one you like. ClickTale, ClickDensity and CrazyEgg are some of the more common choices.

Once you have it installed, you need to let it run for a suitable time. Keep in mind that the more data you gather, the more accurate your findings will be. If you have a low number of users, you just need to let it run a little longer to gather a suitable amount of data.

• Are there any areas – sidebars, top navigation, footers – that see virtually no clicks? If so, they can probably be removed, moved or minimized. You can also replace them with other content to see if it’s the content or the position causing the problem.
• Are there any areas where users are clicking static objects, such as images or graphics that aren’t linked? One common example is when a widget generates a preview of an article with the headline, body snippet and preview image. Many users will click the preview image, expecting it to be a link to the article.
• Are there any areas that receive an extra special amount of attention? These are where you should focus your efforts to post and promote the best content you have.

Making Changes


The basic goal of heatmap optimization is to understand your readers and guide their experience. In general, identify locations they are usually focusing on and place your important calls to action in those areas. Here are some general tips.

Make sure anything you want users to see is placed above the fold. That is, that it’s visible upon the page load, without scrolling down. Anything that requires scrolling is going to get far less visibility. This is one reason why an end-of-article call to action is less effective than one placed in the middle of a piece of content.
The left side of the page is more attractive than the right. Again, this goes back to the F patter of user action. This itself stems from our very language. English is read left to right, so users start their eyes in the upper left and work their way down and to the right. A vertical gaze from top to bottom, along the left side of your page, is most common.
Identify the most high-visibility areas on your site and try to place important links nearby. A call to action, a “buy my book” button or anything else is going to be more effective if it’s placed in a high traffic area. Always consider your goal; where are you trying to get the user to go, once they’re on your site? Is it social sharing buttons, other blog posts, your web store or an email submission form? Give those links priority placement.
Users instinctively ignore anything that looks like a banner ad. If you have actual banner ads, expect many users to block them outright. If you’re formatting your own in-site links to simulate banner ads, experiment with other designs. You’ll very likely discover that other designs are more effective. The average web user is nearly blind to banner ads.
Highlight important elements in some way. Give your important buttons a color that stands out from the rest of your page. Uses colors unique to that page, and test them out with ongoing changes to identify the best for your site.
Avoid basic, unedited stock photos. They are uninteresting and many users tend to avoid them. Pick something more graphically interesting for your thumbnails. An interesting image can attract attention even when the content title won’t.

Finally, iterate. Once you’ve made some changes, run the heatmap again and collect more data. Did your changes have the effect you hoped they would? Are there new issues that have come up? With new data, make more changes, and repeat the process until you’re satisfied.

Written by James Parsons

James Parsons

James Parsons is a blogger and marketer, and is the CMO at When he isn’t writing at his personal blog or for HuffPo, Inc, or Entrepreneur, he is working on his next big project.

Our Sponsors