Task results
A React block (a whole screen) in Beamline's Research & design app.
A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and their count out of the participants shown, with median time and misclick rate; a participant group narrows every number and says how many match, nobody matching said. Paths group by outcome (or, for free exploration, by whether two or more people took them), each with its people, time and misclicks; a path's screens open that screen's facts and heatmap, and a recording opens when one exists. Results counted before newer responses say so with Update. Comparing variants pairs a block from each (a variant keeps its series colour in every comparison); different kinds and free exploration are refused, each cohort's size is shown and different sizes are said rather than a winner named; a comparison saves by name.
Use it for
- Reading how people did on a task: outcomes, the paths they took and where they slipped.
- Comparing two designs block by block without overclaiming a winner.
Not for
- Clicks on one screen (click-heatmap).
- One participant's whole session (participant-review).
Anatomy
- header: the product's mark, the title and task, Outcomes or Compare
- outcomes: newer responses said with Update, participant group and count, metric cards with bars, paths by outcome with screens and facts, the chosen screen's facts and heatmap
- compare: comparisons pairing a block per variant, each variant's result, cohort size and bar, problems or size note; add; save by name
States
- no responses, collecting (count), group with nobody (said), results behind newer responses (amber, Update)
- goal: direct (green), indirect (light green), gave up (red)
- free exploration: paths by how many took them
- path with or without a recording; screen open
- compare: incomplete (blue), different kinds or free exploration (refused, red), different cohort sizes (amber), empty cohort, saved
- phone: one column
- right to left: the page mirrors
Keyboard
- Tab through the group, path screens and actions; Enter or Space opens a screen
Motion
Nothing moves; changes appear on input.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
task (required) | string | — | |
mode | "explore" | "goal" | — | |
screens (required) | { id: string; name: string; }[] | — | |
responses (required) | TaskResponse[] | — | |
groups | { id: string; label: string; }[] | — | |
pending | { count: number; since: Date; } | — | Responses that arrived after these results were counted. |
onRefresh | (() => void) | — | |
collecting | boolean | — | Still collecting: the count is said. |
variants | Variant[] | — | |
defaultView | "compare" | "outcomes" | — | |
defaultPairs | Record<string, string>[] | — | |
onOpenHeatmap | ((screen: string) => void) | — | |
onWatch | ((responseId: string) => void) | — | |
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 { TaskResults } from "@beamline/task-results";Get it
Task results 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
More in Research & design
- Research synthesis: A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)…
- Study setup: Set up an unmoderated test and its screener. Test: what's tested (a website, a prototype by its share link, an app by its store page), who takes it…
- Study flow: A study's blocks in order, each with where people go next. A block that routes by its answer (multiple choice, scale, open question, prototype task) has…
- Participant review: One participant's session, answer by answer, beside the list of everyone who took the study. The list filters (finished, left early, with a recording)…
- Click heatmap: 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…
- Tree test: A tree test: build a navigation tree and read where people went. Build: pages added at the top or under any page, indented under the page above or moved…
- Prototype task: A prototype task in a study. The linked prototype refreshes from the design keeping the task and paths (a start screen gone from the new version said, a…
- Matrix question: A matrix question and the participant's side of it, side by side. Rows (up to ten) share one set of choices (two to seven); Enter adds a row, several…
- Prototype review: Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back…
- Report builder: Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see…
- Report library: A business's reports in one place. The directory: reports by topic and group with search, each with what it answers; one this person can't open says why…
- Review page builder: Building the page reviewers use to go through records one by one. The queue of records (one with no title shows its id instead of a blank); the record as…
- Database builder: What a database does for the people who use it, built in one place. Templates: starting values per property (a relation default points at an existing…
- Workflow builder: Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a…
- Workflow library: The automation library: every automation as a row (what starts it, whether it's live, a draft or paused, who owns it, when it last ran, and its runs this…
- Drawing board: A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector…
- Model workbench: A CAD model's workbench around a large isometric scene of its bodies, each shaded from its material's appearance with a soft ground shadow and an axis…
- Component properties: A design system component from three sides. Its variants as a matrix on two chosen properties, the others filtering it, each cell drawing the variant; a…
- Slot editor: Slots in a design system component, from making to filling. The main component's layer tree with a checkbox per layer: a nested frame converts to a slot…