Microsoft: Our free tool helps to improve your websites

Once you’ve instrumented your website you can start to get details of what your users are doing and how they’re doing it. Part of that process is recording and playing back user sessions, watching interactions and paths through a site. Another is getting a heatmap overlay on a page, displaying where users interacted most with a page. Together the two techniques show what works for site navigation, and what reduces impact. Are users spending time trying to click on a page element that isn’t interactive, or are they going down a path that causes them to simply abandon their transactions? 

SEE: Windows 10 Start menu hacks (TechRepublic Premium)

Currently free-to-use, it’s easy to add Microsoft’s Clarity to an existing website. There’s minimal overhead, and all sizes of site are supported, with no traffic caps. It’s important to note that Clarity is not recommended for sites that work with sensitive data, as session recordings could capture that information and store it on Microsoft’s Clarity servers. 

Getting started with Clarity 

Signing up is free, using Microsoft, Google, or Facebook accounts. This creates a workspace where you can add projects, selections of pages or sites or domains. Adding a new project creates a basic template, with a site name, URL, and category. This generates the unique tracking code for the project, which you need to include in your page content. It’s a JavaScript function that sits in the page Head block, and once installed it will start delivering data to your Clarity dashboard. 

Microsoft has designed Clarity to work with modern sites, and it works best with current-generation browsers. You can add the code to your site HTML, or there’s support for generated HTML frameworks on platforms like Wix, Squarespace, or Shopify. There are setup instructions for most common platforms on the Clarity site. You can even integrate with tools like Google Analytics, giving you one place to work with all your site data. 

Like much of web development, an analytical tool like Clarity needs to be collaborative, with access for various team members. Currently there’s support for two roles — administrator and team members. Sites can have multiple administrators, although they have little advantage over standard team members, with team members able to access all of Clarity’s analytical tools. Members are added by the original administrator, and all you need is an email address. Team members don’t need to be in the same email domain, so if you’re a web design agency you can mix your design team with your clients, giving everyone the same view of a site. 

Tracking clicks with heatmaps 

Heatmaps are an important tool for visualising how users work with your sites. They identify ‘hot’ and ‘cold’ areas of a site by tracking clicks and scrolls, showing what attracts a user to hot areas of a site. Clarity will overlay a heatmap over a page, helping you quickly understand where interactions happen. It’s not a perfect technique, but when used in conjunction with A/B tests of a page design it can help refine designs that funnel users down specific paths through a site, for example, making it easier to buy products. 

Information in a Clarity heatmap is aggregated, calculated from all your tracked site visitors. They’re element-based, rather than using mouse clicks and positions. That should make them more accurate, as they account for differences between site views, helping bring information from different responsive design views of a site, from big screens to small, to mobile, into one view. That does require a more disciplined approach to page design, labelling elements where possible. There’s a useful side-effect to labelling elements to support Clarity heatmaps: labels make it easier to use the F12 tools to debug site interactions, and they simplify adding JavaScript interactions to a site or using automated site-testing tools. 

Currently Clarity only provides click heatmaps; scroll maps are coming in a future release and help you see how far users scroll down a page. This can help you refine page length rules for a site, as well as helping you choose how to prioritise elements on a page. You will be able to see the percentage of a page scrolled, the number of pixels scrolled, and the number and percentage of users that have scrolled to that point. Microsoft is planning to add support for regular expressions, to allow more complex queries and analytics. 

Record user actions for playback 

More complex analysis can be handled by session recordings. These let you capture a user’s path through your site and content, with a timeline that helps you identify key events. Session recordings are best used to drill down into specific issues with a site, where you want to understand more about why something happened and what a user’s choices were. Sensitive data is automatically masked, as Clarity aims to be GDPR-compliant. 

Reports wrap page content, with tools to manage views and mapped URLs, as well as letting you flip between different device types. There are some limits to heatmaps: most importantly, they only aggregate up to 100,000 page views. While that should be fine for most sites, very big web applications with many millions of users may need to implement their own local tracking and analysis tools. 

Find what’s important with Insights dashboard

There’s a lot of data in both heatmaps and session recordings, and it can be hard to choose what’s important. Microsoft has made a significant investment in machine learning, and as web analytics is fundamentally a big data problem, Clarity has been able to take advantage of this in its Insights feature. Insights gives you a dashboard that shows the sessions and events that matter the most, so you can drill into them with recordings and heat maps. 

Part of the Insights dashboard details what Microsoft terms ‘semantic metrics’. These are signs that users are unhappy with a site, if they’re scrolling rapidly, or clicking multiple times in the same place (Clarity calls this ‘rage clicking’). Other issues that are exposed include quick clicks away from a page, or clicks that don’t result in a response from a site. Here users might not be finding what they expect, or site errors may be causing problems. You can drill down into these metrics, to understand better what happened and where on the site, and what you might be able to do to fix things. 

SEE: Checklist: Securing Windows 10 systems (TechRepublic Premium)

The Dashboard is where you’ll spend much of your time with Clarity. It gives you an overview of what’s happening on your sites and applications, showing where users come from, what they spend time on. There’s also the option to apply filters to your data, helping drill down into specific issues and pinpointing where you need to use heatmaps or recordings. It’s an ideal tool for managers, giving an at-a-glance overview of site performance and user satisfaction that can help them make decisions about user experience using data rather than anecdotes. 

For a free tool, Clarity is surprisingly powerful, with much of what you need to get an overview of a website or application in action, from a user’s point of view. It’s important to remember that it’s only part of what you need to manage a site, and you should be prepared to use it alongside A/B testing, automated testing tools, and the F12 tooling built into your browser. Still, it’s well worth using, as you’re not going to find anything else this powerful for free. 

Also see