Touch Heatmap Generator
Visualize frequently touched areas.
Tap, click or press Space to keep count.
Tap anywhere inside or press Space
How the Touch Heatmap Generator Works
The Touch Heatmap Generator divides the surface into a grid, counts the touches in each cell and colors the cells from cool to hot by touch count. The hottest cells mark the most-touched areas.
- Collect touches: Tap the surface as you would use a real layout.
- Set the grid size: Choose cells of 10, 20 or 40 px.
- Generate the map: The tool counts touches per cell and applies a color scale.
- Read the hot spots: Red cells show the highest counts, and blue cells show the lowest.
Touch Heatmap Generator Formula
The Touch Heatmap Generator cell intensity equals the cell's touch count divided by the highest cell count.
- s
- Cell size in pixels
- Count(cell)
- Touches in one cell
- Max count
- Highest count in any cell
Example: With 20 px cells, a touch at (135, 62) falls in cell (6, 3). A cell with 18 touches, where the top cell has 24, gets intensity 18 ÷ 24 = 0.75.
Touch Heatmap Generator Reference Table
The Touch Heatmap Generator conversion table maps intensity values to heatmap colors.
| Intensity | Share of max | Color | Meaning |
|---|---|---|---|
| 0.00 | 0% | Transparent | No touches |
| 0.01 to 0.20 | 1% to 20% | Blue | Rare |
| 0.21 to 0.40 | 21% to 40% | Cyan | Low |
| 0.41 to 0.60 | 41% to 60% | Green | Medium |
| 0.61 to 0.80 | 61% to 80% | Yellow | High |
| 0.81 to 1.00 | 81% to 100% | Red | Hot spot |
About the Touch Heatmap Generator
A Touch Heatmap Generator is a visual tool that shows touch frequency across a screen as a color map. The map turns thousands of coordinates into one image.
Heatmaps are a standard UX research method. Mobile heatmaps show the thumb zone, the area of the screen a thumb reaches comfortably while holding the phone in one hand.
Ways to Use the Touch Heatmap Generator
The Touch Heatmap Generator has 5 main uses, including thumb-zone research and button placement.
- Thumb-zone research: Designers map the areas thumbs reach most often.
- Button placement: Teams move key buttons into hot areas.
- Screen wear checks: Technicians find heavily used areas on kiosk screens.
- Game level design: Developers see where players tap during play.
- Classroom data lessons: Teachers show how data turns into a visual chart.
Tool Details
- Category
- Touch & Gesture Diagnostics
- Controls
- Taps and keys
- Input Support
- Touch, Pen, Mouse, Keys
- Offline Ready
- On your device