When you design a website, especially one that is so packed with strategy for user-intent, much of it has the potential to become very subjective. "Best Practices" can only guide you so far, and regardless of how you're performing, finding out how to get to that next level of performance can be challenging without the right insights.
How would you change your website if you knew exactly what people were doing on it when they visited?
Heatmaps are about as close to a mind-reading device for user behavior as we Inbound marketers can get. While we'll never fully be able to get into our visitors' heads (which would be kind of creepy, anyway), being able to see how people interact with your website should be enough to get you started with improving the usability of your site, and in turn, its performance as a lead generation tool.
Discovering User Behavior with Visual Analytics
User testing in the visual analytics realm can be broken down into 2 distinct categories: mouse tracking and eye tracking. Eye tracking is a form of testing where a user's physical eye movements are tracked and mapped to the actions they take as they scroll and click their way through completing various tasks on a website. Eye tracking studies are expensive and complicated. Eye tracking looks like this:
And while there are companies out there who are making eye-tracking studies less costly and more accessible, it still remains costly, complicated and out of reach for most businesses. Additionally, it may not produce cost-effective and reliable results, given that it tests just a sample of your visitors. So how can we obtain the same type of information without breaking the bank or buying fancy space goggles that may or may not let us tap into the brains of our website visitors?
Enter: Mouse tracking.
Mouse tracking and eye tracking are based on the same fundamental idea. But mouse tracking uses the mouse cursor, instead of eye movements, to map user actions. For the intents and purposes of optimizing a website, that may arguably be more valuable. Not only is it much cheaper and much more accessible, but mouse tracking is also just about as accurate as eye tracking.
So What is a Heatmap?
What exactly is a heatmap? Well, heatmap is probably one of the more literal and straightforward marketing terms you'll come across. It describes a literal map of heat, defined by how much mouse-cursor attention a certain area is getting on a website or page, relative to other areas. Naturally, the brighter and more red an area of a heatmap is, the hotter and more engaged users are with that section. If an area is lighter in shade and darker in color, then we know that area isn't getting as much attention. And if you don't see any colors or activity? It's safe to say that area probably isn't engaging users much, if at all.
Heatmaps can provide insights into how visitors are interacting with your site, its landing pages and your site's content. You're able to quickly see what's making users click on certain elements and what's distracting them from key contact that you want them to engage with.
Are people reading your content and taking in each page in full or are they scrolling through quickly or not at all? Is your navigation effectively routing users into your conversion funnel? Where can you place content so it best fits with your users' goals? Reading heatmaps of visitor sessions on your site can help you answer these questions and more.
Interpreting Types of Heatmaps
There are three key heatmap types that you'll interpret to get into users' heads and find out what they're engaging with and how they're doing it. Each heatmap type is based on what a mouse can do, so there's click-based, scroll-based, and movement-based (also known as hover-based). Each heatmap type allows you to examine different behaviors.
1. Click-based HeatmapsWhenever a visitor clicks on an element of your page (or taps it, if they're on a smartphone or tablet), the click is recorded. Areas that have a higher density of clicks will show more "heat," thus indicating where the majority of people are clicking (and not clicking). Our example below shows a click-based heatmap of the New Breed homepage:
2. Movement-based Heatmaps (a.k.a. Hover Heatmaps)
Movement-based heatmaps are the closest equivalent to eye-tracking tests (if where someone's mouse is pointed is any indication of where they're looking). These heatmaps can also provide analytical data such as how many visitors have hovered over a specific part of your page, which in turn indicates the level of attention that area of the page is getting.
3. Scroll-based Heatmaps
Do you want to understand how far users go as they scroll down your pages and where they abandon the page? Scroll-based heatmaps are going to be ideal for answering this question. Depending on the scrolling behavior of your visitors, you may want to modify the length of your web pages so they're more effective. It's well known that users spend most of their time above the fold, but that doesn't mean a web page that's longer won't convert. Only through testing will you be able to determine the ideal page length for your site.
Getting Started with Heatmaps
Setting up heatmap generation on your site is fairly straightforward no matter what platform you choose. Here at New Breed, we use HotJar to generate heatmaps and collect additional user behavior information through session recordings and funnel tracking. When you're specifying which pages to track, you'll want to ensure you're looking at your homepage as well as any other page that has a significant role in your conversion funnel or is a conversion point in its own right.
Gathering observational data is a great way to start identifying improvement areas to take your website's performance to the next level. Furthermore, working with a web strategist who specializes in web page evaluation can help you easily determine what areas on your site could be improved. Interested in getting started?
