79 lines
3.5 KiB
Markdown
79 lines
3.5 KiB
Markdown
# CASAN report redesign — Design QA
|
||
|
||
## Comparison target
|
||
|
||
- Source visual truth:
|
||
- `/Users/thanhnguyen/Downloads/hình ảnh (1).png` — 1844 × 862 px.
|
||
- `/Users/thanhnguyen/Downloads/hình ảnh (2).png` — 1796 × 795 px.
|
||
- Rendered implementation:
|
||
- `tmp/design-qa/h6-default-final.png` — 866 × 2165 px.
|
||
- Product state: Core Local Assurance Viewer, H6, stale/insufficient telemetry,
|
||
six successful runs, technical disclosures collapsed.
|
||
- Browser viewport: 866 × 1043 CSS px, DPR 2. The browser capture is stored at
|
||
CSS-pixel width; the reference screens are wider desktop compositions, so
|
||
comparison is by hierarchy, density and visualization pattern rather than
|
||
pixel-identical scaling.
|
||
- Responsive verification: 390 × 844 CSS px, document `scrollWidth` 390 px.
|
||
|
||
## Full-view comparison evidence
|
||
|
||
The two reference reports and the final implementation were opened together in
|
||
one comparison input. CASAN intentionally preserves the references' strongest
|
||
patterns—headline metrics, measured distributions, explicit provenance and
|
||
forensic detail—while moving from an all-dark engineering sheet to the existing
|
||
CASAN light decision workspace.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- Fonts and typography: the references use dense monospace throughout. CASAN
|
||
intentionally uses the existing system sans hierarchy for decision content
|
||
and reserves monospace for IDs, timestamps and evidence values. Headings,
|
||
labels and body copy wrap without clipping.
|
||
- Spacing and layout rhythm: four executive metrics, decision findings, outcome
|
||
distribution and evidence quality form a consistent vertical sequence.
|
||
Technical content is removed from the default reading path.
|
||
- Colors and tokens: navy, cyan, green, amber and red follow the existing CASAN
|
||
semantic palette. Every colored state also has a visible label or value.
|
||
- Image and asset fidelity: neither reference contains raster product imagery.
|
||
No placeholder image, generated asset or replacement illustration is needed.
|
||
- Copy and content: all values and warnings come from canonical report data.
|
||
Missing token/cost values remain unavailable and no maturity claim is inferred.
|
||
|
||
## Focused-region comparison
|
||
|
||
The final full-page capture is readable at original resolution, including the
|
||
executive metrics, decision findings, outcome bar, coverage bars and collapsed
|
||
technical disclosure. A separate crop was not needed.
|
||
|
||
## Interaction and accessibility checks
|
||
|
||
- Filter and technical sections are native `details`/`summary` controls.
|
||
- Technical telemetry becomes visible when expanded and hidden when collapsed.
|
||
- Responsive navigation opens from one labeled button and closes with Escape.
|
||
- At 390 px the document has no horizontal overflow.
|
||
- Reduced-motion CSS remains present.
|
||
- Browser console warning/error check returned no entries.
|
||
|
||
## Comparison history
|
||
|
||
### Iteration 1
|
||
|
||
- Finding: **P2 — tablet navigation consumed too much report width** at the
|
||
default 866 px browser viewport.
|
||
- Evidence: `tmp/design-qa/h6-default.png`.
|
||
- Fix: raised the local viewer navigation-collapse breakpoint from 820 px to
|
||
960 px.
|
||
|
||
### Iteration 2
|
||
|
||
- Post-fix evidence: `tmp/design-qa/h6-default-final.png`.
|
||
- Result: the report uses the full tablet canvas, the menu remains keyboard
|
||
operable, all content is readable, and no actionable P0/P1/P2 mismatch remains.
|
||
|
||
## Follow-up polish
|
||
|
||
- A multi-run trend chart can be added only after the report contract exposes a
|
||
truthful ordered series. It must not be inferred from incomplete snapshots.
|
||
|
||
final result: passed
|