Heatmapping Tools Show What’s “Hot” on Your Pages

Most analytics tools can tell you how many times a link on your page is clicked on, but they can’t help you draw conclusions about a page with just a mere list of top links. A tool called a heatmap turns data into a data visualization, so you can more easily see how people are interacting with the design. With it, you can find out some really important stuff: if the page design plays a part in clickthroughs, where on the page your users are moving, and what on your page might be worth featuring/not featuring. Then you can try moving pieces around for better results.

Heatmapping tools do exactly what it sounds like: they map out the most-trafficked (hot) and least-trafficked (cold) areas of your pages. As you can see in the picture, a side-by-side screenshot of USA.gov’s page on both mobile and desktop, the level of engagement is displayed by color. The gray and blue colors mean there was little movement in those areas, while the red and white denote very popular areas. In this case, the USA.gov team wanted to make sure the popular spots on the desktop page were prominent on the mobile page, and refrain from putting important content in the “dead zones” (the gray areas).

Generally, there are two kinds of heat maps:

Mouse-tracking

Mouse-tracking maps record the mouse movement and click behavior of your users, allowing you to analyze why certain links are clicked at higher rates and where your users’ mouse is crossing. For example, you might note that a particular piece of important content is not being clicked at the desired rate. By using a mouse-click heatmap, it would be easier to see why people weren’t clicking; maybe the content was below the fold, or in a lower traffic “dead-zone” area. That’d allow you to move content around and continue to use the heatmap to optimize the chance of a click.

These tools are generally cheap or in some cases free.

Eye-tracking

Eye-tracking devices actually follow the movement of the user’s eyes, painting an interesting portrait of how visitors view the content on your page. They generate heat maps that you can analyze. This allows you to put the content you want people to see in the areas you know they will probably look upon a quick scan. The use of eye-tracking heatmaps has led to some proven trends, such as the fact that users spend most of their time on the left side of the page and scan in an “F” shape (see image below), but being able to see the pattern on your specific pages can prove to be invaluable.

The downsides to this method are that it is generally much more expensive than mouse-tracking, and requires special equipment and extensive training. You also need to test with only a small sample, rather than get data from all of your visitors. For more information about these tools, do a search for “eye-tracking software.”

If you’re interested in heatmapping or other User Experience techniques, why not join the Federal User Experience Community listserv? To do so, send a request to Jon Rubin, Program Manager for the DigitalGov User Experience Program.