When you’ve built a website, you’re probably very proud of what it looks like. Unfortunately - as I’ve experienced myself - this can cause blindness to small issues in your interface and design that you probably never even thought about. One of my favorite ways to solve this is by generating Visitor Recordings.
Visitor Recordings are videos of your users using your website. You can see how they move their mouse, which buttons they click, what info they’re entering in forms, and more. This is even more interesting than it sounds, because it is a really effective way of finding issues and opportunities in your design. User interface & experience design is a field of its own, and the insights you’ll get will often make you realize why.
Some examples of how visitor recordings helped me:
- I built a checkout page, and listed icons of the available payment methods. In the checkout form, people could choose their preferred payment method. However, it turned out that many visitors thought the icons were buttons, and tried to select their payment method by clicking on these images. I then moved the icons to the side of the page, and it all went perfectly smooth from there.
- On mobile devices, I was using a burger menu. In the list of menu items, only the text links were clickable. But in visitor recordings I noticed people often clicked in the general area of the link, instead of directly on it. Because of that, they were clicking three to four times before they actually hit the link to the page. I quickly changed the menu items to be clickable entirely.
There are many more cases of where recordings helped me. I think it’s a great way of finding even the smallest problems in your design. By fixing them, you can greatly improve your user experience. And above all, it’s pretty cool to watch people use what you’ve built!
There are several tools available to implement visitor recordings; it usually only requires copying a few lines of code to integrate it. Personally, I prefer using https://www.hotjar.com. As long as you’re not getting thousands of visitors a day, you can record and store up to 300 visitor recordings at a time for free. It also has some other useful features, like heatmap generation and feedback gathering.
Integrating Hotjar in X and Pro
When signing up for Hotjar, you’ll receive a short tracking code that looks something like this:
<!-- Hotjar Tracking Code for example.com -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:000000,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
This code should go in the <head> of your page. You can integrate it in X using a plugin, but pasting the code in the header using a child theme is my preferred method.
In Pro, this can be done by copying the file /wp-content/themes/pro/framework/views/header/base.php to your child theme.
In X, copy /wp-content/themes/x/framework/views/global/_header.php to your child theme.
You can then add the tracking code before the closing </head> tag in this file. After that, you’re ready to start recording! Also, don’t forget to exclude your own IP in Hotjar settings, so you’re not looking at how you use your website.
