Benutzerprofilschnittstelle

1) Grundsätze

1. Ein Gedanke auf dem Bildschirm. Profil = eine Reihe von kurzen, unabhängigen Abschnitten mit jeweils einem CTA.
2. Die Standardsicherheit. Sichtbare 2FA-Status/Sitzungen/Geräte, einfache Wege zum Handeln.
3. Transparenz der Daten. Was wird gespeichert, warum, wie deaktivieren/herunterladen/löschen.
4. Personalisierung ohne Überlastung. Nur echte Einstellungen, die die Erfahrung beeinflussen.
5. Verlieren Sie niemals den Kontext. Entwürfe, Rückkehr zum letzten Abschnitt, vorhersehbare URL.

2) Informationsarchitektur

• Profil (Avatar, Name, Kontakte)
• Sicherheit (Passwort, 2FA, Geräte/Sitzungen)
• Zahlungen (Methoden, automatisch gespeicherte Teile, Historie)
• Limits (verantwortungsvolles Spielen)
• KYC (Status, Hochladen von Dokumenten)
• Präferenzen (Sprache, Währung, Koeffizientenformat, Schnellwetten, Themen)
• Benachrichtigungen (Typen/Kanäle, Stille/Digest)
• Datenschutz und Daten (Sichtbarkeit, DSAR/Export, Löschung des Kontos)

Zeigen Sie niemals vollständige PAN/CVC; Token und Masken nur für UX.

3) Profilheader

Avatar (Laden/Zuschneiden), Display-Name, ID/Username.
Statusabzeichen: KYC: Im Check/Bestanden, 2FA: Ein/Aus, Verantwortliches Spiel: Aktiv.
Quick Links: „Passwort ändern“, „E-Mail/Telefon bestätigen“, „Limit setzen“.

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) Abschnitt „Profil“

Felder: Name, Geburtsdatum, Land, Sprache der Schnittstelle.
Kontakt: E-Mail (Verifizierung), Telefon (OTP).
Ort: Datum/Uhrzeit/Währung sind an Sprache und Land gebunden.
Das Geburtsdatum wird nur über den Sepport nach KYC bearbeitet.

UX: Formathinweise, Masken weich, Auto-Save mit Debunce, Bestätigung des Erfolgs.

5) Sicherheit

Passwort: Änderung durch aktuelles Passwort + Qualitätsregeln (Manometer/Hinweise), rückwirkend keine Anforderungen anzeigen.
2FA: TOTP/SMS; Einfacher Master-Stream: „Aktivieren Sie → QR → Backup-Codes“.
Geräte und Sitzungen: Liste der aktiven Eingänge (Gerät/OS/Ort/Zeit), CTA „Alle außer dem aktuellen abschließen“.
Soz-Logins: Bindung/Entkopplung mit Bestätigung.

6) Zahlungen

Zahlungsmethoden: Karten (Maske' 1234'), A2A/Geldbörsen; Standardstatus.
Schlussfolgerungen: Gespeicherte Daten (IBAN/Wallet) mit Micro-Transfer-Verifizierung, falls zutreffend.
Transaktionsverlauf: Filter nach Typ/Datum/Betrag, CSV-Export.
Transparenz: Provisionen/ETA und Status „in Bearbeitung/Abgelehnt/Fertig“.

7) Limits (Verantwortungsvolles Spielen)

Arten: Einlagen, Wetten, Temporäre (Time-Outs), Selbstausschluss.
UX: Funkperiode (Tag/Woche/Monat) + Betrag, expliziter Text „Tritt in Kraft durch“....
Änderung in Richtung Schwächung - mit Verzögerung; Verschärfung - sofort.

8) KYC

Stepper: Persönliche Daten → Dokumente → Versand → In Prüfung.
Klare Dateianforderungen (Typ/Größe/Klarheit) + Vorschau.
Status und Fristen, Benachrichtigungskanal nach Bereitschaft, Historie der eingereichten Unterlagen.

9) Präferenzen

Koeffizientenformat: dezimal/Bruchzahl/amerikanisch.
Quick Bets: Switch + Warnung „ohne Bestätigung“ und Undo, wenn erlaubt.
Thema: hell/dunkel/systemisch; Kontrastmittel für Sehbehinderte.
Geo und Sprache: Behalten Sie die Anforderungen der Gerichtsbarkeiten (Inhalts-/Blocklisten) bei, erinnern Sie sich jedoch daran.

10) Mitteilungen

Kanäle: Push/E-Mail/SMS/in der App.
Gruppen: Finanzen, Gaming, Soziales, Marketing (Standard moderat).
„Nicht stören“: Zeitbereiche und Bedingungen (z.B. kein Marketing in der Nacht).
Vorschau: Wie die Benachrichtigung aussieht, wo sie deaktiviert werden soll.

11) Datenschutz und Daten

Profil Sichtbarkeit (wenn soziale Funktionen): Wer sieht den Nick/Avatar/Aktivität.
Daten-Upload (DSAR): Archivanforderung mit Vorbereitungszeit; Benachrichtigung bei Bereitschaft.
Konto löschen: Folgen erklären, Grace-Period, „Freeze“ als Alternative.
Zustimmungsprotokoll: Cookie/Marketing/Begriffe - Daten und Versionen.

12) Geschichte der Aktion

Band: Ein-/Ausgänge, Passwortänderungen/2FA, Änderungen der Zahlungsdetails, Limits.
Filter und Export; Erläuterungen zu Geo-IP und Geräten.
CTA „Waren das nicht Sie?“ → schneller Flow beim Ändern des Passworts und Beenden von Sitzungen.

13) A11y und Lokalisierung

Etiketten und Hinweise sind durch 'aria-describedby' verbunden; Fehler - 'role =' alert'.
Kontrast ≥ AA, sichtbar': Fokus-sichtbar', Tab-Reihenfolge entspricht dem Visuellen.
'prefers-reduced-motion' - Minimum an Animationen.
Sprachliche Expansion: 20-30% Breite; Zahlen sind tabellarisch ('font-variant-numeric: tabular-nums;').

14) Mobile Muster

Profilmenü als Drawer; Schlüsselstatus/STA - oben.
Sticky-CTA unten für lange Formulare („Änderungen speichern“).
Skalierung der Felder, Tastatur nach Typ ('inputmode').
Benachrichtigungen/Geschichte - Band mit endlosem Upload und Sentry-Watcher.

15) Leer, Fehler, Zustände

Leer: freundlicher Hinweis und „was kommt als nächstes“ (Methode hinzufügen/2FA aktivieren).
Fehler: Ursache + wie zu beheben + Retry; die eingegebenen Daten nicht zurücksetzen.

Busy: lokale Bootloader, ohne den gesamten Bildschirm zu sperren; TTFF ≤ 100 ms

16) Metriken

Vervollständigung Rate durch Schlüsseleinstellungen (2FA, KYC, Zahlungsmethoden).
Time-to-Complete Abschnitte (Passwort/2FA/KYC/Limits).
Error Rate der Formulare + Anteil der erfolgreichen Retry.
Adoption Präferenzen (Thema, Quick Bets, Koeffizienten-Format).
Sicherheitsposture: Anteil der Nutzer mit 2FA, Anzahl der abgeschlossenen Fremdsitzungen.

17) Anti-Muster

Versteckte kritische Einstellungen (2FA/Limits) in der Tiefe.
Lange Fragebögen im Modal; Mangel an Autosafe.
„Stumme“ Sendung ohne busy/Bestätigung.
Zurücksetzen des Fokus und „Springen“ des Layouts; CLS wegen der Bilder.
Verbot von Copypast-Code 2FA/OTP.
Mischen Sie Marketing und kritische Benachrichtigungen standardmäßig.

18) Design-System-Token (Beispiel)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) Snippets

Geräte-/Sitzungsliste (HTML)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

Koeffizientenformatschalter (Radio)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

Zahlungsmethoden Karte (Maskierung)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) QS-Checkliste

Sinn und Fluss

• Die Abschnitte sind logisch; Jeder Bildschirm hat einen Master-CTA.
• URL/Navigation stellt den letzten Abschnitt wieder her.

Formen

• Korrekte' type/inputmode/autocomplete'; weiche Masken, vorhersehbares Caret.
• Asynchrone Prüfungen mit Debunce; Speichern verliert keine Daten.

Sicherheit

• Der 2FA-Flow ist eindeutig. Backup-Codes stehen zum Download zur Verfügung.
• Sitzungen/Geräte werden beendet, Ereignisse protokolliert.
• Sensible Felder werden nicht protokolliert/zwischengespeichert.

iGaming-Besonderheit

• Limits mit verzögerter Einführung und unterschiedlichen Zeiträumen.
• KYC-Status und Dokumente sind klar; Zeitrahmen und Benachrichtigungskanal sind sichtbar.
• Das Quotenformat und die Schnellwetten funktionieren wie angegeben.

A11u/Lokalisierung

• Kontrast ≥ AA;': focus-visible' sehen; Die Tab-Reihenfolge ist korrekt.
• Texte und Zahlen werden der Sprache/Währung angepasst; RTL wird unterstützt (notfalls).

Performance

• TTFF ≤ 100 ms; kein CLS; Bilder werden faul geladen.
• Große Listen (Geschichte) sind paginiert/virtualisiert.

21) Dokumentation im Konstruktionssystem

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Token: Felder/Radien/Fokus/Abzeichen, CUS-Status/Limits, Farben Erfolg/Fehler/Aufmerksamkeit.
Muster: „Ein CTA pro Partition“, „Undo/Confirm for risk“, „Export/Löschung von Daten (DSAR)“.
Do/Don't: versteckte Sicherheitseinstellungen, überladene Formulare, die Marketing-Inklusionen maskieren.

Kurze Zusammenfassung

Die Profilschnittstelle ist das Zentrum des Vertrauens: Sie muss einfach, ehrlich und sicher sein. Die klare Architektur, der schnelle und vorhersehbare Flow (2FA/KYC/Limits/Payments), die übersichtlichen Formulare und die Transparenz im Umgang mit den Daten machen das Profil zur Produktstütze und entlasten den Sapport - besonders kritisch für iGaming.