# 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
A
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).
← Zur Liste
Brief an Tante Hilde, Sommer 1952
12 verbleibend
⊕
⊖
↺
Seite 1 / 2
☷
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
B
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).
← Zur Liste
Brief an Tante Hilde, Sommer 1952
12 verbleibend
Pflichtfelder
3 / 4
⊕
⊖
Seite 1 / 2
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
C
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.
← Zur Liste
Brief an Tante Hilde, Sommer 1952
12 verbleibend
⊕
⊖
↺
Seite 1 / 2
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
D
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.
← Zur Liste
Brief an Tante Hilde, Sommer 1952
12 verbleibend
⊕
⊖
Seite 1 / 2
✓
OCR-Vorschläge erkannt
4 Felder wurden vorausgefüllt. Drücke `Tab` zum Übernehmen oder tippe zum Überschreiben.
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.