Entwerfen von UX-Formularen

1) Grundsätze

1. Erst die Aufgabe, dann die Felder. Formulare sind eine Fortsetzung eines benutzerdefinierten Skripts, keine DB-Liste.
2. Ein Bildschirm - ein Ziel. Entfernen Sie alles, was nicht zum Abschluss der Aufgabe führt.
3. Verlieren Sie niemals Daten. Autosave, Entwurfswiederherstellung, sichere Wiederholungen.
4. Zeigen Sie „wie es richtig ist“. Regeln und Beispiele vor dem Fehler; sorgfältig validieren.
5. Standardverfügbarkeit. Labels, Fokus, Kontrast, Tastaturnavigation.
6. Vorhersehbare Geschwindigkeit. Die erste Antwort ≤ 100 ms, Senden mit explizitem Status und Fortschritt.

2) Informationsarchitektur des Formulars

Das Ziel → die Schritte → Feldes. Beginnen Sie mit dem Ergebnis (z. B. „Auszahlungen“) und markieren Sie den Mindestsatz von Feldern.
Gruppierung im Sinne von: „Persönliche Daten“, „Zahlung“, „Bestätigung“. Jede Gruppe ≤ 6 Felder.
Progressive Disclosure: Zusätzliche Felder nach Bedingung anzeigen (Toggle/Länderauswahl).
Die Reihenfolge der Felder ist wie im Kopf des Nutzers: vom Bekannten zum Komplexen.

3) Layout und Raster

Eine Spalte für mobile und die meisten Aufgaben - schneller nach Ansicht und Tab-Reihenfolge.
Für kurze zusammenhängende Felder (Datum/Uhrzeit, Vorname/Nachname) sind zwei Spalten geeignet.
Zeilenhöhe 40-48 px, Abstand zwischen Feldern 8-12 px (gebunden )/16-24 px (Gruppen).
Ausrichtung der Etiketten über dem Feld; rechts - nicht für schmale Formen verwenden.

4) Etiketten, Platzhalter, Helfer

Das Label ist Pflicht. Der Platzhalter ist ein Beispiel, kein Ersatz.
Platzieren Sie den Helper-Text unter dem Feld: Regeln, Format, Link zum Beispiel.
Optionale Felder markieren „(optional)“ anstelle von „“ auf Pflichtfelder.

Beispiel:

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Schritte und Fortschritte

Mehrstufige Formulare (CUS/Auszahlungen): 3-5 Schritte, klarer Fortschritt „Schritt 2 von 4“.
Speichern Sie die abgeschlossenen Schritte; Erlauben Sie die Rückkehr ohne Datenverlust.
Navigationsschaltflächen: „Zurück“, „Weiter“, „Bestätigen“ - immer an einem Ort.

6) Eingangssteuerung

Tastaturen und Attribute: 'type', 'inputmode', 'autocomplete' unter dem Datentyp.
Verwenden Sie die Eingabemasken sanft (Telefon, IBAN, PAN, Datum), speichern Sie die normalisierten Werte.
Autocomplete nicht brechen: korrekt' autocomplete =“ given-name“ | „cc-number“ | „one-time-code“' usw.
Voreinstellungen für Summen/Shortcats: „+ 50/+ 100/All“ neben dem Summenfeld.

Attributtabelle (Sokr.):

Feld	type	inputmode	autocomplete
Email	email	email	email
Telefon	tel	tel	tel
Summe	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Datum der Karte	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Validierung und Fehler

Strategie: vor der Eingabe (helper), während (soft tips), nach (auf blur/submit).
Asynchrone Prüfungen (Login-Eindeutigkeit, Limits, Risiko) - mit Debunce 250-400 ms.
Fehlertext: Der Grund → wie man → Alternative korrigiert.
Summary-Panel über dem Formular für mehrere Fehler + Fokus auf den ersten Fehler.
Idempotency-Key für kritische Aktionen (Rate/Zahlung) und sichere Retrays.

8) Schaltflächen und Versand

Der primäre CTA ist in Farbe/Größe hervorgehoben, verfügbar durch Enter.
„Busy“ -Status und Sperrung der Klickwiederholung; bei Verzögerung> 3-5 s - „Wir warten auf Bestätigung“....
Nach dem Erfolg gibt es einen expliziten Status (Toast/Bildschirm „Fertig“) + was als nächstes passieren wird.

9) Verfügbarkeit (A11y)

Die richtigen "label → input" -Verknüpfungen, Fehler durch "aria-describedby", kritisch - "role =" alert ".
Sichtbar': focus-visible', die Tab-Reihenfolge entspricht der visuellen.
Text/Icon-Kontrast ≥ AA; Bedeutung ist nicht nur Farbe.
Unterstützung für 'prefers-reduced-motion': Minimum an Animationen.
Für Gruppen von Radiobuttons ist 'fieldset/legend', für Hinweise ist 'role =' status''.

10) Lokalisierung und internationale Formate

Daten/Währungen/Zahlen - lokal bei der Eingabe, Speicher - ISO/Minor-Einheiten.
Erlauben Sie verschiedene Alphabete in Namen/Adressen; Beschränken Sie die Bindestriche/Apostrophe nicht.
Bewahren Sie das Telefon im E.164 auf; das Land beim Einfügen explizit oder aus „+ CC“ ausgewählt wird.

11) Leistung und Stabilität

Die erste visuelle Reaktion ≤ 100 ms; asynchrone Prüfungen - Blockieren Sie den Bildschirm nicht.
Skelett statt „hängenden“ Spinner, Höhen fixieren, CLS vermeiden.
Virtualisieren Sie lange Listen (z.B. Länder/Banken).
Animieren Sie nur 'transform/opacity', keine Massenblur/Schatten.

12) Sicherheit und Privatsphäre

PAN/CVC/Reisepass nicht protokollieren; nicht an RUM/Konsole senden.
Maskieren Sie empfindliche Felder, speichern Sie sie nicht in Auto-Saves.
Geben Sie nicht bekannt, ob ein Konto existiert: „Wenn die E-Mail registriert ist, senden wir die E-Mail“.
Lagerung - das notwendige Minimum; Zeigen Sie, warum KYC erforderlich ist.

13) Muster nach typischen Szenarien

13. 1 Zahlung/Anzahlung

Betragsfeld mit Voreinstellungen, Währung explizit angegeben.
PAN mit weicher Maske, Luhn-Check; CVC versteckt; das Datum „MM/YY“ mit dem Auto-Datum „/“.
Text über Gebühren/Termine nebeneinander, nicht im Tooltip.

13. 2 Auszahlung

Schritte: „Betrag → Methode → Bestätigung“.
Fortschritt und „In der Regel bis zu N Minuten/Stunden“ (keine harten Versprechungen).
Varianten der Methode nach Land; Warnungen vor Limits.

13. 3 KYC

Schritt-für-Schritt-Datei-Downloader: Format-/Gewichtsanforderungen, Vorschau, Datenschutz.
Prüfungstermine und Statuskanal (Mail/Benachrichtigung).

13. 4 Grenzen und verantwortungsvolles Spielen

Verständliche Einheiten (pro Tag/Woche/Monat), Voreinstellungen, Änderungsbestätigung, „Tritt in Kraft durch“....

14) Antipatterns

Platzhalter statt Label.
Fehler „für jedes Symbol“ ohne Debunce.
Das Formular wird bei einem Fehler zurückgesetzt.
Die kritische Anweisung ist nur im Tooltip versteckt.
Harte Masken, die gültige Symbole/Einfügungen verbieten.
Sperren Sie die gesamte Seite, um ein Feld zu überprüfen.
Versand ohne expliziten busy/Fortschritt.

15) Snippets der Umsetzung

Fehlerzusammenfassung + Fokus auf das erste Problem

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Schaltfläche mit sofortiger Unterbrechung und Idempotenz

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

HTML-Drahtgitter einer verfügbaren Radiobuttongruppe

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) Design System Token (Beispiel)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSS-Presets

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Metriken und Experimente

Completion Rate, Time-to-Complete, Error Rate pro Feld.
Retry Success Rate, Anteil der geworfenen Formulare, Schritttiefe.
CTR der Hinweise/Beispiele, Anteil der Autovervollständigungen.
A/B: Reihenfolge der Felder, Voreinstellungen der Summen, Fehlertexte, Aufteilung in Schritte.

18) QS-Checkliste

Sinn und Fluss

Die Felder entsprechen dem Zweck; keine unnötigen.
Die Gruppen sind logisch; maximal 6 Felder pro Gruppe.

Eingabe

Korrekte' type/inputmode/autocomplete'.
Die Masken sind weich, der Einsatz bricht nicht, das Caret ist vorhersehbar.

Validierung

Helper vor der Eingabe; Fehler auf blur/submit; debauns 250-400 ms.
Zusammenfassung Panel für mehrere Fehler; Fokus auf den ersten.

Verfügbarkeit

Labels sind verbunden; Der Kontrast ≥ AA;': focus-visible' ist sichtbar.
Tastaturnavigation; Radiogruppen mit 'fieldset/legend'.

Leistung

Erste Reaktion ≤ 100 ms; Es gibt keine „hängenden“ Spinner.
Kein CLS; lange Listen werden virtualisiert.

Sicherheit

Keine Protokolle empfindlicher Felder; PAN/CVC ist nicht in der Auto-Freigabe.
Idempotenz und sichere Retrays sind enthalten.

19) Besonderheiten von iGaming

Wetten: Betragsfeld + Presets, Instant 'busy', optimistische Bestätigung mit Undo-Option (wenn die Verordnung es zulässt).
Zahlungen/Schlussfolgerungen: explizite Gebühren und Fristen neben den Feldern, nicht nur in den Hinweisen; Überprüfung der Limits und des KYC-Status.
Turniere: Anmeldeformular mit minimalem Datensatz, Regeln und vereinbarungsfähigen Checkboxen ohne „dunkle Muster“.
Verantwortungsvolles Spielen: Formulare zum Festlegen von Limits in klaren Intervallen und eine Vorschau des Ergebnisses („Ihr Tageslimit beträgt ab morgen 2.000 ₴“).

Kurze Zusammenfassung

Ein gutes Formular ist ein klares Ziel, ein minimaler Satz von Feldern, klare Regeln vor dem Fehler, sofortige Reaktion und gespeicherte Daten. Entwerfen Sie die Struktur aus dem Szenario heraus, respektieren Sie Verfügbarkeit und Locals, integrieren Sie sichere Retrays und Idempotenz. So fühlen sich die Formen schnell und vertrauenswürdig an - besonders in kritischen iGaming-Szenarien.