UI Audit — Révision de l'Interface et de l'Interaction
Standards de conception : Minimalisme + Narration par animation + Texte minimal.
Principe fondamental : Utiliser le visuel plutôt que le texte, utiliser l'animation plutôt que les invites, et quand le texte est nécessaire, utiliser le moins de mots possible.
Scripts associés
scripts/scan-ui.sh [DIRECTORY]: Scanne automatiquement en lecture seule les symboles textuels, les textes de boutons flous, le texte chinois codé en dur, les chargements statiques, les classes CSS non définies, et d'autres problèmes UI courants.
Étape 0 : Vérification de la ligne de base UI (doit être effectuée avant toute révision)
Ligne de base de navigation
□ L'utilisateur peut revenir à la page d'accueil depuis n'importe quelle page
□ L'utilisateur peut revenir à la liste depuis une page de détail
□ L'utilisateur peut accéder au flux de création/nouvel élément depuis la liste
□ Le rafraîchissement de la page ne perd pas la position actuelle
Ligne de base de gestion des états
□ Chaque chargement de données a un état de chargement (skeleton/spinner)
□ Chaque appel API a un état d'erreur (message d'erreur visible par l'utilisateur)
□ Chaque liste a un état vide (message convivial + guide d'action)
□ La soumission de formulaire a un état désactivé (empêche les soumissions multiples)
Ligne de base d'authentification
□ La page de connexion a une entrée 'Inscription'
□ La page d'inscription a une entrée 'Connexion'
□ Après connexion, rediriger vers une page pertinente (pas un écran blanc)
□ Effacer l'état après déconnexion
□ Rediriger automatiquement vers la page de connexion en cas d'expiration du token
Si la ligne de base n'est pas respectée, réparez d'abord la ligne de base, n'effectuez aucune autre révision UI.
Philosophie de conception
Minimalisme
□ Chaque page a un seul point focal visuel
□ L'espace blanc fait partie du design
□ Pas plus de 2 couleurs principales + 1 couleur d'accent
□ Pas plus d'une police de caractères
□ Pas d'ombres, pas de dégradés, pas de coins arrondis de plus de 4px
□ Les espacements sont des multiples de 8px/16px/24px/32px
Narration par animation
□ Chaque changement d'état a une animation de transition (150-300ms)
□ Les éléments de liste entrent avec une animation stagger (intervalle de 30-50ms)
□ Les clics sur les boutons ont un retour visuel (scale: 0.98)
□ Le chargement utilise Skeleton, pas un espace réservé statique
□ Les erreurs utilisent une animation de tremblement ou un changement de couleur, pas une popup
□ Les succès utilisent une brève animation de surbrillance, pas un toast
Texte minimal
□ Le texte des boutons ne dépasse pas 4 caractères
□ Les boutons d'icône n'ont pas de texte (utiliser tooltip)
□ Pas de mots flous comme 'OK', 'Annuler' (utiliser 'Enregistrer', 'Abandonner')
□ Les messages d'erreur ne dépassent pas 10 caractères
□ Les éléments de navigation ne dépassent pas 2 caractères + icône
Interdiction des symboles textuels
□ Pas de → ← ↑ ↓ (utiliser des icônes de flèche)
□ Pas de × (utiliser une icône de fermeture)
□ Pas de + - (utiliser des icônes d'ajout/soustraction)
□ Pas de > < (utiliser une icône Chevron)
□ Pas de ✓ ! (utiliser des icônes Check/Alert)
□ Pas de ~ (utiliser des séparateurs visuels)
□ Pas de % (utiliser une barre de progression ou un cercle)
Checklist de révision
1. Vérification des symboles textuels (priorité la plus élevée)
Exécutez scripts/scan-ui.sh pour une analyse automatique, puis confirmez manuellement chaque correspondance et remplacez-la par une icône si nécessaire.
2. Vérification du système d'icônes
□ Les icônes d'opérations courantes sont complètes : save / trash / edit / arrow-left / x (close)
□ Les icônes de navigation sont complètes : search / plus / download / upload / external-link
□ Toutes les icônes ont un style uniforme (contour ou plein, un seul choix)
□ La taille des icônes est uniforme (16px pour les actions, 24px pour la navigation, 32px pour les états vides)
□ Les icônes proviennent de la même bibliothèque d'icônes (par ex. Lucide / Heroicons / Phosphor), pas de mélange
3. Vérification des animations
□ Les transitions de page ont une animation (fade/slide)
□ Les éléments de liste entrent avec une animation stagger
□ Les clics sur les boutons ont un retour visuel
□ Le chargement utilise une animation Skeleton
□ Les modales/menus déroulants ont une animation d'ouverture
□ Les opérations longues ont une animation de progression
Interdits : spinner tournant pendant plus de 2 secondes, étiquettes clignotantes, animations en boucle infinie, animations complexes qui affectent les performances.
4. Intégrité i18n
□ Tout le texte visible par l'utilisateur utilise la fonction t()
□ Pas de chaînes chinoises codées en dur (sauf dans les fichiers de traduction)
□ Les messages d'erreur utilisent les clés i18n
□ Les aria-label utilisent i18n
5. Cohérence CSS
□ Toutes les classes CSS référencées dans JSX sont définies
□ Pas de classes CSS inutilisées
□ La hiérarchie z-index est cohérente (modal: 200, drawer: 100, backdrop: 99, toast: 300)
□ Les couleurs utilisent des variables CSS ou des couleurs de thème, pas de hex codé en dur
□ Pas de !important (sauf raison clairement justifiée)
6. Vérification du code mort
□ Tous les fichiers de composants sont importés par au moins un autre fichier
□ Pas de fichiers avec le même nom (composants en double dans différents répertoires)
□ Pas d'imports inutilisés
7. Gestion des états
□ Chaque chargement de données a un état de chargement
□ Chaque appel API a un état d'erreur
□ Chaque liste a un état vide
□ La soumission de formulaire a un état désactivé
□ Les opérations longues ont un support d'annulation/interruption
8. Flux de navigation
□ Toutes les routes ont un composant de page correspondant
□ Les routes protégées ont un auth guard
□ La page 404 a un fallback convivial
□ La navigation avec fil d'Ariane/bouton retour fonctionne correctement
□ Les liens externes s'ouvrent dans un nouvel onglet
9. Responsive et accessibilité
□ Le rendu mobile ne déborde pas
□ Tous les éléments interactifs ont un aria-label
□ Opérable au clavier (navigation Tab, Fermeture avec Escape, Confirmation avec Enter)
□ Les modales/panneaux ont un focus trap
□ Le contraste des couleurs respecte WCAG AA
Flux de travail
Phase 1 : Scan automatisé
Exécutez scripts/scan-ui.sh, collectez les résultats. Concentrez-vous sur : symboles textuels, texte de bouton trop long, animations manquantes, texte chinois codé en dur, classes CSS non définies.
Phase 2 : Validation manuelle
Comparez avec la philosophie de conception et la checklist de révision, vérifiez page par page. Utilisez Playwright pour prendre des captures d'écran de chaque page et les examiner.
Phase 3 : Correction
Corrigez par ordre de priorité :
- Remplacement des symboles textuels par des icônes
- Simplification du texte
- Ajout des animations
- Ajout des classes CSS
- Ajout de i18n
- Suppression du code mort
- Gestion des états
- Flux de navigation
Phase 4 : Validation de régression
Après correction, relancez le scan automatisé pour confirmer qu'il n'y a pas de nouveaux problèmes.
Relation avec polish-loop-v2
- polish-loop-v2 : Révision de code générique (logique, sécurité, performance, exécution)
- ui-audit : Concentré sur le front-end UI et l'expérience utilisateur
Exécution parallèle, ligne de base commune. Les problèmes de ui-audit ont une priorité plus élevée que ceux de polish-loop-v2.