Heatmaps in Zoho Apptics

Heatmap analysis in Zoho Apptics

Overview

Heatmaps in Zoho Apptics help you visualize how users interact with individual screens in your app. They highlight areas that receive more or fewer interactions, helping you understand which elements attract attention and identify potential friction points such as rage clicks (frustration taps for mobile) and dead clicks.

Along with the visual heatmap, you can analyze interactions at the screen, session, and user levels to understand not just where users interact, but the context behind those interactions. The heatmaps dashboard in Apptics console gives you an overview of user interactions across your app screens for the selected date range.

How heatmaps work

You need to integrate the Apptics SDK and have screen tracking and Heatmaps enabled for your app, which allows the SDK to record on user interactions along with information such as the screen, interaction coordinates, gesture type, and associated UI element. This interaction data is then sent to the Apptics server and mapped to the corresponding screen's screenshot in the console for mapping. 

To view an accurate heatmap, follow the below steps:
  1. Integrate and enable Heatmaps using the appropriate Apptics SDK.
  2. Ensure screen tracking is configured so interactions are associated with the correct screens.
  3. Upload a screenshot corresponding to the required screen and app version in the Apptics console.
  4. Apptics overlays the recorded interactions on the screenshot to show areas with higher and lower interaction activity.
Notes
Note: The SDK does not require the app screenshot itself to determine where an interaction occurred. The screenshot uploaded in the console is used to visualize the interaction data collected for that screen. 
Info
The SDK setup for Heatmaps varies by platform and UI framework. Refer to the SDK-specific integration guide for step-by-step guidance:
  1. Heatmaps SDK for Android
  2. Heatmaps SDK for Cocoa

Heatmap analysis in Apptics console



Navigate to Marketer > Heatmaps module where you can see the the heatmap dashboard giving an overview of the user interactions that happened for the heatmap-enabled screens.

Heatmap stats dashboard

You can see stats such as:
  1. Sessions: The sessions recorded during the selected date range for all the screens that have heatmap enabled.
  2. Users: The users associated with the recorded sessions.
  3. Devices: The devices associated with the recorded sessions.
  4. Screens: The unique screen visits recorded during the selected date range for all the screens that have heatmap enabled.
  5. Rage clicks: A rage click (or frustration taps)  is when a user rapidly clicks or taps the same element or area more than once within one to two seconds, showing deep frustration with a broken or unresponsive interface.
  6. Dead clicks: A dead click (or dead tap) is when a user clicks or taps on an element, but absolutely nothing happens on the screen. Unlike a rage click which measures the frustration speed of consecutive clicks, a dead tap measures the complete lack of response from a single or multiple interactions.

The timeline lets you compare rage clicks and dead clicks against the number of sessions each day over the selected period.

User interaction stats


The dashboard also provides a breakdown of the user interactions recorded across the heatmap-enabled screens:
  1. Clicks
  2. Taps
  3. Scrolls
  4. Left scrolls
  5. Right scrolls
  6. Upward scrolls
  7. Downward scrolls

Screen-based heatmap overviews

The heatmap dashboard shows top ten screens based on the user interactions recorded in the selected date range. Each screen card shows the screen name, screenshot, and number of interactions recorded for that screen.

Enable Heatmap to overlay interaction data on the uploaded screenshots. If no screenshots have been uploaded, click Upload to add one.

Upload screenshot for heatmap visualization

Apptics maps recorded interactions to screenshots of your app screens. Make sure you upload the screenshot corresponding to the correct screen and app version so that interactions are mapped accurately.
  1. To upload a screenshot, navigate to Heatmaps module and click Upload.

  1. Select the Application ID, exact screen, and corresponding app version.

  1. Upload the right screenshot and click Upload.
Once the screenshot is uploaded and the co-ordinates are mapped, you will be able to view the heat map for the screen overlayed on the screenshot.
Notes
Note: Supported image formats include .jpg, .jpeg, .png, .webp, .bmp, and .svg.
  1. For detailed screen-wise insights, click on an individual screen and analyze how users interacted with it across sessions and users.

Analyze user interactions for individual screens

  1. Once you click on an individual screen, you can see the list of sessions recorded for the individual screen, data based on users, rage clicks, and dead clicks.

  1. The Element interactions section provides information about the individual elements users interacted with.
  2. The heatmap overlays interaction intensity across the screen on the uploaded screenshot. 
  3. As you scroll down, you can see the list of all the sessions recorded for the individual screen. You can also navigate to other tabs to see the sessions grouped based on users, rage clicks, and dead clicks.
  1. Click on the timeline icon to view full details of the individual user session along with the heatmap details.

How to analyze heatmaps for screens

Apptics currently supports click/tap maps for screens providing a color-coded visual overlay that shows user interaction intensity such as clicks, taps, and scrolls on a website or mobile app screen.



The warm colors (red/orange) indicate high engagement, while the cool colors (green/blue) mean low activity. They also highlight "rage taps" or dead clicks on non-interactive elements.