In this blog article I look at HotJar and how we use it to help inform website content and layout decisions.
Why am I writing this? I talk to a lot of lovely new clients and prospective new clients, and very few have ever done any deeper analysis of website usage beyond Google Analytics; and are missing out on valuable information that will help improve:
- Their visitor’s experience (and brand perception)
- Conversion rates if applicable
- Level of overall website engagement and reduction in bounce rate
Hotjar is a fantastic online tool that allows a site owner or their agency to look at website visitor behaviour in detail. It doesn’t cost very much to use. I like to use it alongside Google Analytics because where Analytics is good at answering the bigger picture questions, Hotjar is great to getting in to the details of how people are actually engaging with website pages. This is important if you want to improve people’s experience with the website and/or improve how it is performing for the business.
Hotjar comes with a number of tools which they group in to:
- Analytics – tools that allow you to capture information and data about website visitors
- Feedback – tools that allow you to ask your website users questions about their experience
I am just going to consider the Analytics side of Hotjar as this is the one we tend to use most on our own and clients’ sites. I may do another article on the Feedback features in time as we use it more.
Heatmaps give you an aggregated view of how all visitors have looked at a page: what they have scanned through, how far down the page they’ve gone and what they’ve clicked on. Hotjar has 3 modes of Heatmap:
Clicks – shows you what users have clicked on. For example, here’s a heatmap of our own site’s menu on our homepage via their desktops:
The most intense click zones (with red and dark orange being the most through to blue being the least) are around the ‘About’ and ‘Get in Touch’ menu items, followed by ‘Our Work’ (which is our case studies) and ‘Umbraco’.
Why is this important to know? As an agency, we’re pretty happy with this heatmap profile as it reflects how we want visitors to move around our site: we want them to find out more about us, what we’ve done and how to get in touch. However, if this didn’t show an even amount of clicks between these pages we would look at re-prioritising our menu, renaming menu items to help visitors understand what each page contains, or making it easier for them to get to the information they are most after.
Scroll – this is a very useful view of the proportion of visitors get down the page. With most websites, there will be quite a big drop in visitors the further down the page you go. Here’s a video:
With our homepage, and quite typically, all users land at the top (red = 100%) and gradually we lose people the further down the page we go. Only 18% of visitors to the homepage get all the way to the bottom.
Why is this important to know? It helps you understand how to prioritise the page’s content and calls to action. For example, if you have some key business messaging or links to other site content further down the page and only 10% of users get to it, then consider moving it further up. Or, if the Scroll Heatmap is showing a very low proportion of visitors getting to the bottom of the page, yet your website has a call to action (CTA) at the bottom, then most will not see the CTA. In this case you may think about moving your CTA further up.
Move – this tracks how people are moving across the page. Here’s a video:
For example above on our homepage, you can see a lot of visitors come on the homepage and immediately click on a menu item to go to a lower level page. Very few who stay on the homepage dwell on the large carousel area, but move immediately on to our agency introduction. What is then interesting is that they then tend to skip the case studies section, and go further down to other text content. Case Studies are a very important aspect of our site and new business so we are currently looking at how to better prioritise and display our homepage content to increase engagement around the case studies from it.
Why is this important? What I would normally expect is a fairly even profile of ‘moves’. However, what is useful to see is where users may think something is clickable and it isn’t and where users are not dwelling, when you would expect them to. Test moving these blocks to different page sections to improve engagement with them.
This is a very useful assessment tool to understand what people are actually doing on particular pages. For example, here’s a video of a visitor that came to our site from Umbraco.com:
You will see that this particular visitor briefly dwelled on the landing page before then going to our blog.
Why is this important? The Recording Hotjar feature is very useful to see actual users’ engagement with a page. It will help you make important decisions about layout, content priority and where to put a site’s call to actions. In our case, we have tested out a few different layout options for particular landing pages and are able to assess how visitors are getting on.
Other points to note about Hotjar:
- At time of writing, Hotjar does a free/demo version that has limited Heatmaps and Recordings: it’s a great way to start.
- I have just mentioned desktop views above, but it also covers mobile and tablet visitors as well, so you can easily compare user experience between device types.
- Setting it up is comparatively easy
- However, if you are changing the site design, we have found Hotjar lags behind with the page background imagery it is capturing. So although you are seeing recent visitors in the data, the background page image Hotjar is showing for your web page may be out of date; which is confusing. We’ve raised this with them a few times and the only thing they tell us is to wait a few days and it will right itself. It’s a bit frustrating, so be aware of this if you plan on testing different page layouts or designs over time.
Overall, we really like Hotjar for the deeper insights it gives us on how people engage with a website. It helps us make important decisions about how to prioritise content and improve design/layout on a webpage. Take a look at it at https://www.hotjar.com/