Understand how users interact with your pages —where they click, what frustrates them, and what gets ignored all in one view.
When should I use heatmaps?
Use heatmaps to answer:
Are users clicking on the elements you want them to?
Are they tapping areas that aren’t interactive (dead clicks)?
Are some layouts confusing or causing rage taps?
Is your new navigation or CTA actually getting noticed?
1. Set up a heatmap
Step 1: Create heatmap
There are 2 ways to create a heatmap for a screen.
1. From screen analytics: Click on the + icon for a specific screen.
2. From scratch: Go to heatmap > Create heatmap> and match the screen using "is" or "contains" URL rules.
Step 2: Apply Filters
You can add as many filters as needed to narrow down the heatmap to focus on specific user segments, experiments, or products. You can filter by all the filters available throughout UXCam including screen, session, user, device and location properties.
💡Tip: Combining filters gives you the most powerful way to isolate friction points or validate hypotheses about specific user groups.
📦 Find the heatmap of a specific product (product ID) in the product page.
Want to see how users interact with a particular product page? If you pass product specifications as a custom property or define the product with the page definition feature, you can filter to see interactions for that specific item.
1. Choose the relevant screen page.
✏️ Note: Remember, you can define pages and save properties based on URL data (e.g. Product name, product category). These will be saved as screen properties. 📚 Read more on how to define pages here.
Defining pages makes heatmaps more powerful!
2. Filter > Screen visit properties > Custom screen property > Product ID.
Analyze performance of A/B Test Variant
If you're running an experiment (e.g., variant: A
vs variant: B
), and send over test variations as a user property, you can filter by the variant property to visualize how each version performs—especially on CTAs or banners.
Filters > Custom user property> Test Variant is A.
Step 3: Choose the device type
Select from desktop, tablet, or mobile.
Step 4: Choose the view mode
Click Type: View Single and double Clicks, Rage Clicks, Dead Clicks, First Click, Last Click, All clicks.
💡Tip: If a screen has a high exit rate, we suggest to filter for last click on screen to understand what gestures users take last before exiting.
Element Limit: Show top 5 to 50 clicked elements. (The default is 10)
💡 To get clearer insights, stick to the top 5 or 10 elements—this helps reduce visual noise and makes patterns easier to spot.
⚙️ You can adjust the opacity to improve visibility of heat zones, and toggle "show top elements" to highlight the most-clicked elements on the screen and reveal their. position on the page
Step 5: Save the heatmap
Name and save it to keep your filters and view for easy access later.
2. Analyze the heatmap
🔍 Hover over any clickable element for key metrics
Hover over any element to see key interaction metrics:
Number of Clicks: Total number of times users clicked on the element.
Click Rate: Percentage of all clicks on the screen that went to this element.
Example: 7.8% out of 3,459 clicks means this element received 7.8% of total interactions.
Click-Through Rate (CTR): Percentage of screen visits where the element was clicked at least once.
Example: A 41.9% CTR from 644 visits means nearly half of users engaged with this element when they visited the page.
These metrics help identify which elements attract attention—and which drive meaningful engagement.
Click "Show Top Elements" to:
View the element hierarchy ranked by interactions
Jump to element positions on the page
(Coming soon) Launch session replays directly from this panel
Scrollable Areas: If your screen contains inner scrollable components (like carousels or product lists), UXCam accurately tracks interactions inside these zones too.
3. Understanding Screen metrics on the right
The right-hand panel shows metrics to contextualize user behavior on this screen. For most of these metrics, you'll find the count, ratio, and % change.
Metric | Description |
Screen Visits | Total number of visits that included this screen. |
Exits | Count of sessions that ended on this screen. Ratio formula: Count of screen visits to screen that were exit / count of screen visits to screen *100 |
Average Time | Avg. time users spent on this screen |
Rage Taps | Rage tap ratio: Count of screen visits to screen with at least 1 rage tap / count of screen visits to screen *100 |
Dead Clicks | Dead click Ratio = Count of screen visits to screen with at least 1 dead click / count of screen visits to screen *100 |
Refresh events ratio | Refresh % = Count of screen visits to screen with at least 1 refresh event / count of screen visits to screen *100 |
Top 3 Previous Screens | Most common screens users came from. This can include launch. |
Top 3 Next Screens | Most common screens users navigated to after. |
More Use Cases
Now that you understand how to set up a heatmap, let's look at some ways to leverage heatmaps for real decisions.
Analyze new feature adoption
After launching a new AI widget, filter by sessions after the release date and review if users interact with it. Use heatmaps to validate visibility.
Drop-off Investigation
If your screen analytics show a high bounce or exit rate on a specific page (e.g., checkout), open its heatmap to uncover ignored or confusing elements. You can also select last clicks on screen under view to understand what yours are doing just before they leave the page.
Segment by Device or Behavior
See whether desktop users click more on banners, while mobile users interact more with the menu.