Jul 21, 2021What are Website Heatmaps?

Andrew Powers@arpowers
on

About Darwin

A marketing + analytics platform for startups and developers.
Learn More →
Website heatmaps are a conversion optimization tool that helps you understand how pages on your website are performing.

Basically, website heatmaps give you a representation of data with different colors denoting different values.

Too simple to be useful? Often heatmaps give you more insight than you'd think.

Concepts

Colorized Visualization of Data

Website heatmaps use a warm-to-cold color scheme to show data density. The warmest color indicating highest value and the coolest indicating lowest.

Heatmap Color Scale

Website heatmaps help you quickly understand how visitors behave on your websites and help you make informed optimization decisions.

They are a handy way of articulating your website's data.

Different Types of Website Heatmaps

There are 5 main types of website heatmaps:

  • Clickmaps
  • Scrollmaps
  • Movement Heatmaps
  • Eye Tracking Heatmaps

Clickmap

Clickmaps are the most common heatmap and represent where people are clicking or touching on your website.

Functionally, clickmaps also help identify what navigational elements users are finding the most interesting.

Clickmaps can help you identify:

  • Dead-Clicks:
    Are people clicking on areas of your page that aren't actually links? Maybe something looks like button but it isn't. Many times this happens with header text that people expect to by clickable but it's not linked.
  • Navigation Priority:
    Given a long list of navigational elements, which ones are most likely to be clicked? Heatmaps can help you see easily what people are looking for when they see a list.
  • User Focus: A clickmap can also help you figure out where people are focusing. You'll often see clicks on people's faces, or on images where people are looking.

Scrollmap

Scrollmaps help you see how deeply users are scrolling through your website. Also how they are scrolling.

In essence, scrollmaps help you identify where people spend time.

With this data you may conclude that people are never seeing elements at the bottom of your page. You may want to move those elements to the top of your page.

Use scrollmaps to:

  • Figure out where you should place calls to action
  • Learn where people are losing interest in your content
  • See where your page may give the impression of a false bottom or if people don't feel compelled to continue scrolling based on your design.

Movement Heatmap

Movement Heatmaps, or hover maps, indicate where users keep their mouse or finger on your page.

Movement heatmaps are great for:

  • Learning the areas that draw people's attention or their frustration. If something isn't working, they usually spend a lot of time in that area. Also faces and images draw a lot of hover time.

Depending on the service you use, you may need to be aware of issues where people leave their cursor in the same place while they read your content. This can cause data pollution and prevent you from getting any true insights.

Eye Tracking Heatmaps

Eye tracking heatmaps are heatmaps created along with special software that uses a webcam to track visitors eye movements. (Don't worry though! this only happens in approved scenarios; for example, when an agency recruits a focus group that specifically approves tracking.)

If you have the means to create real eye tracking heatmaps, they can be beneficial to your design guidance. As clearly, the things that people are looking at are the things they are most interested in and will interact with most.

Eye tracking heatmaps are best for:

  • Learning where people are looking in your content
  • See what might be distracting users
  • what is drawing an inordinate amount of attention (faces, bright colors, etc.)

Should you use website heatmaps?

Traditional analytics is great at understanding the quantity and quality of your traffic, as well as their aggregate behavior. Where it falls short however, is in helping you understand the 'why' behind what you're seeing.

Things that are hidden in the numbers and charts, become crystal clear when put into a visual format.

Heatmaps help you understand the thinking behind your traffic, in addition how various aspects of your UI interact with each other.

For example, you'll often see that one item in a list of navigation items gets almost all the attention. There is no way for data analytics alone to give you all the context about how various elements interact.

Another thing that heatmaps can help with is understanding what elements of your site are distracting people. If there is a lot of activity away from your call to action, then clearly you should reconsider what is drawing people's attention away.

So for this reason, we recommend adding heatmaps to any serious marketing effort online.

Conversion Optimization

Marketing is often like poetry. Things need to work well together for you to get outstanding results. Heatmaps can definitely help on this front.

Once you understand where people's attention is, we recommend tying important aspects of your funnel to the areas where people's attention is drawn first.

Also, make this an iterative process. With Darwin's live heatmaps, you can easily generate the most reason version of your data and see how things change when you alter you site.

We recommend creating a weekly or monthly document for your team that includes several CRO metrics, and also heatmaps.

In Practice: Using Your Heatmap

Here is how we recommend using the heatmap:

  1. Choose which pages are most important in your funnel. If you are an eCommerce site you may want to take some popular product pages as a sample. Other examples of pages you may want to analyze are your home page, payment page, cart, etc.
  2. Identify what is the primary CTA or action on each of these pages
  3. Take a look at the heatmap on both mobile and desktop. Is the attention near the CTA? Is your CTA clear in the context of your other information?
  4. Review the heatmap for dead-clicks (elements the user thought were clickable but weren't)
  5. Review the heatmap for distractions. What drew the user away from the CTA?

Advanced: Segmenting and Analysis

Using Darwin's segmenting, filtering and analysis tools you can easily filter your heatmaps to only include data from a subset of your visitors. Play around with various referrers, browsers, devices, etc.

Using these tools you may notice some interesting changes that occur across environments.

You can also understand people's thinking a bit better, if the heatmap changes based on referrer. For example, search visitors may behave very differently from users who found you via social media.

Based on your goal, you can build many hypotheses and use the scrollmap insights to pinpoint the exact problem.

Hope you enjoyed this post.Ready to take your business to the next level?