Using Click Heatmaps to Understand Detailed Interactions

Meg Davis  

October 07, 2011

Related Topics

As a data-driven firm, we are always looking for ways to understand exactly what people are doing on websites and what’s motivating them to look at or interact with certain parts of the website. Web analytics can give great visibility into that. However, click heatmaps give us better insight for large data sets with hundreds of interactions on any given page. Click heatmaps can tell a story that analytics or conventional usability testing never could.

What are click heatmaps?
Click heatmaps show the aggregate frequency of clicks on a page. Have you watched any Superman lately? Superman has “heat vision powers” and would be a great UX professional. The orange/purple/red/yellow images that Superman sees are similar to the click heatmaps that we use to analyze websites. In a place on the page where more of the visitors have clicked, the click heatmap shows deep red. In a place on the page where fewer visitors have clicked, the click heatmap shows a light blue color.

Why do click heatmaps matter?
Click heatmaps are especially good at revealing what users are drawn to interact with on a specific page. This can help us understand two things:

  • What content users are looking for or are most interested in
  • What components of the visual design are helping to direct users to that content and what components of the visual design are distracting users from their goals

With that understanding, we can re-order content to make the most-used content more accessible, and we can tweak visual cues.

When should click heatmaps be used?

  • With any page with heavy interaction, such as heavy searching, filtering, and sorting to understand how users are using tools and interpreting information
  • When discovering opportunities in a new project by running click heatmaps on a current site
  • When validating that a new design is directing people to the right content

Let’s recap on the benefits of click heatmaps:

  • Cost-effective: More cost-effective than eye-tracking and has a 84-88% correlation in results (
  • Time-saving: Can be generated from the current site and does not require recruiting of users
  • Session playback: Many click heatmap companies also include playbacks of sessions to discover the order and time in which interactions are performed by individual visitors
  • Accessible: Easy for clients to understand the data
  • Contextual: Looks at interactions in context of a whole page