Article

8min read

Use Heatmaps to Uncover Areas of Improvement on your Website

Website heatmaps are visual representations of attention, engagement, and interactions generated by your visitors as they navigate through your website. Free or paid tools help you generate different maps to better understand user behavior and optimize conversions.

What is a heatmap?

Heatmaps are visual representations of attention, engagement, and interactions generated by your visitors as they navigate through your site.  Warm colors indicate areas that attract the most attention or engagement, whereas cool colors show overlooked spots on the page.

Let your own visitors show you the areas of improvement on your site to help you boost sales, then simply make the appropriate changes and measure how well it’s working.

Example of heat map
Source: www.pixeller.co

When to use heatmaps?

Heatmap tools measure attention, engagement and even number of clicks on your website. They are a key component to your optimization toolkit (to learn more, read our complete guide to Conversion Rate Optimization).

To give you some concrete examples, here are some of the main reasons to use these softwares:

  • To measure engagement.  Do you write online articles, and wonder up until what point your audience stops reading? Using a heatmap can help you visualize the ‘scroll’ of a user, and where they interact with your site.  If you notice that only a tiny percentage of people actually reach your CTA, it might be time to make a change.
  • To measure actions. Where do my visitors click? Are they clicking the right button? Heatmaps help you see if your visitors are completing your desired actions, and also highlight where they might be getting stuck.
  • To measure attention.  What headlines attract the most attention? What images attract the most attention? What elements are distracting from the main content? Do my visitors see my form? Once you have solid answers to these questions,  you can start making changes that will increase your conversion rates.
Information delivered by a heat map
Source: Unbounce

Gaining the answers to the above questions can help you answer even more nagging questions:

  • Where should I place my most important content?
  • What’s the best way to use images and videos?
  • Where are my visitors getting distracted?
  • Where should I talk about my product/service?

Most heatmap softwares will let you generate maps that show user interactions from different points of view. The idea is that you should refer to all of them in order to reveal your visitors’ behavior.

Clickmap

This type of map allows you to quantify actions. It’s a visual representation of all of the clicks visitors make on your page.  This ‘map’ generates precious data since it allows you to see precisely where people interact with your site.

Each time someone clicks on a precise area on a page, the heatmap marks the spot with a light dot.  If you see large areas of white, this is where the majority of visitors are clicking.

Click heat map
Source: Sumo

By quickly identifying the ‘hot spots’ on your site, you can immediately tell if people are clicking where you want them to click. On the above image from Sumo, we can see that the ‘SHARE’ and ‘IMAGE SHARER’ are the least popular areas.

Scroll heatmap

The scroll-map lets you see how far down a page visitors scroll, and especially: what elements attract their attention and what do they linger on?

By using a scroll-map, you can determine if users ‘see’ the right parts of your site, or if they get distracted by unimportant elements.

Scroll heat map
source: nguyenvincent.com

If we look at the above screenshot of an article that talks about SEO, we can see that the image and the two lines of text below it are the most popular: about 85% of visitors have seen these elements.

Percentage of clicks heatmap

The ‘percentage of clicks’ heatmap compliments the classic one. It lets you see, element by element, how many clicks were generated by a certain image or CTA. The ability to quantify clicks by element is extremely important.

This allows you to:

  • Understand how much importance users give to each element
  •  Avoid allowing users to click on images without links
Percentage of click heatmap
Source: nguyenvincent.com

Confetti heatmap

The confetti heatmap lets you see each individual click on a page, as opposed to a view that shows a ‘density’ of clicks. It allows you to see if people are trying to click on non-clickable areas, and to fix the problem if so!

Confetti heatmap
Source: CrazyEgg

Heatmap vs. eye-tracking

If heatmaps rely mostly on tracking a user’s mouse movements and clicks, eye-tracking analyzes their gaze.

The point of eye-tracking is to see exactly how your site users look at your site, to analyze the zones where they pay the most attention.

Heat map versus eye tracking
Source: Nielsen Norman Group

As with heat mapping, the areas highlighted in warm colors show the areas where readers pay the most attention.

Although it’s certainly useful, eye-tracking relies on technology that’s a bit more difficult to put in place. It requires specific equipment that most agencies don’t have.

If you’re interested in eye-tracking, there is software based on AI, like Feng-Gui or EyeQuant, that allow you to simulate eye-tracking with the help of algorithms.

Heat mapping tool features

When looking for a heatmap tool, keep in mind the following points:

  • Segmentation: The tool should allow you to create heatmaps specific to certain audiences that you define using certain targeting and segmentation criteria (ex. new visitors, visitors who have converted, visitors from sponsored link campaigns…)
  • Map Comparison: You should be able to easily and visually compare the results of different maps from different user segments.
  • Page Template: Having a heatmap specific to each page can make the analysis tricky if your page is an ecommerce product page, and you have hundreds or even thousands of them. You need to be able to aggregate results for all pages of a certain type.
  • Responsive Heatmaps: The tool has to work on pages accessed from a mobile device. Actions specific to these devices should be recorded, such as touches, scrolls, and swipes. During the analysis, you should be able to distinguish between behaviors and navigation sessions seen on mobile vs desktop devices so that you can correctly interpret the data.
  • Exportable Maps: This important feature lets you easily share your results with teammates.
  • Dynamic Heatmaps: You should be able to see clicks on dynamic elements: drop-down menu, slider, carousel, elements loaded using AJAX or using a JavaScript framework like React.js or Angular.js.
  • Retroactive Heatmaps: Has your site design changed since your last analysis?  Your software should be able to conserve previous results as shown on the then-current website design, and not simply superimpose the results on your new design – the results wouldn’t make any sense.

Combine heatmap and A/B testing

Let’s imagine that you’ve used a heatmap to better understand how your website users interact with your brand. You’ve identified strong and weak points on your site, and you’d like to make the appropriate changes.

Question: How can you measure how effective these changes were? There’s only one solution – A/B testing your modifications.

The idea is to create different versions of your web pages, ads, landing pages, etc. in order to compare how they perform.

By combining heatmap and experimentation, you’ve got yourself a 3-step method to:

  • Identify problems
  • Test potential solutions
  • Choose the highest performing solution

On this home-repair website, a preliminary heatmap reveals that users’ attention and engagement are split between too many competing elements.

Insight: attention is divided and conversion is low.

heatmap and ab testing

With the help of A/B testing, the company made a few changes to the home page in order to refocus visitor attention on one call-to-action.

A second heatmap is made after the modifications.

Insight: attention is refocused on the phone number, the main call-to-action, and conversions increase.

A/B test your heatmap

To sum up, use heatmaps and A/B testing to:

  • Analyze visitor behavior and engagement
  • Reveal strong and weak areas on certain web pages
  • Find specific ways of increasing conversion rates
  • Test these solutions until you see your conversion rates go up

Subscribe to
our Newsletter

bloc Newsletter EN

We will process and store your personal data to respond to send you communications as described in our  Privacy Policy.

Article

7min read

The Step-by-Step Guide to Progressive Rollout

You’ve heard all about the surface-level benefits of rapid product releases. They let you explore, experiment with, and test features faster. They create a more collaborative development process. And they let you run an efficient high-output team.

All of these benefits are true, but the biggest benefits you’ll enjoy from driving rapid releases lie even deeper than is commonly acknowledged…

Rapid releases do create better products. Rapid releases create a short feedback loop between you and your users. You learn very quickly what’s working and what isn’t, and you can quickly adjust.

But even more important, rapid releases get you and your team out of your own heads. Rapid releases force you to get your product and feature ideas out of the lab and into the real world. This constant contact with reality leads you to create products that simply and directly deliver the actual functions your users need most, while leaving the nice-to-have fluff on the whiteboard. 

Rapid releases do create happier users. Rapid releases let you provide new features, and fix bugs, as quickly as possible. You constantly give your users a better and better product.

But on an even deeper level, rapid releases demonstrate that you care about your users. It shows them that you are listening to their feedback, and that you are taking it seriously. It tells your users that you care about them so much that you have structured the heart of your product management strategy around doing whatever it takes to make them happy and loyal.

Rapid releases do create better businesses. Rapid releases—when properly executed—can create a lot of excitement and enthusiasm throughout your entire organization. They create a culture of progress and forward momentum, where everyone feels that they are contributing to real outcomes and not just spinning their wheels.

But rapid releases also improve your organization’s culture through an even subtler mechanism. Each release can act as a touchpoint that connects the product team with everyone else in the organization. It gives you a common reason to celebrate, to collaborate, and to realign groups that are too often siloed.

Now, we don’t want to oversell rapid releases here. They are not a cure-all, and they are not even appropriate for every single situation. But if you are operating in a context where you can accelerate your product and feature release cycle, you’ll experience a whole lot of upside with little-to-no downside.

To help you drive rapid releases in your organization, we’ll use this piece to explore why rapid releases can be challenging to pull off (even in an agile product development framework), what is the key ingredient you can adopt to overcome all of these challenges, and how to bring that ingredient to life in your organization.

The Biggest Challenges to Driving Rapid Releases

Let’s be clear about one thing— not every organization is well set up to deliver rapid releases. Product managers at big, legacy corporations tend to have a hard time getting anything out in a timely manner. This is almost never their fault. They just have so many layers of review and approval for everything they do that it can take months to push out a small feature that a smaller, nimbler organization could release in weeks or days.

If this is your context, then the best thing you can do is attempt to establish the core principles of lean product development in your organization. This will represent a huge win, and speed things up significantly for you, all by itself.

Now for the rest of you— Let’s assume you are working at one of those smaller, nimbler organizations. And you are already following an agile product development process. And you still are not releasing new products and features as quickly as you’d like. Chances are, you’re being bottlenecked by one or more of these subtle challenges:

  • You are completing sprint after sprint but you never seem to get any closer to having something to release. Your entire development process feels like it’s focused on completing code, and not completing products and features.
  • You are getting products and features close to release, but they get trapped in the testing and QA process. This delays their release significantly—sometimes indefinitely.
  • You are able to complete new features and products, but release gets delayed because it’s such a miserable process. It’s always a big, chaotic scramble. And everyone—from your product team to your business stakeholders—gets stressed and worried about what’s going to happen when you publish the changes and delay the process.

None of these issues are solved by the fundamentals of agile product development. It’s easy to focus agile workflows on development and never give much thought to release. It’s easy to put off testing and QA until the last minute for the sake of velocity, and wind up with a huge backlog to deal with at the end. And agile products and features have developed a reputation (deserved or not) for being buggy, broken, and more aligned with what the product team thinks is right, and not what the customer actually wants.

It’s clear that agile in and of itself will not solve these problems, nor ensure rapid releases. But a small tweak to agile will.

How Progressive Rollouts Unlock Rapid Releases in Agile Product Development

You’ve heard of progressive rollouts before. They are considered an optional subset of agile methodology that restructure the entire release process.

Traditionally, a product manager would release a new product or feature in its full form, to every user, at the exact same time. But a product manager that follows progressive rollouts would release that same new product or feature in smaller forms, to a few user groups at a time, and in staged intervals.

Essentially, progressive rollouts let you break up “big bang” releases into smaller chunks. And along the way, you end up solving a lot of the challenges that prevent rapid releases. For example:

  • Progressive rollouts shift the product team’s focus off developing new code, and onto driving releases.
  • Progressive rollouts force you to focus on code quality, and readiness to deploy, instead of code volume.
  • Progressive rollouts remove most of the risks—and resulting stress—from releases by shrinking them into smaller, easier-to-control stages.

Progressive rollouts are the key ingredient that takes the solid foundation of lean product management, and ensures it’s properly lined up to deliver rapid releases. Here’s how you can bring it to life in your organization.

7 Steps to Ensuring Rapid Releases with Progressive Rollouts

  1. Structure Your Release Phases: Don’t let them be hurried, disorganized dashes at the end of a development cycle. Give them the same time, attention, and care as you give every other element of your product management framework. Create formalized processes, and adopt the tools you need to make those processes automatic habits.
  2. Decide Which Products and Features to Release. Review your current queue. Identify the highest impact products and features that you can drive to completion soonest. Employ feature flags to hide features in products that aren’t ready yet, and focus your users on one small subset of new functionality at a time.
  3. Establish Your Personas and User Groups. Identify your highest-value users, and the opportunities they represent. Leverage these groups to test the new products and features they will love most. Personalize and customize their experience to let them know they’re getting early access because of just how valuable they are to you.
  4. Plan Your Progressive Rollouts: Define the features and products you are going to release. Define who they are going to be released to. Define when they are going to be released, and what the stages look like. And then organize your sprints to deliver to these requirements.
  5. Define the Impact of Each Rollout. Establish the exact, measurable, accountable business metrics you plan to improve with each of your rollouts. Define the hard and soft impact each release will have on every function in your business— and tell each function about the release before it happens.
  6. Communicate Your Release. Loop your business stakeholders in on each element of your release plans that might give them pause or concern. Show them how progressive rollouts mitigate their risk around product and feature quality and alignment. And update them on the progress of each release at each stage of your rollout. 
  7. Automate as Much of Your Rollout as Possible. Remove yourself and your team as the bottleneck. Automate your QA and testing. Set your deployment intervals and parameters, and then let your software execute it for you. Monitor your release’s performance at each stage. A/B test as much as possible. And intervene ASAP when an issue is identified. But otherwise, let the right tools make rapid releases through progressive rollouts a smooth element of your agile product development process.

With a little bit of intentional planning, with a shift in the focus of your agile product development, and with the right tools, you can easily bring progressive rollouts to your organization, and rapidly increase the rate of your releases.