Interface de profil utilisateur

1) Principes

1. Une pensée par écran. Profil = ensemble de sections indépendantes courtes avec un CTA chacune.
2. Sécurité par défaut. Statut visible 2FA/sessions/périphériques, chemins d'action simples.
3. Transparence des données. Ce qui est stocké, pourquoi, comment désactiver/télécharger/supprimer.
4. Personnalisation sans surcharge. Uniquement les paramètres réels qui affectent l'expérience.
5. Ne jamais perdre le contexte. Brouillons, retour à la dernière section, URL prévisible.

2) Architecture de l'information

• Profil (avatar, nom, contacts)
• Sécurité (mot de passe, 2FA, appareils/sessions)
• Paiements (méthodes, pièces stockées automatiquement, historique)
• Limites (jeu responsable)
• KYC (état, téléchargement des documents)
• Préférences (langue, devise, format des ratios, taux rapides, sujets)
• Notifications (types/canaux, silence/digest)
• Vie privée et données (visibilité, DSAR/exportation, suppression de compte)

Ne jamais montrer les PAN/CVC complets ; jetons et masques uniquement pour UX.

3) Profil Header

Avatar (téléchargement/recadrage), affichage, ID/userneim.
Baji status : KYC : À la vérification/Passé, 2FA : Activé/Désactivé, Jeu responsable : Actif.
Les liens rapides : "Changer le mot de passe", "Confirmer l'e-e/téléphone", "Établir la limite".

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) Section « Profil »

Champs : nom, date de naissance, pays, langue de l'interface.
Contacts : e-mail (vérification), téléphone (OTP).
Local : date/heure/monnaie liée à la langue et au pays.
La date de naissance n'est éditée qu'après KYC.

UX : les indices de format, les masques sont doux, les voitures avec débonds, la confirmation du succès.

5) Sécurité

Mot de passe : changement par mot de passe actuel + règles de qualité (manomètre/conseil), ne pas afficher les exigences rétroactivement.
2FA: TOTP/SMS; Flux maître simple : « Activer → QR → codes de sauvegarde ».
Périphériques et sessions : liste des entrées actives (périphérique/OS/localisation/heure), CTA « Terminer tout sauf le courant ».
Sots-logins : référence/disjonction avec confirmation.

6) Paiements

Méthodes de paiement : cartes (masque '1234'), A2A/porte-monnaie ; État par défaut.
Conclusions : détails conservés (IBAN/portefeuille) avec vérification par micro-transfert, si appliqué.
Historique des transactions : filtres par type/date/montant, exportation CSV.
Transparence : commissions/ETA et états « En cours de traitement/Refusé/Terminé ».

7) Limites (Jeu responsable)

Types : Dépôt, Mise, Temporaire (time-outs), Auto-exclusion.
UX : période radio (jour/semaine/mois) + montant, texte explicite « Entrez en vigueur par »....
Changement vers l'atténuation - avec retard ; le resserrement - tout de suite.

8) KYC

Stepper : Données personnelles → Documents → Envoi de → En cours de vérification.
Exigences de fichier claires (type/taille/clarté) + prépromoteur.
Statut et délais, canal de notification de préparation, historique des documents déposés.

9) Préférences

Format des coefficients : décimal/fractionnaire/américain.
Paris rapides : pull + avertissement « sans confirmation » et Undo si autorisé.
Sujet : léger/foncé/systémique ; mode contrastant pour les malvoyants.
Géo et langage : sauvegarder mais se rappeler les exigences des juridictions (contenu/organigrammes).

10) Notifications

Chaînes : push/e-mail/SMS/dans l'application.
Groupes : financier, jeu, social, marketing (modéré par défaut).
« Ne pas déranger » : fourchettes de temps et de conditions (par exemple, pas de commercialisation la nuit).
Preview : à quoi ressemble une notification où désactiver.

11) Vie privée et données

Visibilité du profil (si fonction sociale) : qui voit le pseudo/avatar/activité.
Chargement de données (DSAR) : demande d'archivage avec un délai de préparation ; avis de préparation.
Supprimer un compte : expliquer les conséquences, grace-period, « Geler » comme alternative.
Journal des consentements : cookie/marketing/termes - dates et versions.

12) Histoire de l'action

Ruban : entrées/sorties, changements de mot de passe/2FA, changements de détails de paiement, limites.
Filtres et exportations ; explication sur la géo-IP et les appareils.
CTA « Ce n'était pas vous ? » → un flow rapide pour changer de mot de passe et terminer les sessions.

13) A11y et localisation

Les labels et les indices sont liés par « aria-describedby » ; erreurs - 'role =' alert '.
Le contraste est ≥ AA, visible par ': focus-visible', l'ordre de Tabulation correspond au visuel.
'Prefers-reduced-motion 'est un minimum d'animations.
Expansion linguistique : marge de 20 à 30 % en largeur ; les nombres sont tabulaires (« font-variant-numeric : tabular-nums ; »).

14) Modèles mobiles

Menu de profil en tant que drawer ; statuts clés/STA - en haut.
Sticky-CTA en bas pour les formulaires longs (« Enregistrer les modifications »).
Mise à l'échelle des champs, clavier par type ('inputmode').
Notifications/historique - bande avec un chargement sans fin et un observateur sentry.

15) Vide, erreurs, états

Empty : conseil amical et « quoi d'autre » (ajouter la méthode/activer 2FA).
Error : raison + comment réparer + Retry ; ne pas réinitialiser les données saisies.
Busy : téléchargeurs locaux, sans verrouillage de l'écran entier ; TTFF ≤ 100 ms.

16) Métriques

Taux complet selon les paramètres clés (2FA, KYC, méthodes de paiement).
Time-to-Complete sections (mot de passe/2FA/KYC/limites).
Taux d'erreur des formulaires + proportion de Retry réussis.
Addition des préférences (sujet, paris rapides, format des ratios).
Security posture : proportion d'utilisateurs avec 2FA, nombre de sessions d'autres personnes terminées.

17) Anti-modèles

Paramètres critiques cachés (2FA/limites) en profondeur.
Questionnaires longs en modalk ; l'absence d'autosaive.
Envoi « muet » sans busy/confirmation.
Réinitialiser la mise au point et « sauter » de la mise en page ; CLS à cause des images.
Interdiction du copipast du code 2FA/OTP.
Mélange marketing et notifications critiques par défaut.

18) Tokens de système de conception (exemple)

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) Snappets

Liste des périphériques/sessions (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>

Commutateur de format des coefficients (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>

Carte de mode de paiement (masquage)

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

20) Liste de vérification QA

Sens et flux

• Les sections sont logiques ; chaque écran a un CTA maître.
• URL/navigation restaure la dernière partition.

Formulaires

• Correct 'type/inputmode/autocoplete' ; masques doux, caret prévisible.
• Contrôles asynchrones avec débonds ; l'enregistrement ne perd pas de données.

Sécurité

• 2FA flow est compréhensible ; les codes de sauvegarde sont disponibles pour téléchargement.
• Les sessions/périphériques sont terminés, les événements sont logés.
• Les champs sensibles ne sont pas logés/mis en cache.

iGaming-spécificité

• Limites avec entrée différée et périodes différentes.
• Les statuts et les documents du KYC sont clairs ; le calendrier et le canal de notification sont visibles.
• Le format des ratios et les taux rapides fonctionnent comme indiqué.

A11u/Localisation

• Contraste ≥ AA ; « : focus-visible » vu ; L'ordre de tabulation est correct.
• Les textes et les chiffres sont adaptés à la langue/monnaie ; RTL est soutenu (si nécessaire).

Performance

• TTFF ≤ 100 ms ; pas de CLS ; les images sont chargées paresseusement.
• Grandes listes (historique) paginées/virtualisées.

21) Documentation dans le système de conception

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Tokens : champs/rayons/focus/badges, états de CUS/limites, couleurs succès/erreur/attention.
Modèles : « Un CTA par partition », « Undo/Confirm pour le risque », « Exportation/Suppression de données (DSAR) ».
Do/Don't : paramètres de sécurité cachés, formes surchargées qui masquent les inclusions marketing.

Résumé succinct

L'interface de profil est un centre de confiance : elle doit être simple, honnête et sécurisée. Une architecture claire, un flow rapide et prévisible (2FA/KYC/limites/paiements), des formes soignées et la transparence du traitement des données transforment le profil en un support de produit et réduisent la charge de travail du sappport - particulièrement critique pour iGaming.