How to Use Heat Maps to Improve Your Website User Experience

Website is increasingly vital for businesses to connect, engage and sell to customers. Yet many companies make the mistake of neglecting their website for a variety of reasons. Some may feel it is irrelevant, while others think that it only applies to certain industries that provide e-commerce or digital solutions. Especially now with the Covid-19 pandemic, our lifestyles have shifted mostly online; a business’s website has become the highway to reach your customers.

 

Creativeans’ previous website was built back in 2015 and many things have since change. Not only has our services expanded to include UI/UX and web design, but our business has pivoted as well. Additionally, our outdated website structure simply cannot deliver the functionality and experience we wanted to deliver to our users, and the lacklustre content also affected our site’s search engine ranking. Thus, we set off our website re-design to focus on improving user experience, optimisation of SEO and speed. We also wanted to create more immersive content whilst updating our branding, services and works.

To achieve our new goals, we needed to understand how users behave and interact within our site so we can determine how we can improve our website. We utilised Hotjar, an online analysis platform that uses heat maps to record websites’ user behaviour. Heat maps consist of three types – the scroll, click and movement maps.

 

Scroll Maps Analysis

Scroll maps provide a visual scale for the average fold rating, informing us on the mean visibility users see on their screens before scrolling further. By analysing scroll maps, we were also able to discover where users lose interest in individual web pages and the percentage of users that dropped off so we can review our content layout and strategy. The red represents most views in comparison to the blues where most users do not scroll to. We also identified possible false bottoms in our web pages – this happens when users do not reach the pages further down. This could be caused by line breaks or white spaces, giving the impression of the site having already ended.

Click Maps Analysis

Secondly, we analysed click maps that record where users click, tracking on-page user engagement – buttons, links and images. With the data, we can understand what gets more clicks and how recognisable a link or image is. We learnt which of our subpages garnered the most interest, it also brought to light that no one was watching our video.

Move Maps Analysis

Lastly, a move map provides an overview of how users move their cursors and where they stop. This informs us on our site’s user experience, how intuitive or easy it is to navigate around. We could also tell the type of content people paid most attention to are our Works and Services, with the least being the Contact Number and Footer Form.

After the launch of our new website design, we compared the new site’s performance with the old website between the same periods of 2019 and 2020 respectively. The bounce rate has fallen by 17%, which means less users are exiting our website after viewing only one page. There was also a 39% increase in users’ average session duration; more people stayed on our site for longer periods of time. This improvement proves that our site is engaging, and users are staying to explore more content. By using tools such as Heat Maps in the redesign of our website, we can make more precise design iterations and deliver tangible results.

Related Article: 10 Heuristics Evaluations You Need to Conduct for Website Audit