How to Use Heatmaps to Improve Your Website’s User Experience

How do you keep your site optimized to encourage user experience? You need to continually make changes to your site design to improve it for your users. In order to do that, you need to know where they go when they visit, what they do and how they react. What parts of your site are the most clicked and which fall flat? What links to they rarely or never click? What do they last do before they leave your page? All of this can be found with a heat map.

What is a Heatmap?

A heatmap is, essentially, tracking the activity on your page. Web tracking heatmaps monitor your site for cursors, tracking them by individual user and by page. Some will offer a session playback so you can see what an individual user does. The primary point, however, is to see an overall picture of your site activity. Here’s how it works.

• Your entire page, by default, is a cold blue of no activity. Most of your page will remain this blue color.
• As users visit and are tracked, their cursor is watched. Some people put their cursor to the side and scroll as they read. Others highlight text as they read. The position of their cursor will generate a small amount of virtual heat, changing the blue to a warmer color, green or yellow or orange or red.
• When a user clicks, that location is marked as a hot spot on that page. The user visits another page and the process repeats. Each page of your site has its own heat map.

With a heatmap, you can see where your users click and what areas they avoid. You can see if your bottom-bar navigation is ever used, or if they scroll up to your top navigation. You can see which buttons they click most often and which links they use. You can also see what calls to action they react to, particularly when used in conjunction with A/B testing.

Using a Heatmap

The number one benefit of using a heatmap is identifying parts of your site that are taking up space with links but are receiving no clicks. Set up a heatmap on your main page and see which of your navigation buttons are used. For those that aren’t, test! Change the wording and see if that was the problem. Change the position. Remove it entirely or replace it with a new, more useful link.
You can use heatmaps to identify the areas people click on most heavily. In general, Internet users read websites in an F-shaped pattern. They scan across the top of the page for titles and top bar navigation. On a page, the skim down the left side for subtitles, more navigation, bullet points and relevant content. When they see something that interests them, they scan across once more. Each leg of the F gets less interest, and there’s not much you can do about that. You can, however, put popular links from below the fold into a popular area above the fold. Move less interested links lower. Find the most high-traffic areas on your site and place your ads and monetized links nearby.
Heatmaps can be surprising. You might not realize how little interest certain links in your navigation are. You can also use heatmaps in conjunction with split testing to identify the benefits of alternate layouts.
To optimize your layout, make minor changes and continue testing. Even something as minor as bolding a link or changing the color of a call to action button can be highly effective.

• People scan, they don’t read in detail. Short bullets with your content front-loaded can be a beneficial change. Likewise, bold important sentences for further attraction.
• Images draw attention. Always include images, and try to make sure they’re relevant in some way. In blogging, the old adage of a picture being worth 1,000 words is surprisingly true.
• The content beneath the fold – that is, low enough on the page to require scrolling to see – may as well be invisible to the majority of your users. Top-load your content, particularly the important ads and the content you want seen. A footer ad is unlikely to receive much interest, and calls to action at the bottom of a piece are routinely ignored.
• Users like the recommended and obvious choices. For an ecommerce site in particular, the option that stands out is more likely to be chosen. Putting one product with a red paint job on a page full of brown products will enhance the visibility of the red product. That’s an extremely simple example, but it illustrates the point.
• Content on a right-side web banner, such as a related articles feed, social ticker or advertising banner, is routinely ignored. Ads are most often placed in this space, so many users ignore it by default. If you’re putting unique content there, it’s probably not working for you.

All of this is highly dependent on your site layout, content distribution and format, of course. This is why heatmaps are so useful. They allow you to identify which of these issues you page has, and how you may be able to fix them. A heatmap alone won’t provide the answers, but it’s a powerful tool for gathering the information you need to adjust.

Heatmap Options

There are a number of different heatmap options available.

• Google Analytics. The Google Analytics heatmap tool is basic, but quite functional. It works very well for what it does, but it may not offer all of the utility that a dedicated heatmap tool will.
• Crazy Egg. Possibly the most popular heatmap applications, used by a number of large global brands, Crazy Egg is not a free option. It’s very robust and offers click tracking, heatmaps, scroll maps and its own special confetti mode that tracks clicks per user and colors them appropriately.
• Feng Gui. This isn’t an active tracking application like Crazy Egg. Instead, it allows you to upload a screenshot and receive a predictive heatmap. The site uses a specialized neurological algorithm to predict how users will interact with your page. It’s limited, but can give you an immediate insight into something that might otherwise take weeks or months of testing. Use it to get a brief overview and use long-term testing to confirm those assumptions.
• Clickdensity. This is an incredibly simple, bare-bones heatmap you can use for the most basic information gathering. It’s not the most robust data collection system, but it works for basic information.

Of course, remember that you don’t have to be limited to one tool. You can use Google Analytics, Feng Gui and Crazy Egg simultaneously if you prefer, or any combination of other software you discover and prefer.