Introducing Microsoft Clarity

Introduction

I'm Wu from the Global Development Group. I usually work as a project manager for web and portal projects. I recently started going to the boxing gym again. I want to work hard on muscle training and dieting!
We introduced a heat map tool called Clarity from Microsoft to the website we are developing, so I'd like to talk about it.

Background

The global expansion of the mobility service KINTO is introduced on the Global KINTO Web, faces the challenges such as short page visit durations and high bounce rates among users. While Google Analytics allows us to check metrics like scroll depth and click-through rates, it doesn’t provide insights into user behavior or what captures their interests. Therefore, we decided to implement an analysis tool that allows us to monitor user behavior and easily identify issues.

Reasons for Choosing Microsoft Clarity

As mentioned earlier, Global KINTO Web is currently a relatively small website and is not a service site. Considering the cost-effectiveness, we needed a heatmap tool that was as affordable and easy to implement as possible. We evaluated popular tools such as User Heat, Mieruka Heatmap, Mouseflow, and User Insight. However, there were several reasons why we ultimately chose Clarity. First, it is provided by Microsoft, a company already integrated within KINTO Technologies. Secondly, it is entirely free. Additionally, Clarity allows us to grant permissions to team members, enabling collaborative management. The simple setup process and the minimal engineering workload required for implementation were also critical factors in our decision. Comparison table of popular tools.

Tools	Features	Implementation method	Price
Microsoft Clarity	・Instant Heatmap: Shows where users clicked and how far they scrolled ・Session recording available (←very useful) ・Recording ・Google Analytics integration	Provided by Clarity, embed HTML tags into the website	Free
User Heat	・Mouse Flow Heatmap ・Scroll Heatmap ・Click Heatmap ・Attention Heatmap	Provided by User Heat, embed HTML tags into the website	Free
Mieruka Heatmap	・Three Heatmap functions ・Ad analysis feature ・Event segmentation feature ・A/B testing feature ・IP exclusion feature ・Customer Experience Improvement Chart	・Free Plan: 3,000 PV/month ・Paid Plan: Offers options like AB testing, etc.
mouseflow	・Basically includes the above features, plus robust funnel setup and conversion user analysis ・Recording feature ・Form analysis feature (View details like input time, submission count, drop-off rate)	Embed Mouseflow tracking code into the website	Starter plan (11,000yen/month) to Enterprise plan

What is Microsoft Clarity?

Released on October 29, 2020, Microsoft Clarity is a free heatmap tool provided by Microsoft. According to the official website,

it is a user behavior analytics tool that allows you to interpret how users interact with your website using features such as session replays and heatmaps. Microsoft Clarity

Setup

1. Create a new Project in Clarity.
2. Paste Clarity’s tracking code into the header element of your pages.
3. Integrate with Google Analytics.

Dashboard

The Dashboard provides a clear overview of your site’s status with unique metrics such as Dead Clicks, Quick Backs, Rage Clicks, and Excessive Scrolling.

Dead Clicks

Dead Clicks refer to instances where a user clicks or taps on an element on the page, but no response is detected. Dead Clicks
You can see exactly where users clicked. It’s also easy to understand because user movements are recorded in videos.
In the case of Global KINTO Web, panels introducing each service are frequently clicked, which suggests that users are seeking more detailed information.

Quick Back

Quick Back refers to when a user quickly returns to the previous page after viewing a page. This can happen when users quickly determine that the page is not what they were looking for, or when they accidentally click on a link. It helps identify parts of your website where navigation might be less intuitive or where users are more likely to make accidental clicks.
Quick Back

Rage Clicks

Rage Clicks refer to when a user repeatedly clicks or taps on the same area multiple times. Rage Clicks Global KINTO Web, there were several users who were repeatedly clicking on a collection of links due to slow internet speeds. Upon investigation, it was found that this issue occurred specifically for users on the same operation system, leading to further device testing.

Excessive Scrolling

Excessive Scrolling refers to when users scroll through a page more than expected. This metric helps identify the percentage of users who are not thoroughly reading the content on a page. Excessive scrolling

Heatmap

Click Heatmap

You can see how many times users clicked on which parts of the page. The left menu shows the ranking of the most clicked parts.
Click maps

Scroll Heatmap

Scroll Heatmap shows how far users scroll down the page. The red areas indicate the most viewed sections, with the colors gradually changing from orange to green to blue, representing decreasing levels of engagement.
Scroll maps

Click Area Heatmap

The Click Area Heatmap functions similarly to the Click Heatmap but allows you to see which extensive areas of the page are being clicked on. This helps determine whether the content placed on the page is being viewed.
Area maps

Recording

User behavior is recorded in real-time. You can review the mouse cursor’s position, page scrolling, page transitions, and click actions through the video. Additionally, information about the user’s device, location, number of clicks, pages viewed, and the final page visited can be accessed from the left-hand menu. The ability to view the entire sequence of user actions in a realistic video format might be Clarity’s most compelling feature.
Recordings overview

Conclusion

The Global KINTO Web iis still in development and has room for improvement. After deciding to implement a heatmap tool, we were able to release it in just about two weeks (0.5 person-months), thanks to the quality of Clarity and the ease of its implementation. While we are not yet fully utilizing all of its features, we plan to leverage this tool moving forward to provide an even better user experience.