UX-Haydline und Schnittstellenstandards

1) Grundsätze

Klarheit vor Schönheit. Sinn und Wirkung sind in 1-2 Sekunden offensichtlich.
Ein Ziel pro Bildschirm. Alles andere ist sekundär oder versteckt.
Konsistenz. Gleiche Muster = gleiche Erwartungen.
Standardverfügbarkeit. Kontrast, Fokus, Tastatur, Stimme.
Kontextualität. Hinweise und Texte - genau dort, wo sie gebraucht werden.
Lokalisierung zuerst. Linienlängen, Formate, Kultur - im Design ursprünglich.
Reversibilität. Jede riskante Aktion kann rückgängig gemacht/bestätigt werden.
Messbarkeit. Jede Regel ist mit einer Metrik (Schrittkonvertierung, Zeit, Fehler) versehen.

2) Raster, Einzüge und Rhythmus

Mesh: 4/8-pt Schritt; Spalten: 12 (Desktop), 6 (Tablet), 4 (Mobile).
Interne Einrückungen der Komponenten: Vielfache von 4; Außen 8/ 12/16/24.
Vertikaler Rhythmus: Titel → Untertitel → Content → Action (CTA).
Grenzen und Trennzeichen: wirtschaftlich; Bevorzugen Sie „Luft“ und die Hierarchie der Typografie.

3) Typografie

Die Skala der Stifte: 12/14/ 16/20/24/32/40 (Körper 16).
Zeilenhöhe: 1. 4–1. 6 für den Text, 1. 2–1. 3 für die Überschriften.
Zeilenlänge: 45-75 Zeichen (Desktop), 35-55 (Mobile).
Auswahl: fett für semantische Akzente; kaps - nur in Etiketten.
Lesbarkeit laut: Texte müssen natürlich klingen.

4) Farbe und Kontrast

Semantik: 'Erfolg/Info/Warnung/Fehler/Neutral'.
Kontrast: Minimum WCAG 2. 1 AA (Text/Hintergrund ≥ 4. 5:1; groß ≥ 3:1).
Die Farbe ≠ das einzige Signal. Fügen Sie ein Symbol/Text/Formular hinzu.
Fokusring: immer sichtbar (in CSS nicht deaktivieren).

5) Navigations- und Informationsarchitektur

Benutzerpfad: "Wo bin ich? Was ist hier drin? Was nun" - offensichtlich.
Menühierarchie: ≤ von 2 Ebenen in der Hauptnavigation.
Brotkrümel: für tiefe Abschnitte.
Suche: global verfügbar auf komplexen Verzeichnissen; Hotkey '/'.
Navigationsstatus: Die aktive Registerkarte/Seite wird durch Token hervorgehoben.

6) Komponenten und Muster

Wir verwenden Komponenten des Design-Systems (ohne „hausgemachte Produkte“).
Ein primary-CTA pro Bildschirm; der Rest ist sekundär/tertiär.
Status: default/hover/focus/active/disabled/loading - verpflichtend für jede Interaktion.
Leere Zustände: Kontext + Wert + CTA (+ sekundärer Link).
Allgemeine Warnungen: Eine Seitenwarnung pro Bildschirm + lokale Inline-Hinweise.

7) Formen, Validierung und Fehler

Das Label ist Pflicht. Placeholder ist ein Beispiel für ein Format, kein Ersatz.
Inline-Validierung auf blur, Summary-Fehler auf submit.
Fehlermeldung: Was ist falsch + wie zu beheben + Einschränkung/Format.
Auto-Scrolling und Fokus auf den ersten Fehler; 'aria-invalid',' aria-describedby'.
Masken und Formate: suggerieren, aber brechen die Eingabe nicht (Paist möglich).
Datensicherheit: Wir verlieren nichts beim Neustart/Fehler.

8) Zustände und Feedback

Erfolg: Toast 2-4 s, neutral-positiver Ton, CTA „was kommt als nächstes“.
Info/Hinweis: weiches Banner/Tultip, blockiert den Fluss nicht.
Warnung/Fehler/Kritisch: Hierarchie visuell/semantisch; kritisch - Modal/Banner mit expliziter Aktion.
Download: Skelett> Spinner; Schätzung der Wartezeit> 3 s.

9) Inhalt und Mikrokopie

Drei-Antworten-Regel: Was passiert → warum → was als nächstes zu tun.
CTA: Aktionsverb + Objekt („Änderungen speichern“, „Verifizierung bestehen“).
Zahlen/Daten/Währungen: lokale Formate.
Ton: freundlich; in stressigen Schritten (Zahlung/Sicherheit) - neutral.

10) Verfügbarkeit (A11y)

Vollständige Navigation über die Tastatur; Die logische Reihenfolge der Tabus.
Rollen und 'aria-' für interaktive, Live-Regionen für Toast/Status.
Kontraste, Fokusringe, Interaktionsgrößen ≥ 44 × 44 px.
Textalternativen bei Icons/Bildern; Tabellen mit „th “/„ scope“.
Inspektionen: automatische (Linter/Scanner) + manuelle Screenreader-Skripte.

11) Lokalisierung und Internationalisierung

Alle Zeilen befinden sich in i18n-Schlüsseln mit Kontext.
Test „lange Sprachen“ (DE/TR), RTL-Modi.
Zahlen/Währungen/Zeiten - Formatierungswerkzeuge.
Tone-map: Grad der Formalität/Emotion durch Szenarien (Onboarding/Zahlungen/Sicherheit).

12) Responsiwnost und adaptiw

Breakpoints: 360 / 768 / 1024/1280 +.
Mobil-first: Kritischer Pfad mit einer Hand zugänglich, CTA im Daumenbereich.
Gestas und Tastatur: Gesten werden durch Tasten dupliziert; auf dem Desktop - Hotkeys.
Dichte: auf dem Desktop - „Luft“, auf dem Handy - vertikale Einsparungen, ohne die Klickbarkeit zu beeinträchtigen.

13) Dunkles Thema

Der WCAG-Kontrast bleibt erhalten; Vermeiden Sie „reines Schwarz“ für den Hintergrund (dunkelgrau).
Leuchten/Schatten - geschwächt; Der Fokusring ist kontrastreich.
Illustrationen und Logos - mit invertierten Versionen.
Übergangsrichtlinie: Wir speichern die Benutzerauswahl (system/light/dark).

14) Animationen und Bewegung

Dauer: 120-200 ms (klein), 200-300 ms (Übergänge).
Die Beschleunigungsfunktionen sind natürlich (cubic-bezier mit leichter Verzögerung).
Animationen sollten den Fluss nicht blockieren und die Lesbarkeit beeinträchtigen.
Respektieren Sie' prefers-reduced-motion'.

15) Performance

LCP ≤ 2. 5 s, TTI/TBT im grünen Bereich; Code-Spliting; Faules Laden von Medien.
Virtualisierung langer Listen; Daten-Caching.
Skeleton für Geschwindigkeitswahrnehmung; minimieren „junk“ Layout.

16) Sicherheit und Privatsphäre in der Benutzeroberfläche

Klare Erklärungen für die Gründe der Anfragen (Kamera, KYC, Geo).
Transparente Fristen/Gebühren/Limits; ohne „sofort“, wenn Verzögerungen möglich sind.
Sensible Daten - Maskierung, explizit „anzeigen/ausblenden“.
Bestätigungen für irreversible Handlungen; Die Zeitschrift der Handlungen/Mitteilungen über den Eingang.

17) UX Qualitätsmetriken

Schrittkonvertierung und Zeit bis zur Fertigstellung.
Fehlerrate nach Feldern/Schritten und Time-to-Fix.
CTR nach CTA und Wiederholbarkeit der Szenarien.
Drop-off nach Fehler/nach Laden> N Sekunden.
Support-Anfragen zu Themen (vor/nach Änderungen).
A11y-Defekte pro Release (Ziel ist 0 kritisch).

18) Checklisten

Bildschirm vor der Veröffentlichung

• Ein Hauptziel und ein primäres CTA.
• Die Navigation und der „Wo bin ich“ -Status sind offensichtlich.
• Der Inhalt ist kurz: 1-2 Sätze pro Block.
• Status: loading/empty/error/success abgedeckt.
• A11y: Kontrast AA, Fokus sichtbar, 'aria-' auf Interactives.
• Lokalisierung: Zeilenlängen/Formate/RTL geprüft.
• Performance: keine „schweren“ Blöcke ohne Not.

Formular vor der Veröffentlichung

• Labels und Beispielformate sind vorhanden.
• Inline-Validierung + Zusammenfassung auf submit.
• Scrolling zum ersten Fehler, Fokus im Feld.
• Meldungen: Was/Wie/Warum; ohne 500/400 Codes für den Benutzer.
• Daten gehen bei Fehlern/Neustart nicht verloren.

19) Anti-Muster

„OK“ als CTA auf semantischen Schritten.
Platzhalter statt Label.
Farbe als einziges Statussignal.
Spinner ohne Zeiteinschätzung und ohne Alternative.
Modale Fenster ohne Focus-Trap und ESC-Verschluss.
Mischen von Stilen/Symbolen, Duplizieren von Komponenten außerhalb des Designsystems.
Humor/Emojis in kritischen Szenarien (Zahlung/Sicherheit).

20) Vorher/Nachher Beispiele

Formularfehler

Vorher: „Fehler 400“

Nach: "Ungültiges Datumsformat. Verwenden Sie DD. MM. JJJJ"

Leerer Zustand

Vorher: „Hier ist es leer“

Danach: "Hier erscheint nach der ersten Aufstockung die Einsatzhistorie. [Konto aufladen]"

Erfolgsmeldung

Vorher: „Fertig“

Danach: "Die Zahlung wurde angenommen. Die Bilanz wurde aktualisiert. [Geschichte ansehen]"

Navigation

Vorher: unklar, wo sich der Nutzer befindet

Nach: aktiver Reiter + Brotkrümel + expliziter Seitentitel

21) Vorlagen für Design Revue

Bildschirmrahmen

Der Titel → eine kurze Beschreibung → Inhalt/Liste → Feedback/Status → Aktionen.

Formrahmen

Titel → Hinweis → Felder (Label + Helper + Error) → CTA → sekundäre Aktionen → Hinweise (Provisionen/Fristen).

Microcopy-Vorlage

Titel (opc.)

1-2 Sätze: Kontext + nächster Schritt

CTA: Aktion + Objekt

Sekundärer Link: Hilfe/Regeln

22) Prozesse und Aufrechterhaltung von Standards

Definition of Done (UX): Layout + Texte + Zustände + A11y + i18n + Metriken.
UX-Revue in PR: Checkliste aus den Abschnitten 18-21.
Dokumentation: Jede Ficha fügt eine Hyde im Wiki/Storybook hinzu/aktualisiert sie.
Audit einmal pro Quartal: Inhalt, A11y, Leistung, Konsistenz.

Abschließender Spickzettel

Ein Ziel, ein Haupt-CTA.
Die Zustände und der Zubringer werden vorab gestaltet.
A11y und Lokalisierung - von Grund auf neu, nicht „später“.
Weniger Farben bedeuten mehr Semantik und Rhythmus.
Messen: Conversion, Fehler, Zeit, Appelle.
Alles über das Design-System: gleiche Regeln → gleiche Erwartungen → vorhersehbare UX.

Ich kann diese Hyde mit fertigen Vorlagen für Ihre Schlüsselszenarien (Registrierung/CUS, Einzahlung/Auszahlung, Boni/Turniere) ergänzen und Checklisten für Ihren Revue-Prozess zusammenstellen.