Skip to main content

UX-CHECKLIST

🛠️ Evalium Design System Checklist (Definition of Done)​

This checklist is the final DoD gate for all features. It enforces the “Ferrari Engine” doctrine: SMB-simple UI with enterprise-grade defensibility.

Capability Baseline (Validated 2026-02-25)​

Apply this checklist with capability awareness:

  • Enforce as hard requirements for backend-live surfaces.
  • Treat target-state surfaces (skills profiles, compliance case timeline, dedicated grading queue, explicit proctor commands, persisted assignment drafts) as conditional/feature-flagged checks until backend contracts are first-class.

0. Core UX Contract (Applies to Every Feature)​

  • Everything visible and permitted is clickable in-context. Any entity reference the user has permission to view/edit (names, chips, tags, version badges, run labels) is a link.

  • No dead text rule: If it looks like a reference (badge/chip/name in a table), it must be a link or explicitly non-link due to permissions.

  • Permission-aware linking: If the user cannot view the target, show non-link text with tooltip: “No permission to view”.

  • Link destination contract is followed:

    • On drawer-enabled surfaces, normal click opens a read-only right-drawer peek for supported entities.
    • Drawers are for browse/review only; edit/deeper workflows always route to full pages.
    • Cmd/Ctrl-click, shift-click, and middle-click preserve native full-page behavior.
    • If drawer read-model support is unavailable for an entity/surface, normal click goes to canonical full page.
    • Compliance case full-page route is target-state; route to jobs/ledger hubs until case entity exists

  • Links preserve context: drawers don’t lose the current workflow; full pages include breadcrumbs and allow returning to prior scope/filters.

Capability & Silo Safety (MUST)​

  • Capability gating: actions/fields are hidden or disabled based on capability (not just RLS data shape).
  • RLS enforcement: UI never shows links or data not returned by RLS-authorised scope.
  • Hierarchy awareness: org selectors are hidden when tenant has a single org unit.

UX States & Resilience (MUST)​

  • Loading state: consistent skeleton/spinner; no disruptive layout jump.
  • Empty state: explains why empty + provides a next action.
  • Error state: actionable message + retry where appropriate.
  • Processing state: queued/running/completed/failed where async work exists.
  • Stale state: “Last updated …” and “Stale” badge where freshness matters.

Localisation (MUST)​

  • No hardcoded UI strings: user-facing text comes from Inlang Paraglide-JS messages.
  • Fallback precedence enforced: org override -> tenant override -> product default.
  • Token safety checks: placeholder variables are validated for any text override publish.
  • Override actions audited: publish/rollback of runtime text overrides writes auditable events.

Accessibility (MUST)​

  • WCAG 2.2 AA: keyboard navigable; visible focus; labelled controls.
  • ATAG coverage for authoring/admin: accessible authoring UI and accessible-output support requirements are implemented or explicitly feature-gated.
  • Drawer focus contract: focus trap, ESC closes, focus returns to opener.
  • Reduced motion: respects OS preference (where animations exist).
  • Automated guardrails pass: compile/lint and automated accessibility checks are green in CI.
  • Assistive tech smoke pass: release checks include screen-reader and keyboard-only validation for critical flows.

Performance Budgets (MUST)​

  • Latency target: core reads feel instant; heavy views use progressive loading.
  • Interactive transitions: responsive UI interactions; avoid blocking main thread.
  • No avoidable re-fetch loops: caching/ETags/deltas where appropriate (especially live-ish pages).

1. Navigation & IA (The “Spine”)​

  • Feature lives in the correct sidebar category:

    • authoring / Programmes / Operations / Insights / Governance

  • Full-page assets follow the Entity Hub template (tabs consistent where applicable).

  • Breadcrumbs present for all full-page assets (e.g., Operations > Assignments > [Name]).

  • Link Contract followed everywhere (see Core “Context Links”).

2. Content & authoring (The “Save Lie”)​

  • Save silently handles versioning.

    • Editing a Published asset forks to a Working Draft (visible badge).

  • Publish is loud; Save is quiet.

    • Propagation decisions happen at Publish time, not Save time.

  • Validation Sidekick surfaces issues in real time and is actionable:

    • Errors block publish; warnings require acknowledgement.
    • Each issue has Go to and (where possible) Fix.

  • Usage indicator shows blast radius (“Where used”).

  • Impact Summary appears when propagation is possible and uses Traffic Lights:

    • Green: Draft (safe update)
    • Amber: Published (requires new version)
    • Red: Active runs (high risk; defaults to don’t update)

  • Dynamic Buckets include:

    • Refresh Sample (Preview) button
    • Visible Preview Seed (copyable)

Score integrity (authoring)

  • Removing/changing items triggers coverage warnings if it reduces evidence for mapped skills/frameworks.
  • authoring validations include accessibility checks where content type supports them (for example required alternatives for media fields) with deterministic, localisable messages.
  • Save/import/publish flows preserve accessibility-relevant authored metadata.

3. Operations & The “Live Pulse”​

  • Issue Wizard defaults to Beginner Mode, advanced policies in a drawer.

  • Command Centre follows Manual Refresh First:

    • On-demand refresh always available
    • Optional auto-refresh is off by default

  • Freshness indicator visible (“Updated … ago”) and Stale badge when needed.

  • Status chips are consistent (Live/Idle/Paused/Submitted/Expired/Terminated).

  • Pulse telemetry is consistent (e.g., Focus Lost) and capability-gated where sensitive.

  • Session/proctor actions / Overrides require mandatory reason where high-stakes and backend-supported.

  • Dedicated Pause/Resume/Terminate command UX is feature-flagged until explicit backend command endpoints are active.

  • Grading Queue split-screen contract is enforced when the dedicated queue/read-model surface is enabled.

  • Security level badge shown where relevant (assignments, command centre, grading).

  • Assignment Draft status is not shown as authoritative backend state unless persisted draft contracts exist.

  • Assignment monitor label mapping is enforced (invited|started|completed|expired -> Not started|In progress|Completed|Expired) with no mixed synonyms.

4. Insights & The “Explain” Link​

  • Every derived value (Score, Skill, Pass/Fail, Rollups) has an Explain link:

    • Evidence Basis / Snapshot Scope / Calculation Summary

  • Submission surfaces expose canonical derived koeStatus + dual-time proofReadiness with reason visibility matching capability/redaction rules.

  • Defensibility exceptions queue uses canonical UI triage labels (Open/Acknowledged/Resolved) mapped from backend enums (open/acknowledged/resolved), with ownership/suppression/lens rollups.

  • Evidence Basis Drawer shows:

    • contributing submissions/facts
    • mapping set version + rule provenance

  • Skills evidence-basis/mapping explainability checks are only required when skills inference/provenance facts are active.

  • Scope chips are present (Version, Timeframe, Cohort/Run label).

  • Freshness + Processing states visible on insights blocks/pages.

  • Data sufficiency guardrails: show “Insufficient data” when N is too small.

  • Provisional badge when subjective grading pending (with link to what’s pending).

  • Corrected badge shown for corrected scores, linked to remediation batch.

5. Security, Silos & Compliance​

  • High-stakes actions create a Ledger Entry (Forget/Export/Hold/Restriction/Remediation).

  • Legal Holds disable destructive actions with visible reason and link to hold detail.

  • Receipts exist where artifacts are produced (hash + algorithm + created + expiry).

  • DSAR extensions cannot change due date unless Notification Sent is recorded (target-state hard backend rule; enforce in workflow meantime).

  • DSAR redaction workflow exists where third-party privacy is applicable (feature-flag until case review contracts are active):

    • review stage recorded
    • manifest includes “Redactions performed: X”

  • Right to refuse / partial compliance uses structured Legal Basis Picker + reason (target-state until first-class case outcomes are active).

6. Responsiveness (Admin + Candidate)​

  • Admin UI is laptop-optimised.
  • Candidate UI is mobile-responsive.
  • Tables have responsive behaviour (column priority, horizontal scroll only when unavoidable).
  • Task-tier contract enforced: quick tasks are mobile-safe; complex tasks provide explicit desktop handoff.
  • No dead-end constrained-device UX: complex actions expose Continue on desktop, Send me a link, and Save and exit where applicable.