Spec: docs/design-screens-lens.md. Every name, quote, URL and participant on this page is invented: a fictional kettle shop, six sessions, codes only. The thumbnails are wireframe stand-ins; in the product they would be stills taken from the recording on demand and never stored or exported.
Screens are placed in columns by the step at which participants typically first reach them; lines are transitions, as thick as the number of participants who made them. Click a screen to see what was said while it was up.
One row per session, screens in the order visited, repeats merged. The answer to "where did people diverge" and "who went back".
Every flow tool pairs its diagram with a ranked list of whole paths, because a diagram cannot show which complete routes people took. At this sample size the list is the data: the two real sessions had 9 steps with no revisits, and 18 steps with 7 revisits and 5 immediate back-steps. A flow diagram flattens that difference; these rows keep it. Outlined chips are returns to a screen already seen. This is the layout to open first if the study had a task with an expected path (Maze's direct/indirect, Treejack's directness), which a later version could mark.
The simplest layout: every screen as a card, ordered by typical step. No edges.
The fallback when the flow is not a flow: a study where participants were shown screens in a fixed order by the moderator (a prototype walkthrough), or a desktop app with no navigation to speak of. It is also the layout that survives a narrow window without horizontal scrolling. A tree (sitemap) was considered and rejected for the first build: the URL hierarchy is available, but it describes how the site is filed, not how people moved through it, and every product page sits under a different parent.
The researcher can rename, merge, split, and hide a screen. A session with no shared screen is listed, not hidden.
Corrections are the product, not an apology. Every published method mis-merges or over-splits somewhere: the best of ten near-duplicate detectors scored F1 0.60 (Yandrapally et al., ICSE 2020); the definition of "the same screen" changed one app from 5 screens to 55 (Baek & Bae, ASE 2016). Whether two product pages are one screen is a product decision, not a threshold (Rico framed it the same way). UiPath's task-mining product lets users rename and discard steps for the same reason. "Separate product pages" toggles between the URL template (/p/*) and the instance.
Empty is information. Sessions without a share are counted out loud, never silently dropped, so a map built from three of eight sessions cannot pass for the study.
Why columns, not a free graph. Process-mining graphs invent loops and hide rare edges in ways that stop the counts adding up (van der Aalst 2019); free-layout graphs re-shuffle whenever a session is added. Columns by typical step keep a fixed reading order and still show the back-steps (the thin line from Delivery back to Basket). With 5–12 sessions, every count reads as k of n participants, never a percentage, and nothing is pruned into an "Other" bucket.
What a screen is. The page a participant was on, keyed by the browser's address bar when it is visible (precision 0.99–1.00, recall 0.85–0.95 on page pairs in the spike) and by the text on the screen when it is not (adjusted Rand 0.72–0.86 against hand labels). Dialogs and panels are states of a screen, shown as the pills under the name — and the honest caveat is that detecting them automatically did not work in the spike (§ measurements). The pills here assume either a better detector or the researcher marking them.
The join is time, not interpretation. A quote belongs to a screen when it was said while the screen was up. On the two real sessions, 14 of 17 and 12 of 15 quotes in the report's existing sections were said on that section's most common page; the rest were said elsewhere, often a remark about the previous page. The "Everything said here" tab shows the transcript paragraphs, because extracted quotes are sparse (1–4 per page measured).
New elements (flagged, not in the design system): the screen card, the edge layer, the state pill, the visit track. Reused: section heading, badge, quote card, timecode, tag sidebar pattern.