It’s Cold Outside … Turn On the Heatmapping!

Seth Miller
2.23.2011 »
Tech
Stay up to Date

Cold and empty—is that how feedback on your latest and greatest website feels? It might be very insightful to see just how every one of your million (I’ll be generous) users navigates your website. And because standing over your visitors’ shoulders isn’t a very sound idea, heatmapping might be just what you’re looking for.

Before you can improve a website, you have to understand how visitors are using it now and understand their frustrations and elations. Usability testing in the design stage provides preliminary direction and can help eliminate potential problems, but tracking how a site is used once it’s launched is critical too. Feedback from tracking page visits, link clicks, and user comments all are important tools to measure how people use your site—but they’re not the whole picture. What doesn’t come through in these metrics is where users are struggling to find what they’re looking for or to complete a task.

That’s where heatmapping comes in.

A heatmap is a graphical overlay that shows frequency of an event. In the world of websites, a heatmap commonly displays an overlay with all visitors’ clicks tracked, aggregated, and represented by a simple color scale. Blue (fewer clicks) to red (most clicks) shows the location and frequency of where your visitors click.


Heatmapping Overlay of Google
Heatmapping Overlay of Google

Here is an example of a heatmap on Google search results. What can immediately be gleaned from this information? The top left corner is the most common area for activity; on the right side, heatmapping reveals the effectiveness of ad placement. The prime real estate is the topmost ad slot, which is valuable information when you’re running a pay-per-click campaign and need to understand what you’re paying for.

Now that we understand the basic premise, let’s think about how it applies to your site. People come to your site for a specific purpose: to learn something, do something, or buy something. Understanding where your visitors are clicking can help you redesign a page to emphasize your most important call to action—and generate the results your site was created to achieve. The easier you can make it for your visitors to achieve their goals, the more successful you’re going to be—and that’s worth paying attention to.

So how do heatmapping tools work? Though they can be somewhat complex to set up, the way they work is simple and the results are amazingly intuitive and useful. Commonly, a snippet of Javascript implemented on a page will track the x and y coordinates of the mouse as it clicks, and feed the data into the backend system where we can see it and learn about how visitors like to interact with a page.

As a site receives more and more visitors, a heatmap will start to show a pattern of activity; when this visitor activity is overlaid on a webpage, you get valuable information about what’s intuitive on your website and what’s not (and where and how to improve to increase your return on investment). The power of the visual overlay is that it lets you look at all your visitors’ interactions in a way that relates to each other. High popularity spots become immediately apparent without digging through page clicks, as to problems—as we see in the sample website below:


Heatmap Overlay of Images vs. Links

Heatmapping overlay demonstrates user experience issue; in this case, one that's costing the organization money.

The heatmap makes it apparent that a lot of users click on the images rather than the text to get to “Café Prepay”—but the image is not a link. Every user who clicks the image expecting to navigate to another page is being told that their intuition is wrong.

Standard link tracking will record only the positive hits, not the negative ones where the visitor doesn’t get the expected result. In looking at this overlay, you know immediately that the image should be clickable, and can reduce user frustration and improve results.

Every little step toward making your site intuitive to your users will keep vistors engaged and coming back, and that means better results for your business.

Want to learn more about heatmapping? Contact us (we bet you’ll be able to find it easily—at least that’s what the heatmap tells us!)

 

Tags:

WebsiteUX
Keep reading.
Load All
View More