Use real data from heat mapping to tweak your website for better conversions

If your ecommerce store has been up and running for a while with purchases neatly ticking over but you’re not seeing the surge you expected to see by now, heat mapping is certainly something you should be adding to your process of optimisation. Heat maps could very well be one of the keys to understanding what problems your users are experiencing on your site and where they’re getting caught up instead of making purchases. Making random tweaks and changes to your site (like stabs in the dark) without the data to back it up is a waste of your valuable resources.

There is a wealth of data available via your website’s analytics both on Google Analytics and Shopify’s analytics and reports that you could be using to pinpoint any issues or potential hurdles. However, heat mapping is arguably the easiest tool to use for this very purpose that almost anyone can understand. It’s visual and intuitive, making it a very popular tool for ecommerce optimisation amongst merchants.

What is a heat map?

A heat map is a visual representation in the form of graphical data where the values are depicted by colours. The heat map shows you what users are doing on your web page; where most popular elements are indicated with a hot spot (red) and unpopular elements are cold (blue). This helps you to immediately see where your users are clicking on, scrolling through or ignoring. It’s important to have this data, because it allows you to see how far users scroll, where they are clicking, and what they ignore or pay special attention to. It helps you to identify trends, or potential issues such as elements on a page appearing clickable when they are actually not.

See how areas of the page display a heat signature that indicate the more popular portions over the less popular ones.

There are a number of different types of heat maps that help you investigate different aspects of user interaction on your website, we’ve listed them below:

Scroll maps: These show you how far your users are scrolling down your page, the redder the area the more visitors have scrolled to that point. This is crucial if you want to know if users are reaching important information on that page.

Click maps: These kinds of maps show you average data from interactions on both mobile and desktop devices. Desktop would show clicks and mobile would be taps or touches. Most clicked/tapped areas would appear red, then orange, then yellow. Click maps could help you determine if users are accessing certain areas of your site from a particular page, they can also show you where users might be getting distracted.

Move maps: These show you how users are using their mouse to navigate the page, showing move patterns and pauses. Hot spots show most frequently paused at areas; research has shown to correlate between where people are looking and where their mouse points. Move maps are great at showing you what content is getting good attention, versus what is being mostly ignored.

Desktop and mobile heat maps: Browsing on desktop is a very different experience to browsing on mobile, and side by side comparisons can help to show if the interactions differ as well. For example, some content on desktop may only appear much lower below the fold on mobile and could be getting lost.

The benefits of using a heat map

Heat maps take the guesswork out of identifying solutions to business-critical questions, such as low conversion rates or low user engagement and high bounce rates. They effectively show you exactly what your average user experience is, allowing you to determine whether they are reaching important content, able to find and use main page links such as the contact buttons, getting stuck on non-clickable elements, or having a device-specific issue.

Making informed decisions backed by real data for tweaks and fixes to your website is crucial, and heat maps can help you get easier buy-in from other team members as heat maps are difficult to refute and simple enough for everyone to follow.

How to create a heat map

You can use your Google Analytics to view heat maps, or you could use a paid for service that provides a heat mapping tool such as Hotjar or CrazyEgg. Whether you can get by using your Google Analytics heat maps or whether a more feature-rich version is needed lies largely on how detailed you would like to go with your reporting on user interaction and how many visits you receive a month. Some heat mapping third-party apps have a trial or free version that you can try out and see if you like it first, which is always the best bet when there are lots of options.

Google Analytics for heat mapping: You will need to install Google Chrome as your browser, if you don’t already use it, and then install the addon for Google Chrome – Page Analytics (by Google). It doesn’t have all the bells and whistles that a dedicated heat mapping tool will have but it still gives you your users’ interactions on your website from a visual perspective. Perhaps this could be your introduction to using heat mapping to identify issues with your website and progress to a standalone third-party app thereafter. It’s free and easy to install with lots of how to’s on the internet.

Hotjar: Hotjar is a dedicated heat mapping tool that you would need to sign up for. It is available for Shopify by installing the Hotjar Shopify app or manually adding the Hotjar tracking code to your Shopify theme. Add the tracking code (a JavaScript snippet) to your website and then go to your dashboard to start viewing your data. There is a free forever version, which they deem for ‘personal use’ that includes tracking for only 2000 pageviews. The smallest paid for package is called Plus, which is $29 per month and includes tracking 10 000 pageviews per day. The Professional package tracks $20 000 pageviews a day and that is $89 a month. Hotjar offer a 15-day free trial for you to test it out first.

CrazyEgg: This heat mapping tool offers visual reports that include individual session recordings so that you can watch how a user interacts with your webpage. They also offer an A/B testing tool with a quick edit function to make simple aesthetic changes such as colours, fonts, hide elements, and then publish to live. Their basic plan is $24 a month to track 30 000 pageviews, 100 session recordings, on one website. This also includes unlimited A/B tests and edits, as well as 3 months’ recordings storage. CrazyEgg offers 30 days free to test.

We use heat mapping in our evidence-based approach

Our firm belief in a data-driven approach to website improvements to boost ecommerce conversion rates lead us to using heat mapping as an integral part of our analysis of customer websites. Our ConversionBoost service involves doing data collection and analysis in order to improve and enhance our merchants’ Shopify stores. Most of our customers who sign up for this service have established stores and are looking for optimisation to increase their sales conversions. We use analytics and heat mapping techniques to make evidence-based suggestions to effectively boost sales.

Conclusion

If you are looking to improve your online store’s performance, such as to increase conversion rates, lower bounce rates, and provide a better user experience for your visitors, then heat mapping will give you a better understanding as to how your users navigate your website. You will be able to make informed UX design decisions by easily identifying friction points in the experience. The data you collect can be sliced and diced by the device being used, the browser type, the purchasing behaviour, source, and more. Whether you use the simple version provided by Google or invest in a third-party app like Hotjar or CrazyEgg, you will be able to make your website better serve you and your customers to drive sales conversions.

If you’d like to know more about how our ConversionBoost service take a look at the this page and feel free to reach out by emailing hello@shopcreatify.com if you have any questions.