Click heatmap

A React block (a whole screen) in Beamline's Research & design app.

One screen of a usability task as it looked (your prototype's frame or a page built from your parts, scaled into a phone) with where people clicked over it: heat, dots on a hotspot or outside any, or the screen alone; first or later clicks and one participant or everyone filter them. Beside it the share of clicks that missed every hotspot leads, then who reached the screen and the median time there, where clicks landed (each hotspot and outside any, counted and drawn as bars; a hotspot counts as an area on a press) and who missed, with the hotspot they found next. Dragging on the screen counts any area, an empty one said. Screens step with buttons, arrows or the strip of miniatures. A missing picture draws a blank screen of its size, and clicks recorded at another size are scaled, both said.

Use it for

Showing where people clicked on a screen during a test, with counts behind the colour.
Any click analysis that needs filters by order and person and an area's share.

Not for

Calendar intensity (activity-heatmap).
Recorded web sessions (session-replay).

Anatomy

header: the product's mark, the title and task, previous, the screen, next
toolbar: heat, clicks or screen only; all, first or later clicks; everyone or one participant with their time, clicks and misclicks
stage: the screen drawn with its hotspots outlined, heat or dots, the counted area
side: missing picture or resized said, who reached it, median time, clicks shown, misclicks out of them, areas by hotspot, the area's count
strip: every screen with its click count

States

heat, dots (on a hotspot: blue circle; outside: red diamond), screen only
no clicks with these filters (said)
area counted (green), empty area (said)
missing picture (amber, dashed blank screen), recorded at another size (said, scaled)
phone: one column
right to left: the page mirrors; the screen keeps its coordinates

Keyboard

Tab to the screen and press left or right arrows to step screens; hotspot areas, filters and the strip are buttons and selects

Motion

Nothing moves; changes appear on input.

Props

Prop	Type	Default	Description
`task` (required)	`string`	—
`screens` (required)	`HeatScreen[]`	—
`clicks` (required)	`HeatClick[]`	—
`participants` (required)	`HeatParticipant[]`	—
`defaultScreen`	`string`	—
`defaultDisplay`	`"dots" \| "heat" \| "plain"`	—
`defaultArea`	`Box \| null`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { ClickHeatmap } from "@beamline/click-heatmap";

Get it

Click heatmap is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Click heatmapComplete system · $49

One screen of a usability task as it looked (your prototype's frame or a page built from your parts…

Clicks on the delivery slots

Most people tapped the Saturday heading first, which isn't a hotspot, so the misclicks gather there. Switch to Clicks to see them as red diamonds, choose First clicks, drag an area on the heading to count it, or step to Checkout (recorded on a smaller phone, scaled).

0 × 0full

Every click on Checkout

Dots for every click on Checkout, with the Saved card area counted.

0 × 0full

States

Order placed has no picture and nobody clicked it: both said.

0 × 0full

About Click heatmap

← Participant review Tree test →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Click heatmap

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Import

Get it

More in Research & design