How to Use Zipy Heatmaps to Learn About User Behaviour? 

What are Zipy Heatmaps?

Zipy's Heatmaps is a great tool for visual analytics that shows you exactly how people interact with your app or website. With colour-coded overlays and visual representations, you can see where users click, how far they scroll, and where they get stuck. By looking at these patterns of interaction, you can find usability problems, make page layouts better, and get rid of things that stop conversions.

What Makes Zipy Heatmaps Unique

• Heatmaps perfectly pair up with Session Replays. When you find high drop-off points or anger click patterns, you can easily use Session Replays to see what the user did that caused the problem.

• Instead of just seeing that users left, you can easily tell if they were angry because of broken features, Javascript problems, or UI elements that were hard to understand.

• Zipy uses different colour scales, like red, yellow, and green, to show you where most users are having trouble.

Prerequisites:

• Set Up the Zipy SDK: You need to install and run the Zipy SDK script on your website or app to make sure everything gets perfectly tracked.

• User Identification: To link heatmap data to specific user accounts, use the zipy.identify() method in your code. This lets you see how different groups of users behave and get in touch with those who are affected.

• URL Selection: Make sure you have a set of URLs which you want to track and observe.

• Plans: Check if your current Zipy Plan lets you use the Heatmaps feature.

‍How to set up your own Heatmap:

Step 1: Navigate to Heatmaps

• Sign in to your Zipy Dashboard.

• On the left side of your dashboard, you should see the navigation menu.

• To get to the visualisation interface, click on the Heatmaps option.

‍

‍

Step 2: Select Your Webpage

• Click on the Create Heatmap Button to start building your custom Heatmap

• Name your heatmap: Give your heatmap a name so that you can find it easily.

• Search by URL: You can enter the exact URL of your page, like https://yoursite.com/pricing.

Choices for Matching URLs:

• Is
• Includes
• Matches Regex

‍

Step 3: How to Read Your Heatmap 

Heatmaps give you a lot of valuable information:

• It shows you exactly where people click on your page by using colour-coded overlays. Red and orange are warm colours that show areas with a lot of clicks, while blue and green are cool colours that show areas with less activity.

What you will see:

• Exact number of user clicks for every element

• The visual intensity shows where the most and least clicks happened.

• Parts that are interactive and get the most attention

‍

Step 4: Figuring Out Where the Problems Are

• Finding Rage Clicks: Rage clicks are quick, repeated clicks on a certain UI element. This is a clear sign that the user is facing difficulties. 

Major Issues:

• Links or buttons that look like they can be clicked but don't do anything

• Parts that take a long time to load when users expect a quick response

• Errors in Javascript code or features that don't work

How to use this information:

• Click on the color indicators to see which sessions are affected.
• Check out the Session Replays to see what upset users and get a deep understanding of issues.
• Check the console for mistakes.
• Fix the technical or user experience issue that is causing the problem.

Step 5: Use filters to pinpoint error detection

There are a lot of filters in Heatmaps that can be used to make sure that every problem is solved quickly and completely.

Why filtering is important: Users often behave in very different ways. A dead click might only happen on mobile devices, and a rage click might happen among people who saw a certain ad.

‍

Step 6: Use Session Replays to your advantage

This is where Zipy's integration really shines. You can easily go from quantitative heatmap data to qualitative session analysis.

How to watch the Session Replays:

• Look for a problem area on your heatmap, like rage clicks, dead clicks, or low engagement.

• Click on the hot spot or indicator you want.
• Get a complete understanding of the drop-offs users faced.

• Watch the Session Replay to go into depth of your problems.

‍

‍

Optimizations based on Heatmaps

1. Make baselines (Quantitative Base)

Before you make any changes, write down your current state in exact numbers.

The Insight: "65% of users scroll past our main call to action, and every day we get 45 rage clicks on the 'Buy Now' button."

The Worth: You can now use real numbers to see how much better things are getting and how much money your optimisation efforts are making you.

2. Find the root causes (Qualitative Investigation) 

This is what sets Zipy apart from other heatmap technologies.

The Mechanism: After reading your Heatmap, move straight to your Session Replays.

The Discovery: Users might not be scrolling because the hero image takes a long time to load, or they might be rage-clicking because a button makes a form validation mistake without clear feedback.

3. Fix the things that are most important first

Some issues are more important than others. Focus on the things that matter most for reaching your business goals.

Important: Clicks on the payment confirmation button have a direct effect on sales, fix this right away.

Medium Priority: Dead clicks on a secondary navigation element don't stop people from getting to where they want to go, but they do make the experience a lot worse.

Low Priority: If a blog post doesn't get a lot of traffic, it's fine to wait on scroll depth issues.

‍Efficiency: Engineering teams can spend less time fixing problems that have been shown to hurt business metrics and more time fixing problems that haven't been shown to hurt business metrics.