A/B preview — visible row thumbnails on devreports catalog
DARE.CO.UK · DEV REPORTS · UX MOCKUP · 12 MAY 2026
What you’re looking at
Today’s session report mentioned that the devreports catalog now uses hover-only thumbnails — the preview popover appears when you mouse over a row’s link. This mockup compares that baseline against two visible-on-row treatments, using the same six recent reports in each variant so you can eyeball the visual weight against identical content.
All three variants keep the hover-preview behaviour intact (the link-with-thumb anchor is still there) — the visible thumbs are additive, not replacement.
Variant A — hover-only (current live catalog)
Baseline. No visible thumb on the row; the popover appears on link hover. Quiet, fast to scan, no horizontal weight from images.
| Report | Generated | |
|---|---|---|
| Session Report · 12 May | 8.00am | |
| Thumb Stray-Cat Audit | 7.55am | |
| Daily Editorial · 12 May | 6.05am | |
| Session Report · 11 May | 11 May | |
| Backlinks Analysis | 08 May | |
| Featured-Strip · Methods | 08 May |
What this buys: zero new visual weight; the table reads like an index. Hover gives you the full preview. What it costs: you can’t scrub the archive visually — every signal lives in the title text.
Variant B — small monochrome icon left of label
Each row gets a 40px square monochrome thumbnail to the left of the label. Hovering the row lifts the greyscale and brings full colour. The hover-preview popover still fires on link hover.
| Report | Generated | |
|---|---|---|
 | Session Report · 12 May | 8.00am |
 | Thumb Stray-Cat Audit | 7.55am |
 | Daily Editorial · 12 May | 6.05am |
 | Session Report · 11 May | 11 May |
 | Backlinks Analysis | 08 May |
 | Featured-Strip · Methods | 08 May |
What this buys: visual scrubbing without dominating the layout. The eye can pick up “this row has a table, this one has prose, this one has a card grid” at a glance. Monochrome-default keeps the page feeling tightly bundled. Hover-to-colour signals interactivity without committing to a Pinterest grid. What it costs: roughly 56px of horizontal real estate per row. Forty-pixel images are small enough that subtle differences between session reports of different days don’t show — you can tell shape-of-content but not date-of-content.
Variant C — bigger colour card thumb (joker)
Per the Joker-card pattern memory, the last variant gets expanded license. Each row becomes a 120×80 colour card with subtle hover-lift. The row reads as a horizontal “filmstrip” of the archive.
| Report | Generated | |
|---|---|---|
| Session Report · 12 May | 8.00am |
| Thumb Stray-Cat Audit | 7.55am |
| Daily Editorial · 12 May | 6.05am |
| Session Report · 11 May | 11 May |
| Backlinks Analysis | 08 May |
| Featured-Strip · Methods | 08 May |
What this buys: each row reads as a distinct artefact. You can tell session reports apart by date (the daily editorial header changes), spot which audits have charts vs which are pure tables, recognise the Featured-Strip cards by their image-heavy mosaic. Compounds well as the archive grows — the page starts to feel like a contact sheet of the dev-cadence. What it costs: the catalog drifts from “index” toward “magazine layout”. Total page height roughly doubles. Loses the dense-information feel of the current table.
Recommendation
Variant B (small monochrome icon) is the right next step. It buys 80% of the scrubbing benefit at 20% of the visual weight, keeps the catalog tone tight, and the monochrome-default + colour-on-hover affordance signals interactivity without crowding the page. Hover-preview popover stays as the high-fidelity reveal for any row that earns deeper attention.
Variant C is worth holding in reserve for the day the archive crosses ~100 reports — at that scale the contact-sheet vibe earns its weight, and date-recognition through thumbnails actually saves search time.
To ship Variant B: lift the .mock-table.var-b rules out of this preview’s inline <style> block, drop them into the catalog stylesheet in seo_render_html.py, and update dare_dev_reports_publish.py::render_index_md to emit <td class="cell-thumb"><img class="row-thumb-icon" src="..."></td> before the existing label cell. Mechanical, no schema change.
Mockup data: real thumbnails from ~/Downloads/devreports_thumbs/, six representative recent reports (text-dense session, table-heavy audit, prose narrative, older session, backlinks, image-heavy featured). All anchors keep the link-with-thumb class so the hover-preview popover fires identically in every variant — what differs is purely the row-level visible weight.