Clarity for a UX designer

Clarity for a UX designer

Creating an amazing user experience (UX) can be challenging. If users are frustrated, they will quickly leave your site and visit a competitor.

Everything on your webpage needs a purpose and every element needs to try and satisfy the user. Products that delight in this way will quickly promote adoption, loyalty, and advocacy. The best UX is when users can intuitively complete tasks on your site without even thinking about them. This iterative process is a journey that has no destination.

Today we caught up with Microsoft’s talented designer, Daniela Buitrago to understand how Clarity helps her deliver the right user experience.

lady with a cat

Hello Daniela! Thanks for taking the time to speak to us. Could you tell us a little about you, the role of a UX designer, and some fun facts about you? 

Hola! I currently work as a designer at Microsoft. My efforts focus on researching and creating digital experiences that aim to bring useful, delightful, and interesting adverts to people when they are using Edge, Bing, or MSN, on mobile or desktop.  

As a UX designer, it is my role to empathize with users, define pain points, ideate solutions, test prototypes, iterate, create designs, and start again. It is vital to think of the user experience at every single moment of their journey as they interact with a service or product. It is my job to make it as seamless, immersive, enjoyable, and adaptable as possible. 

Some fun facts about me:

  • I have a background in Art History.
  • My favorite color is yellow.
  • I have watched The Lord of the Rings trilogy way too many times.
  • I am learning Russian, which is my husband’s first language. 

Describe Clarity in one sentence?

Clarity is an easy-to-use tool that gives you valuable insights into how people are interacting with your website.  

Describe a heatmap to a first-grader?

Imagine that instead of using text or numbers you can easily give information to someone using color. For example, you have a website with a lot of pictures about your favorite hobby and you want to know what pictures people are looking at the most. A heatmap will tell you this. The redder the image the more popular it is. Other colors like blue are used to show the least popular pictures.

How do you use Clarity for UX?

I use Clarity for a variety of reasons, here are three scenarios:

1. Increase product discoverability

Whilst looking at the Clarity dashboard for a particular project, I noticed a high number of dead clicks. By digging deeper into the session recordings I saw most dead clicks were happening on the image carousel. A high number of dead clicks is a sign of poor user experience.

UX change to website

The carousel had a total of five images but users were trying to find more. By moving the scroll bar and explicitly telling users the total number of images in the carousel I was able to significantly reduce the number of dead clicks on the page and improve the user experience.

2. Improve site navigation

The scroll depth feature is really cool as it lets me see if website visitors are missing key content. Whilst looking at one of our pages I noticed the scroll depth was not far enough for users to see related content on other pages of the website.

UX change to website

To mitigate this I added tabs at the top of the page so users can easily navigate to the content that is important to them. By making this change I saw an increase in the time spent on the site.

3. Building a responsive design

The Clarity dashboard makes it easy for you to see how many of your visitors are using a mobile device. By filtering by mobile and watching session recordings I was able to see that some of our header elements were not responsive to small screen sizes. Thus causing a poor mobile user experience.

UX change to website

Thanks to Clarity I was able to share this insight with the engineering team to make the necessary changes and fix the error.

How do you measure success?

For our team, success is measured if we achieve both business goals and user experience goals. In general terms, we can say that we succeed if we:

  • See an increase in our click-through rate.
  • Increase the number of users.
  • Increase time spent on the site.

This data is easy to capture using Clarity and by using filters you can see how the site performs through time. However, it is very important to remember other user experience metrics, such as happiness, engagement, adoption, retention, and task success. Using Clarity you can evaluate to see if you achieve success in areas like retention or task success.

As a UX designer, you constantly need to connect with users so you can design with their needs in mind and consequently create solutions that are useful, interesting, and entertaining. 

Why would a UX designer use Clarity?  

A UX designer will use Clarity to support their design decisions. Information is powerful, and precise information is even more.  Instead of shooting in the dark, you can use Clarity to make thoughtful decisions that will most likely bring positive results.   

Cookies in Clarity

Cookies in Clarity

Cookies are a vital feature for the functionality of many websites. This post will help answer some common questions about cookies and how they are used in Clarity.

What are cookies?

Cookies, also known as  HTTP cookies, web cookies, or browser cookies are small blocks/packets of data created by a web server. A cookie consists of information in key-value pairs, which can be used to identify your page, session, computer network, users, and so on. Cookies, therefore, improve your personalized browsing experience. For example, when you select a language on a website for the first time, a cookie can save your preference for later use so that you don’t need to be prompted every time.

Cookies are very common. The average user’s browser has hundreds of cookies stored across websites visited.

Example:

A cookie is a small block of data. Your web browser stores and handles cookies. Each web browser has its own set of cookies, and you can manage it from the settings window. In Microsoft Edge, you can find web cookies in ‘Settings’ ->’ Cookies and site permissions’ -> ‘See all cookies and site data’.

Here’s a sample:
Cookie example
Browser cookie example

Why do websites use cookies?

Cookies enhance users’ web experience by making it faster, convenient, and personalized. Below are a couple of reasons why websites use cookies:

  • Personalized content: Cookies can store your preferences, surfing patterns, settings, and so on to optimize the site accordingly. For example, a website may present you relevant ads based on your search keywords.
  • Session Management: Cookies can store login states, shopping carts, game scores, and so on so that the website can identify an existing user.

What cookies does Clarity use and why?

For Clarity to function fully it requires that we set cookies on your visitor’s browser. Once you’ve installed the Clarity tracking code on your website, Clarity will start writing cookies when customers visit your website. Clarity’s cookies send us non-personally identifiable information such as session data. Check here to learn what cookies does Clarity set.

How is Clarity compliant with EU cookie law?

European Union (EU) requires websites to adhere to the cookie law. The basic rule around cookies is that websites must:

  • Inform the list of cookies the website uses.
  • Describe the usage of cookies.
  • Obtain the user’s consent to store a cookie on their device. Moreover, the user must fully understand that they are giving consent.

And yes, your data is secure, and Clarity is GDPR-compliant. Visit Clarity’s Terms of Use to learn more. For more answers related to Data Privacy, refer to the Privacy FAQ.

Setting up Clarity cookie consent is one toggle away!

Clarity’s normal functioning requires that we set cookies on your visitor’s browser. By default, Clarity’s tracking code is placed in the HTML header of your site. The cookies are written instantly before your user indicate their consent. Change the setting referenced in the documentation, not to set cookies immediately, and set a flag to tell us when it’s okay to set cookies.

When the script is installed, Clarity’s cookies send us non-personally identifiable information about your users.

Learn more about Clarity data collection.

Read more about Clarity on our Blog page.

Happy 1st birthday, Clarity!

Happy 1st birthday, Clarity!

Wow! What an amazing week celebrating Clarity and our big milestone – our 1st Birthday!

Since its launch, our mission has been to make behavioral analytics more accessible and actionable. A year on, it’s still our driving motivation.

As Clarity’s birthday celebrations come to a close, we want to take this opportunity to thank Clarity users all over the world. Without you, Clarity would not be the product it is today.

For our final celebration post, we have a few more messages to share.

The Clarity team

Our global team works tirelessly to make Clarity a product our users find helpful and useful. Click the video below to meet some of our team (and get a sneak peek into how we’ve worked during the pandemic).

New features: birthday edition

area heatmap

Area maps

Side-by-side view of two heatmaps, to understand historic and current user behavior.

heatmap compare

Heatmap compare

Aggregated heatmap to see how users engage with elements and larger parts of your page.

Emphasis on e-commerce & blogs

We’ve also started focusing on targeted insights based on your site category. Our new e-commerce and blog features will game-change how you understand your visitors.

Content insights

Content insights

See the distribution of reader types and reading behavior on your site -are readers finishing the article or abandoning at headline?

E-commerce most viewed item

Product filters

Slice and dice sessions by product name, their price, their brand, average ratings, and more

checkout abandonment

Purchase conversions & abandonments

Watch successful sessions and isolate the key Checkout steps prone to buyer abandonment

There’s more…

We’d be remiss if we didn’t also include some feature highlights from this past year that we think you’ll love. 

More AI / ML

  • In addition to our fan-favorite ‘rage clicks’, enjoy additional smart behavioral metrics like quick backs

Smoother experiences

  • Track interesting playbacks by labeling or favoriting them for other teammates to see
  • Switch seamlessly between heatmaps and recordings – see heatmaps for recordings you care about & see recordings for the heat areas of interest

Tighter integrations

  • Reuse your GA configurations to filter Clarity data with existing GA segments
  • Get connected to the right Clarity playbacks with Clarity’s own GA dashboard

Deeper filters

  • Slice and dice with new UTM filters, and retain all applied filters when you switch across verticals

Additional updates & features

  • Require user cookie consent to enable Clarity
  • Support single-page apps
  • Block specific IP addresses

Clarity tweets that make our weeks

And of course, we love hearing from you. See below some of the tweets that have excited our team over the last months:  

❤️ https://twitter.com/jasoncartwright/status/1449016749849030659

😍 https://twitter.com/KristenSousa/status/1433808493249798146

👍 https://twitter.com/CyrusShepard/status/1356408320765042689

😎 https://twitter.com/RyanJones/status/1423344433844658176

😊 https://twitter.com/WebMngr/status/1443674239664594946

💖 https://twitter.com/navahf/status/1423335010933907462

Conclusion

This past year has been an exciting ride for us at Clarity…and we’re only getting started.

We have some cool features in the works and would love for you to join us on the ride! Tell us what you like and what you want more of:

Our team is looking forward to Year 2 and hope you are too!

Label what matters with Clarity

Label what matters with Clarity

Labels is a new organization feature for Clarity. You can label sessions recordings with custom text to organize your findings and then come back to them later by filtering. Labels are shared across a project, meaning you can collaborate with your team members to find even more important recordings.

Continue reading “Label what matters with Clarity”