UX-haydline et normes d'interface

1) Principes

La clarté avant la beauté. Le sens et l'action sont évidents en 1 ou 2 secondes.
Une cible par écran. Tout le reste est secondaire ou caché.
Séquence. Mêmes schémas = mêmes attentes.
Disponibilité par défaut. Contraste, focus, clavier, voix.
Contextualité. Les indices et les textes sont exactement là où tu veux.
Localisation-first. Longueurs de lignes, formats, culture - dans le design à l'origine.
La réversibilité. Toute action risquée peut être annulée/confirmée.
La mesurabilité. Chaque règle est avec une métrique (conversion de pas, temps, erreurs).

2) Grille, indentations et rythme

Grille : Étape 4/8-pt ; colonnes : 12 (bureau), 6 (tablet), 4 (mobile).
Retraits internes des composants : multiples 4 ; externe - 8/ 12/16/24.
Rythme vertical : titre → sous-titre → contenu → action (CTA).
Frontières et diviseurs : économique ; préférer « l'air » et la hiérarchie typographique.

3) Imprimerie

Échelle de Keglei : 12/14/ 16/20/24/32/40 (body 16).
Hauteur de ligne : 1. 4–1. 6 pour le texte, 1. 2–1. 3 pour les titres.
Longueur de la ligne : 45-75 caractères (desktop), 35-55 (mobile).
Isolement : gras pour les accents sémantiques ; caps - seulement en étiquettes.
Lisibilité à haute voix : les textes doivent sonner naturellement.

4) Couleur et contraste

Sémantique : 'success/info/warning/error/neutral'.
Contraste : minimum WCAG 2. 1 AA (texte/contexte ≥ 4. 5:1; grande ≥ 3:1).
La couleur ≠ le seul signal. Ajoutez une icône/texte/forme.
Anneau de focus : toujours visible (ne pas désactiver dans CSS).

5) Architecture de navigation et d'information

Chemin d'accès de l'utilisateur : "Où suis-je ? Qu'y a-t-il ici ? Et ensuite " - évidemment.
Hiérarchie des menus : ≤ 2 niveaux dans la navigation principale.
Miettes de pain : pour les sections profondes.
Recherche : disponible globalement sur les répertoires complexes ; Clé chaude '/'.
États de navigation : l'onglet/page actif est mis en surbrillance par des tokens.

6) Composants et modèles

Nous utilisons les composants du système de conception (sans « auto-fabrication »).
Un premier-CTA par écran ; les autres sont secondaires/tertiaires.
États : default/hover/focus/active/disabled/loading - sont obligatoires pour chaque interactif.
États vides : contexte + valeur + CTA (+ lien secondaire).
Alerts généraux : une page-alert par écran + inline-indices locaux.

7) Formes, validation et erreurs

Le label est obligatoire. Placeholder est un exemple de format, pas un remplacement.
Inline-validation sur blur, summary-error sur submit.
Message d'erreur : ce qui ne va pas + comment corriger + restriction/format.
Auto-scroll et focus sur la première erreur ; 'aria-invalid', 'aria-describedby'.
Masques et formats : suggèrent, mais ne cassent pas l'entrée (past possible).
Sécurité des données : nous ne perdons rien au redémarrage/erreur.

8) États et fidbek

Succès : toast 2-4 s, ton neutre positif, CTA « quoi d'autre ».
Info/notice : bannière douce/tultip, ne bloque pas le flux.
Warning/Error/Critical : hiérarchie visuelle/sémantique ; critique - mode/bannière avec action explicite.
Téléchargement : skeleton> spinner ; estimation du temps d'attente> 3 s.

9) Contenu et microcopy

Règle des trois réponses : ce qui se passe → pourquoi → quoi faire ensuite.
CTA : verbe action + objet (« Enregistrer les modifications », « Passer la vérification »).
Nombres/dates/devises : formats locaux.
Ton : amical ; dans les étapes stressantes (paiement/sécurité) - neutre.

10) Disponibilité (A11y)

Navigation complète à partir du clavier ; l'ordre logique des tabous.
Les rôles et 'aria-' pour les interactifs, les régions de vie pour les toasts/statuts.
Contrastes, anneaux de focus, dimensions interactives ≥ 44 × 44 px.
Alternatives textuelles aux icônes/images ; tables avec 'th '/' scope'.
Contrôles : automatique (linter/scanner) + script manuel du lecteur d'écran.

11) Localisation et internationalisation

Toutes les lignes sont dans les clés i18n avec le contexte.
Test « langages longs » (DE/TR), modes RTL.
Nombres/devises/temps - utilitaires de formatage.
Tone-map : degré de formalité/émotion par scénario (onbording/payment/security).

12) Responsive et adaptative

Breakpoints : 360 / 768 / 1024/1280 +.
Mobile-first : chemin critique disponible avec une seule main, CTA dans la zone pouce.
Gestes et clavier : les gestes sont dupliqués par des boutons ; sur desktop - hotkei.
Densité : sur le bureau - « air », sur mobile - économie verticale sans compromettre la cliquabilité.

13) Thème obscur

Le contraste WCAG est conservé ; éviter le « noir pur » pour le fond (gris foncé).
Lueur/ombres - atténuées ; l'anneau de focus est contrasté.
Illustrations et logos - avec versions inversées.
Politique de transition : nous enregistrons la sélection de l'utilisateur (system/light/dark).

14) Animations et mouvement

Durée : 120-200 ms (petites), 200-300 ms (transitions).
Les fonctions d'accélération sont naturelles (cubic-bezier avec un léger ralentissement).
Les animations ne doivent pas bloquer le flux et dégrader la lisibilité.
Respecter 'prefers-reduced-motion'.

15) Performance

LCP ≤ 2. 5 s, TTI/TBT en zone verte ; Code de partage ; téléchargement paresseux des médias.
Virtualisation des listes longues ; hachage des données.
Skeleton pour la perception de la vitesse ; minimiser la mise en page « junk ».

16) Sécurité et vie privée dans l'IU

Explications claires des causes des demandes (caméra, KYC, géo).
Délais/commissions/limites transparents ; sans « instantanément » si des retards sont possibles.
Données sensibles - masquage, explicite « afficher/cacher ».
Confirmation de mesures irréversibles ; Journal des actions/notifications de connexion.

17) Métriques de qualité UX

Conversion de l'étape et du temps avant la fin.
Taux d'erreur par champs/étapes et Time-to-Fix.
CTR par CTA et répétabilité des scénarios.
Drop-off après erreur/après chargement> N secondes.
Appels de soutien par thème (avant/après le changement).
A11y-défauts de sortie (objectif - 0 critique).

18) Chèques-feuilles

Écran avant la sortie

• Un objectif principal et un premier-CTA.
• La navigation et le statut « où je suis » sont évidents.
• Le contenu est court : 1-2 suggestions par bloc.
• États : loading/empty/error/success couverts.
• A11y : contraste AA, focus visible, 'aria-' sur les interactions.
• Localisation : longueurs de lignes/formats/RTL vérifiés.
• Performance : pas de blocs « lourds » inutiles.

Formulaire avant la publication

• Des labels et des exemples de formats sont présents.
• Inline-validation + résumé sur submit.
• Scroll à la première erreur, focus dans le champ.
• Communications : quoi/comment/pourquoi ; sans codes 500/400 pour l'utilisateur.
• Les données ne sont pas perdues lors des erreurs/redémarrages.

19) Anti-modèles

« OK » comme CTA sur les étapes sémantiques.
Placholder à la place du label.
La couleur est le seul signal d'état.
Spinners sans estimation de temps et sans alternative.
Fenêtres modales sans focus-trap et ESC-fermeture.
Mélange de styles/icônes, duplication de composants en dehors du système de conception.
Humour/emoji dans les scénarios critiques (paiement/sécurité).

20) Exemples « avant/après »

Erreur de formulaire

Avant : « Erreur 400 »

Après : "Format de date incorrect. Utilisez le DD. MM. GGG"

État vide

« C'est vide »

Après : "Voici l'historique des opérations après la première reconstitution. [Réapprovisionner]"

Message de succès

Jusqu'à : « Prêt »

Après : "Paiement accepté. Le solde a été mis à jour. [Voir l'histoire]"

Navigation

Avant : il n'est pas clair où l'utilisateur

Après : onglet actif + miettes de pain + titre explicite de la page

21) Modèles pour la revue de design

Squelette d'écran

Titre → brève description → contenu/liste → fidbek/statuts → action.

Cadre de forme

L'en-tête → l'info-bulle → le champ (label + aide + erreur) → le CTA → les actions secondaires → les notes (commissions/délais).

Modèle microcopy

Titre (opz.)

1-2 phrases : contexte + prochaine étape

CTA : action + objet

Lentille secondaire : aide/règles

22) Processus et maintien des normes

Définition de Done (UX) : mise en page + textes + états + A11y + i18n + métriques.
UX-revew en PR : chèque des articles 18 à 21.
Documentation : chaque ficha ajoute/met à jour un hyde dans le wiki/Storybook.
Audit trimestriel : contenu, A11y, performance, cohérence.

Trempe finale

Un objectif, un CTA principal.
Les états et fidbek sont conçus à l'avance.
A11y et localisation - à partir de zéro, pas « après ».
Moins de couleurs - plus de sémantique et de rythme.
Mesurer : conversion, erreurs, temps, conversions.
Tout à travers le système de conception : les mêmes règles → les mêmes attentes → un UX prévisible.

Je peux compléter cet hyde avec des modèles prêts pour vos scénarios clés (inscription/CUS, dépôt/retrait, bonus/tournois) et collecter des checklists pour votre processus de jalousie.