Heatmaps: Read the Heat

Heatmaps: Read the Heat


Written by

Papa Whale


April 22, 2015




Web design is an artform when you really think about it; its aim is to incite visitor behavior through strategic, well thought out, well-calculated design practices.

When that webmaster adds a big red flashing button in the header, that webmaster expects users to click on it.

And why wouldn't he? Then again, people don't always behave in the manner they're supposed to, or the way YOU think they will. So, how is one to spot these unexpected behavioral reactions?

There are a lot of tools out there designed to help you figure out and analyze if your visitor’s user experience is good, with Google Analytics being the most popular (of course). However, the Silicon Valley giant focuses mostly on goal completion and overall behavior of the traffic. Even if this information is paramount, the downside of this is that GA can't highlight every detail that might be just as important.

… And that’s where heatmaps come in handy.

What are Heatmaps?

Heatmaps are visual representations. They're visual cues you can refer to to see the most clicked or frequented areas of a website. In other words, they give you a visual breakdown of visitor behavior.

But why the name "heatmaps," you may ask?

Remember the days of old, when you’d play Hide-and-seek? If you and your friends were like most Hide-and-seek-players, they probably shouted “COLD!”  when you were far, and “WARM!” when you were getting close to finding what you were looking for.

Think of it like that; heatmaps are very much the same, except they’re far from a game.

The more clicks or mouseovers an area on your site has seen, the redder the map would get (you know, red for red hot, hot, HOT!).

Why are heatmaps useful?

Because they provide guidance and data.

Remember, data is an involved webmaster's best friend.

Say you have a great overview of your site - full of colors - now what?!

Heatmaps are one of the most efficient ways to assess the design of your landing pages.

By being able to visualize the behavior of your traffic, this allows you to analyze the overall behavior of your audience as a whole. In many ways, heatmaps allow you to spot the attractive (and most popular) areas of your site, and the sections that nobody cares about.

In practical terms, you can decipher or confirm what behavior was expected, and also learn a thing or two about unexpected user-behavior.

For example, in terms of navigation and your site, heatmaps will paint you a picture that enables you to see which method of navigation is the most popular.  Is it the search bar? is it the sidebar?  is it the menu?  … or maybe it’s the categories section?

Once you’re aware of it, you can focus on and make the appropriate optimizations for this particular area (that is, if it needs any). Your users will be appreciative!

On the other hand, it can also highlight some unwanted actions...

For instance, what if 20% of your clicks are on areas that aren’t linked to anything?  If you recall our Web Ergonomics post, you’ll see how this relates to the Affordance concept (things that make the user think they can interact with them). Nevertheless, this is a situation you’d hope to avoid.

Yet again these are just a few examples of what insight you can gain thanks to heatmaps.

Are there:

  • important areas of your site being ignored?
  • less critical elements on your page that distract your users from the main content?

And what about scrolling?  Do your visitors take enough interest to scroll down?

Beware of the Heat Traps

At this point, you very well may be thinking that heatmaps are the user-experience miracle you’ve been looking for. However don’t crack open that champagne bottle just yet!

Interpreting heatmaps is another thing:

  • Top Spots: A red area will tell you that your visitors either respond really well to specific content, or that your users just don’t understand it.

  • Content: If the heatmap shows that your traffic is more interested in areas that host secondary content, perhaps it means that your users are not looking for the content you expected; instead, revealing a web navigational problem within your site.

  • Navigation: If your traffic makes a beeline for the search bar, it can either mean that there's some information missing on your page or maybe they're looking for some more awesome content.

There will always be many possible explanations to explain the behavior of your traffic.

Whatever the heatmap shows, you ideally want to complete it with complementary data found by running other tests. For any user experience researcher who typically runs a series of tests, this goes without saying.  But for the average webmaster, it can seem pretty daunting.

Therefore, the best solution...?

Surveys and forms!

Both of these are outstanding complements to heatmaps as they provide additional data to help you learn just a little bit more about the crowd you’re attracting.

Lucky for you guys, there's a perfect solution out there for that...

A free Heatmap solution

Hotjar provides all-in-one analytics and feedback, providing a range of tools to analyze the user-experience of your landing pages.

Heatmaps are worth their weight in gold, but using something like Hotjar takes you the extra mile. Data is your friend!  Manage polls, surveys, conversion funnels, form analytics, and more!

Hotjar’s free basic plan allows you to create three heatmaps of up to 1,000 sessions each. All you have to do is to install the script on the pages you want to analyze and then you’re good to go. If you have more than 2,000 sessions per day, the tool will automatically sample your traffic.

Don’t like being limited? Hotjar Pro gives you unlimited access to Hotjar’s tools and all the heatmaps you want for $29/month. All things considered, it's an amazingly low cost considering all the benefits and optimization opportunities you get from this helpful tool, especially if you deal with high volumes of traffic.

Can you feel it?

Heatmaps have been used in UX research & labs for years now, but it doesn’t mean that these are only academic. Indeed, every webmaster can use and analyze heatmaps to shed light on new optimization opportunities.

By optimizing the user experience of your website, you’re more likely to:

  • Generate more conversions
  • Boost engagement
  • Increase the volume of quality traffic
  • Lower the support costs

And more!

So if you haven't taken the heatmaps plunge yet, now’s a great time to start!

Tell us in the comments, what did your heatmaps reveal?!

From the blog

Discover more blog post about media buy, adult traffic and more.