These days, it seems as if it is not only true that “there’s an app for that,” but there is a map for that, too, with apps like Google Maps, FlightAware, and MapMyRun becoming more and more popular. Today’s maps include 3D, street view, business reviews, nearby friends, and much more. But when organizations have to analyze website behavior, they find themselves asking: How exactly do we read a heatmap?

Heatmaps have evolved into a must-have tool for customer experience analysis, as they enable you to visualize the mouse moves, clicks, hovers, and scroll patterns of website visitors. It isn’t always straightforward, but knowing how to read a heatmap and understanding its various functions will help any organization.

Customer experience professionals rely on heatmaps like how 1990’s Domino’s Pizza drivers relied on a good old-fashioned Thomas Guide or printable Mapquest. But an error in analyzing a heatmap could be much more disastrous than flipping to the wrong map page. Let’s look at various ways that analysts can better read heatmaps and gain valuable insights.


Mouse Move Heatmaps

I am often asked why mouse movement is important. The reason is proven by independent research: there is an 84% to 88% positive correlation between mouse and eye movements. Therefore, by studying how users move their mouse, we study what they see with a high rate of accuracy.

A mouse move heatmap aggregates the mouse movements of thousands of visitors to a specific page. It has, in a sense, become an affordable alternative to the expensive eye-tracking studies.

A mouse move heatmap can give customer experience optimizers insights like:

• Which content, elements, and layout increase conversion rates
• What your customers see before they decide to purchase a product
• How many people miss call-to-action (CTA) buttons
  
  

Mouse Click Heatmaps

A mouse click heatmap on a webpage has possible CX optimization at its core. Customers use mouse click heatmaps to identify obstruction in conversion funnels. With this information, they can find CTAs that are being ignored and unclickable elements that are being clicked.

For example, if a page includes a heading that is not linked to anything, but heating up with clicks, perhaps users crave more information on that topic.

In addition to where users click, it is also fascinating to study where they don’t click. That is, where they hover or hesitate. By carefully analyzing this information, you can assess how to convert these hovers into clicks, conversions, and revenue.

Eye tracking Heatmaps

It’s common to get confused between an eye tracking heatmap and a mouse tracking heatmap. While the two operate differently, they produce very similar results. Studies show that when both methods of testing are used simultaneously, there is an 84%-88% correlation in their outcomes.

There are various benefits to using eye tracking when trying to understand your users’ actions, but for ideal outcomes, we recommend using them together. The reason that most companies don’t use them together, however, is that it can be very costly.

Both options provide valuable insights on how your visitors are engaging with your site pages. Eye tracking is unique in that it allows you to design a controlled environment and give specific pre-determined tasks to your users so that you can gather detailed insights on your website. Your users can also give you feedback and answer any questions you have, allowing you to skip the trial and error period.

Mouse tracking, however, does not give you this option. Instead, it only allows you to test real-life users in their natural environments. This gives you accurate insights on authentic user experiences, but it can also make it more difficult to understand the entire picture in a controlled amount of time.

There are various other differences between the two, which you can learn about here.

Attention Heatmaps

Did you know that a heatmap can serve as a boring-o-meter?

With attention heatmaps, you can determine which content is interesting to your users and what they skip over.

Irrelevant web content and other un-engaging elements increase visitor frustration and cause high bounce and abandonment rates. By understanding which parts of a page are interesting (and which are not), businesses can eliminate roadblocks to conversion, optimize advertising locations, and create more of the content that engages users


Scroll Reach Heatmaps

It can be debated that important web elements should be placed above the fold. In fact, some are arguing that there is no fold. Screen sizes and resolutions differ, and user attention spans are shorter. For example, vertical layouts, that are so popular today, have lower scroll rates unless they are used with visual cues indicating that the user should continue scrolling.

Understanding the scroll habits of the actual visitors on a site helps customer experience pros optimize page length and arrangement of elements within it.

With scroll reach heatmaps, you can optimize the effectiveness of your content, the impact of your CTAs, and the income generated by your ad spaces.

Heatmaps for Mobile

Internet usage is now dominated by mobile, with 51% of US consumers engaging with digital media via mobile device on a daily basis, as of 2015. In response to the growth in mobile usage, the mobile-first approach has become more commonplace, and it’s crucial that analysts have access to detailed and accurate insights into mobile user behavior.

Mobile heatmaps primarily focus on users’ touch gestures, such as swipes, taps, and pinches, which helps organizations identify the same patterns as they would on desktop. From mobile heatmaps, analysts can see what is being ignored on the page, what is being scrolled by quickly, and what should be removed altogether.

While each site generates unique user behaviors, there are some patterns that analysts have been able to identify repeatedly. For example, the F-Pattern (which was first discussed back in 2006, but is still relevant today), brings attention to the fact that users scroll through website content very quickly, and understanding these various quick actions is crucial to improving your site’s usability.

Essentially, the F-Pattern theory states that users practice three main behaviors: the first is that users read horizontally, usually across the top part of the page (this horizontal movement represents the top part of the letter ‘F’). Next, the users typically move down the page and scan the next part of the content, typically covering a shorter area (this movement represents the bottom horizontal line in the letter ‘F’). Then, the users move their attention to the left side of the page, going scrolling from top to bottom (moving vertically, representing the long horizontal part of the letter ‘F’). Analysts can identify this by seeing the user scroll downward in one swift movement.

Users don’t have the patience to thoroughly read through your page’s text, so it’s important to keep your mobile content short, visually engaging, and focused on the most important messages. Typically, the paragraphs that get read the most are the first two, but it’s still important to keep them short and to the point. Having clear subheadings or using bullet points draws the user’s attention to the left-hand side, enabling them to touch the left-hand side and scroll down in the F-shaped motion.

From apprehension to appreciation

Have you ever been in a car with a driver who thinks he knows how to get there, but ends up getting lost on the way? Sitting uncomfortably in the back seat, if you are like me, you were thinking “why didn’t he just use Waze?”

Running a website without heatmaps and other usability analytics tools is kind of like that. The tools are available to you – there is no reason to get lost or try to guess what users find interesting; there are a great deal of insights to learn from reading a heatmap. Maps can save you the frustration . . . not to mention – both time and money.

Learn more about how to use heatmaps to truly impact the different stages of your website’s conversion funnel.

This post was originally published in October 2015 and has been updated for freshness and comprehensiveness.