Enrich / Edit Document — 4 Concept Designs

Four design directions for the unified document editing experience. The goal: make the enrich page the single entry point for both enrichment and editing, while reducing the friction of filling in metadata. Each concept attacks a different root cause of friction.

Leonie Voss · UI/UX · 2026-04-17 · Familienarchiv

enrich edit-document 4 concepts friction reduction

Concept A

Section Stepper

The form is split into three sequential steps — Wer & Wann, Beschreibung, Inhalt — shown one at a time via tabs at the top of the form panel. Completed sections collapse to a single summary line with a green checkmark. The primary action becomes "Weiter →" until the final step, then "Speichern & Geprüft". Eliminates the wall-of-fields effect; the user always knows exactly what to do next.

Best forFirst-time enrichment; queued batch of documents

Trade-off: power users who tab through all fields quickly will find the extra "Next" click annoying. Mitigate with keyboard shortcut (⌘↵ = advance section).

Familienarchiv Dokumente Personen Anreicherung

← Zur Liste

Brief an Tante Hilde, Sommer 1952

12 verbleibend

Wer & Wann

Beschreibung

Inhalt

✓ Wer & Wann 15.07.1952 · Karl Raddatz → Hilde Brandt

Beschreibung

Titel *

Brief an Tante Hilde — München 1952

Schlagworte

Familie ×

Krieg ×

+ Schlagwort hinzufügen

Aufbewahrungsort

z. B. Karton 3, Regal B

Inhalt Noch nicht ausgefüllt

Überspringen

Nur speichern

Weiter → Inhalt

Concept B

Flat & Airy

All card borders and section header chrome are removed. Fields flow in a single uninterrupted column with generous spacing. Required fields come first; a thin "Optional" divider separates them from supplementary fields. A 3 px progress bar at the top of the form panel shows how many required fields are filled. The page feels like a focused questionnaire, not a form.

Best forFrequent editors who find card groupings visually noisy

Trade-off: without section headers, new users may not understand the semantic grouping. Mitigate with subtle field-group spacing (20 px between groups, 10 px within).

Familienarchiv Dokumente Anreicherung

← Zur Liste

Brief an Tante Hilde, Sommer 1952

12 verbleibend

Pflichtfelder

3 / 4

Pflichtfelder

Titel *

Brief an Tante Hilde — München 1952

Datum *

15.07.1952

Absender *

Raddatz, Karl

Empfänger *

Hilde Brandt ×

+ Person

Pflichtfeld — mindestens 1 Empfänger

Optional

Schlagworte

Familie ×

Krieg ×

+ Schlagwort

Ort

München

Aufbewahrungsort

Karton, Regal …

Kurzinhalt

Überspringen

Speichern

Speichern & Geprüft

Concept C

PDF-First, Compact Rail

The PDF gets 65% of the width. The form becomes a narrow right rail — no card containers, no padding waste, compact input heights (16 px vs 36 px standard). Tab moves between every field. Keyboard shortcuts (⌘↵ = save & next, → = skip) are shown as badges in the action bar. Tags use inline chips with a single "+" shortcut rather than a dropdown overlay. The document is always the primary focus; metadata is glanceable support.

Best forPower users processing 30+ documents per session

Trade-off: the rail is narrow (~280 px at 1280 px viewport). Long person names and tags may truncate. Design for max 20 chars per name; add tooltip on hover.

Familienarchiv Dokumente Anreicherung

← Zur Liste

Brief an Tante Hilde, Sommer 1952

12 verbleibend

Wer & Wann

Datum *

15.07.1952

Ort

München

Absender *

Raddatz, Karl

Empfänger

Hilde Brandt ×

Beschreibung

Titel *

Brief an Tante Hilde

Schlagworte

Familie ×

Krieg ×

Kurzinhalt

⌘ ↵

Sp. & weiter

→

Skip

Speichern

Sp. & Geprüft

Concept D

Smart Prefill

When the backend can supply OCR or import data for a field, it appears pre-filled with a mint/teal visual style: mint border, teal text, soft mint background. Pressing Tab accepts the suggestion and converts it to normal text; typing overrides it. A completion ring in the action bar fills from empty to full as required fields are confirmed. The primary button stays locked (gray) until all required fields are accepted or manually filled — then turns green. Turns enrichment from data-entry into a verification task.

Best forDocuments imported from digitization services with OCR output

Trade-off: requires a backend OCR suggestion API. When no suggestions exist, the UX degrades gracefully to standard blank fields — the ring and lock still apply.

Familienarchiv Dokumente Anreicherung

← Zur Liste

Brief an Tante Hilde, Sommer 1952

12 verbleibend

Wer & Wann

Datum *

15.07.1952 ✓

Ort

München

Absender *

Raddatz, Karl ✓

Empfänger *

Hilde Brandt ×

✓ Aus OCR übernommen

Beschreibung

Titel *

Brief an Tante Hilde

Schlagworte

Familie ×

+ Schlagwort

Überspringen

4 / 5

Speichern

Speichern & Geprüft ✓

Implementation Reference

Exact Tailwind classes and pixel values for each new pattern. The shared enrich shell (split pane, top bar, action bar) is unchanged from the current implementation.

Element	Concepts	Tailwind / Code	Notes
Section stepper tab bar	A	`flex border-b border-line bg-surface`	Each tab: `flex-1 py-2 text-center text-[10px] font-bold uppercase tracking-widest`. Active: `text-ink border-b-2 border-brand-navy`. Done: `text-green-700`.
Completed section summary row	A	`flex items-center justify-between px-3 py-2.5 bg-surface border border-line rounded-sm text-xs`	Label: `font-bold uppercase tracking-widest text-green-700`. Summary: `text-ink-2 truncate max-w-[180px]`. Clicking jumps to that section.
"Weiter →" primary button	A	`btn-primary` (existing class)	Label changes: "Weiter → Beschreibung" → "Weiter → Inhalt" → "Speichern & Geprüft". Driven by `currentSection` state.
Required-fields progress bar	B	`h-0.5 rounded-full bg-brand-navy transition-all` inside `h-0.5 flex-1 rounded-full bg-line`	Width: `style="width: {(filledRequired / totalRequired) * 100}%"`. Bar lives in its own strip between top bar and split pane.
Optional divider	B	`flex items-center gap-2 my-5`	Lines: `flex-1 border-t border-line`. Label: `text-[9px] font-bold uppercase tracking-widest text-ink-3`.
Locked primary button	B D	`opacity-40 cursor-not-allowed pointer-events-none` on existing `btn-primary`	Or: distinct disabled class `bg-line text-ink-3`. Reactive: `const canReview = $derived(requiredFilled === requiredCount)`.
Compact rail field height	C	`h-6 py-0 px-2 text-xs` on inputs	Real pixel height: 24 px. Standard is 36 px. Only use compact height inside the 35%-width rail to preserve minimum 44 px touch target via larger click zone around label + input.
Keyboard shortcut badge	C	`<kbd class="inline-flex items-center h-4 px-1 bg-surface border border-line rounded text-[10px] font-mono font-bold text-ink-2">`	Use native `<kbd>` element for screen-reader semantics. Announce via `aria-label` on the button too.
OCR banner	D	`bg-mint/10 border border-brand-mint rounded-sm p-3 flex items-start gap-2 text-xs`	Only rendered when `data.ocrSuggestions` is non-empty. Icon: `w-4 h-4 rounded-full bg-brand-mint flex items-center justify-center text-brand-navy font-bold text-[10px]`.
Suggested / prefill field	D	`border-brand-mint bg-mint/10 text-teal-700 font-medium`	Add `data-suggested="true"` attribute. On Tab: remove mint styles, set value. On input: clear suggestion immediately. Server populates `suggestedDateIso`, `suggestedSenderName` props (already exist on `WhoWhenSection`).
Completion ring SVG	D	SVG with two `<circle>` elements	Circumference at r=8: ≈50.3 px. Filled arc: `stroke-dasharray="{(filled/total)*50.3} {50.3}"`. Rotate −90° so arc starts at top. Color: `stroke="currentColor" text-brand-navy`.
Unlocked "Geprüft" button	D	`bg-green-700 hover:bg-green-800 text-white`	State: `const canReview = $derived(confirmedFields.size >= requiredFields.length)`. Animate transition: `transition-colors duration-200`.
Action bar (shared)	A B C D	`flex items-center gap-3 border-t border-line bg-surface px-4 min-h-[44px]`	Skip: ghost left (`text-ink-2 text-sm font-medium`). Save: outline right. Primary: filled rightmost. Min 44 px height per WCAG 2.2 touch target.