Heat Maps Increase Website Usability Analysis

How far down do your website visitors scroll? Which images and headlines do they expect to be clickable?  Where is the best place to insert a photo or button?

Heat maps are visual representations of the relative popularity of your website’s elements; and they can answer these and other non-intuitive questions.  As a small business owner or non-profit organization, you need to know where your website visitors are getting frustrated. You need to see the elements that are causing your visitors to hit the back button and you need to know where your visitors are clicking.

Web analytics software like Google Analytics can tell you how your visitors found your site; which pages of your site are most popular; how long your visitors spent on your site; where your visitors are geographically located in the world and more.

Although most web analytics software can give you the “numbers”, they cannot tell you which parts of your site visitors expect to be clickable. They cannot tell you exactly how far down a page your visitors scroll. Without this information, you don’t know whether your visitors ever saw your call to action; whether they value one image over another; or whether a specific field in a form is the culprit for that page’s peculiar bounce rate.

Heat map tracking software, like, enhances your existing analytics by filling in these gaps and providing precisely this kind of information.

Let’s review a snapshot of the homepage for My Diamond Obsession as an example.  The most frequently clicked elements of the page are colored in yellow and the least clicked elements are colored in blue.

There are several areas of this page that are completely untouched. Two “Buzz” posts, two “Most Obsessed” products, and one of the products in the featured slider don’t have a single click.  Instead, the hottest spots are the arrows showing additional product, other product, and the RSS button.  This suggests visitors want to know about future additions, but don’t necessarily like what they see on the homepage in this instance of time.  This should be a clue to add different content to the homepage.

Heatmap Selling to the Masses, Monday, February 27, 2012Let’s take a look at another example: Selling to the Masses.

In this graphic you can see that one of the “hottest” areas is the play button for the video.  This is as it should be.  The site owners invested a substantial amount of resources to produce the video and should be one of, if not the most, frequently clicked elements.  You can see that “The Mentors” and “The Classroom” links in the main navigation are popular as well. Careful review of this map shows a series of blue spots along the right vertical. What are these? What does this pattern indicate? One possibility is that these are attempts to exit the modal or “pop-up” that appears when the video is played. This is something to consider in an evaluation of this site’s usability. While heat map software provides rich, visual insight, it is important to examine the anomalies of the software’s resulting graphic.

A more significant point of interest, however, is that the “Browse Mentors” link all the way down at the bottom of the page in the footer is highly popular compared with other links on the page. Notice that the central area showing photographs of featured mentors shows very little activity. Some of the photographs are completely untouched. This site’s visitors are more interested in browsing mentors than they are in looking at the details of the featured mentors. This should trigger a repositioning of the browse link to a higher, more prominent area of the homepage.

Heat maps alone do not provide all of the data that other analytical software does. Heat map software can, however, increase conversion and add value to your web analytics by:

  • answering design questions you may not have thought to be relevant
  • revealing poorly performing areas like specific fields in a form
  • identifying usability issues that might have been missed
  • suggesting refinements to your site’s information architecture
  • highlighting areas commonly mistaken for links or other clickable elements

This kind of information allows you to keep the things your visitors like and change the things they don’t. It reveals an entirely different view of your website’s usability and helps you keep your most desirable content intuitively accessible for your visitors. Another advantage of heat maps is that they are visual and, as such, they are well suited for presenting raw data to non-technical audiences. They also help cement the position and organization of the elements of your site that work; and they can help you ensure that that the content on your page is relevant, easy to use and valuable.