Compare Heatmaps in Wingify

Overview

Wingify’s Compare Heatmaps feature allows you to analyze and compare two heatmaps side-by-side within a single view. You can compare the heatmaps across different segments, variations, or date ranges for the same page, or you can compare two different URLs to compare user behavior across different pages.

By comparing heatmaps, you can gain deeper insights into user behavior by visualizing how different segments or variations interact with your website. You can also quickly identify patterns, trends, and areas of interest, leading to more informed decisions for optimizing your website's user experience and conversion rates.

For example, your organization’s growth team is getting ready for a major product launch. To ensure the landing page is optimized for maximum conversions, they can use the Wingify Compare Heatmaps feature at multiple stages to guide decisions and measure performance as follows:

• A/B test performance Run an A/B test on two page variants and compare heatmaps to see which drives more engagement.
• Time-based analysis Compare heatmaps from different date ranges or time periods to identify popular trends.
• Device-based comparison Compare desktop and mobile heatmaps to analyze why mobile users aren’t interacting with elements on the landing page.
• Visitor attribute-based comparison Compare heatmaps to analyze user behavior across different visitor attributes such as visitor type (new or returning), traffic source (email, direct, paid, or social media), location, and more to reveal patterns unique to specific audience segments.
• [Coming Soon!] Before vs. After redesign Incorporate the learnings from the analysis and redesign the page. Compare pre- and post-redesign heatmaps to validate improved user interaction.

This article further explains how to access and use Compare Heatmaps in Wingify.

Use Compare Heatmaps

There are two ways to access and use the Compare Heatmaps feature - directly from the Heatmaps dashboard or from within a heatmap view.

Suppose you want to compare the click behavior of two different user segments (new visitors vs. returning visitors) on your homepage. You can use the Compare Heatmaps feature directly from the dashboard without first generating individual heatmaps. Alternatively, if you are viewing a heatmap for new visitors and now wonder how the returning visitor segment performed, you can convert the standard heatmap view for new visitors into a heatmap comparison view.

This section further explains how you can access and use the feature in both ways:

1. Log in to your Wingify account.
2. Go to Insights > Heatmaps.
3. Enter the URL for which you want to see the heatmap and update the filters.
4. If you want to generate an individual heatmap, click View Heatmap. After the heatmap is generated, click the Compare icon on the control panel at the bottom of the screen.
5. If you want to compare the click behavior of two different user segments, variations, or date ranges, click Compare. The Compare Heatmaps panel appears. It consists of two sections, one for each heatmap you want to compare. By default, the URL and filters of the current heatmap are auto-populated in the first section. In the second section, Wingify auto-populates only the URL of the current heatmap. Configure the remaining details for each heatmap.

6. Update or enter the URL to compare for each heatmap, which is the page URL where you want to generate the heatmap report.

   Info: You can enter the same URL in both sections to compare different segments, devices, variations, or date ranges for the same page, or you can enter two different URLs to compare user behavior across different pages. For example, you could enter https://vwo.com/pricing/ in both sections to compare how users on mobile devices interact with the pricing page versus users on desktop devices. Or, suppose you are promoting a newly launched AI-powered analytics feature via two entry points, the homepage and the dashboard page. You can enter the URL of each page in each section to compare which placement drives better engagement for the new feature.

   Wingify recommends choosing URLs that are logically related for meaningful comparisons. The URLs should have a shared context or purpose. Comparing unrelated pages might not yield useful insights. However, don’t be afraid to try different visualization combinations. For instance, comparing a clickmap with a scrollmap might reveal unexpected results.

7. For multiple URLs, click Advanced and enter the corresponding URL, pattern, or regular expression of the web page(s). For more information, see View Heatmap for Multiple Pages or View Heatmaps for Multiple URLs with the Same Pattern.

8. Select the Visualisation type from the dropdown. Choose the type of heatmap you want to generate independently for both URLs. You can choose the same visualization type for both URLs or different visualization types for each URL, for example, a clickmap for one URL and a scrollmap for the other. Select the visualization type that best aligns with your analysis goals. For example, use clickmaps to analyze click patterns and scrollmaps to understand scrolling behavior.

   Note: Hovermaps are supported only on Desktop devices. If you select Mobile or Tablet in the device filter, the Hovermap option in the Visualization dropdown will be disabled.
9. Apply filters to each heatmap configuration based on audience segments, date ranges, or test campaigns. For more information, see Filter Heatmaps.
   
   Wingify recommends applying consistent filters in both sections for accurate comparisons.

10. Click Compare. Based on your selection and configuration, Wingify displays two heatmaps side-by-side in a new browser tab, allowing you to compare user behavior visually. 

    This side-by-side comparison lets you see how user behavior differs between desktop and mobile users on the Wingify pricing page. Based on your requirements and analyses, you can use this information along with other Wingify features to optimize the mobile or desktop experience.

    You can also use Wandz to compare heatmaps. It automatically detects statistically significant differences in user interactions between two heatmaps and summarizes where attention shifts, friction points appear, and engagement patterns change. To learn more about Wandz analysis, refer to Using Wandz to Compare Heatmaps.

This article further explains how to interpret the heatmap comparison view.

Interpret and Interact with the Heatmap Comparison View

Once Wingify displays the heatmap comparison view, you can use it further to get actionable insights.

The control panel at the bottom of the screen lets you interact with and customize the heatmap view according to your requirements. You can filter the data, choose different visualization types, limit the data displayed for faster loading, and download and share the heatmaps.

Scroll through and zoom in or out of each heatmap to focus on specific areas of interest and examine details closely. Use Synchronous Scrolling when comparing heatmaps of the same type. It allows you to scroll both heatmaps simultaneously to track corresponding areas easily. 

For more information on other control panel options, see Interpreting Heatmap Reports in Wingify.

To exit the comparison view, you can simply close individual heatmaps within the comparison view by clicking their respective close buttons at the top right corner of the window. This removes the specific heatmap from the comparison, allowing you to add a different one.

Limitations

• While the individual heatmaps can be shared, the comparison view cannot be directly shared.
• You can download each heatmap individually but not the combined comparison view.

Troubleshooting

 For additional troubleshooting guidance, refer to Troubleshooting: Heatmap Report Not Loading in Wingify. If the problem persists, contact Wingify support.

FAQs

• Can I compare heatmaps from different websites?
  Yes, if they are being tracked in the same account.
   
• Can I use Compare Heatmaps with other Wingify features?
  Yes, you can combine Compare Heatmaps with other Wingify features like session recordings to gain a more comprehensive understanding of user behavior. For example, you can identify areas of interest on the heatmap and then watch session recordings of users interacting with those areas.
   
• Can I export the raw data used to generate the heatmaps?
  While you can download the heatmap images, the raw click and scroll data is not directly exportable through the Compare Heatmaps interface.
   
• Is there a limit to the number of heatmaps I can compare?
  No, there is no limit to the number of heatmaps you can compare.
   
• Are the clicks in the heatmap comparison between two test variations based on sampled data?
  Yes, the clicks shown in the heatmap comparison are based on sampled visitor data from Insights. If you notice too few clicks, you can adjust the sampling rate by enabling flexible sampling. However, increasing the sampling rate may exhaust your monthly quota faster. Use this option carefully to manage your resources effectively.

Need more help?

For further assistance or more information, contact Wingify Support.