Détails qui rendent les interfaces meilleures

Les grandes interfaces ne viennent rarement d'une seule chose. C'est généralement une collection de petits détails qui s'accumulent pour créer une excellente expérience. Appliquez ces principes lors de la création ou de la révision du code UI.

Référence rapide

Principes fondamentaux

1. Rayon de bordure concentrique

Rayon extérieur = rayon intérieur + remplissage. Les rayons non appariés sur les éléments imbriqués sont la chose la plus courante qui rend les interfaces artificielles.

2. Alignement optique plutôt que géométrique

Quand l'alignement géométrique semble décalé, alignez optiquement. Les boutons avec icônes, les triangles de lecture et les icônes asymétriques nécessitent tous un ajustement manuel.

3. Ombres plutôt que bordures

Superposez plusieurs valeurs box-shadow transparentes pour une profondeur naturelle. Les ombres s'adaptent à n'importe quel arrière-plan ; les bordures solides ne le font pas.

4. Animations interruptibles

Utilisez les transitions CSS pour les changements d'état interactifs — elles peuvent être interrompues en cours d'animation. Réservez les keyframes pour les séquences scénarisées qui ne s'exécutent qu'une fois.

5. Animations d'entrée fractionnées et décalées

N'animez pas un seul conteneur. Divisez le contenu en blocs sémantiques et décalez chacun avec un délai d'environ 100 ms.

6. Animations de sortie subtiles

Utilisez un petit translateY fixe au lieu de la hauteur complète. Les sorties doivent être plus douces que les entrées.

7. Animations d'icônes contextuelles

Animez les icônes avec opacity, scale et blur au lieu de basculer la visibilité. Utilisez exactement ces valeurs : scale de 0.25 à 1, opacity de 0 à 1, blur de 4px à 0px. Si le projet a motion ou framer-motion dans package.json, utilisez transition: { type: "spring", duration: 0.3, bounce: 0 } — bounce doit toujours être 0. Si aucune bibliothèque de motion n'est installée, gardez les deux icônes dans le DOM (l'une positionnée absolument) et effectuez un fondu croisé avec les transitions CSS en utilisant cubic-bezier(0.2, 0, 0, 1) — cela donne les animations d'entrée et de sortie sans aucune dépendance.

8. Lissage des polices

Appliquez -webkit-font-smoothing: antialiased à la mise en page racine sur macOS pour un texte plus net.

9. Chiffres tabulaires

Utilisez font-variant-numeric: tabular-nums pour tout chiffre mis à jour dynamiquement afin d'éviter le décalage de mise en page.

10. Habillage du texte

Utilisez text-wrap: balance sur les titres. Utilisez text-wrap: pretty pour le texte du corps pour éviter les orphelins.

11. Contours d'image

Ajoutez un contour subtil de 1px avec une opacité faible aux images pour une profondeur cohérente. La couleur doit être du noir pur en mode clair (rgba(0, 0, 0, 0.1)) et du blanc pur en mode sombre (rgba(255, 255, 255, 0.1)) — jamais un quasi-noir comme slate, zinc ou tout neutre teinté. Un contour teinté absorbe la couleur de surface en dessous et se lit comme de la saleté sur le bord de l'image.

12. Mise à l'échelle au clic

Un subtil scale(0.96) au clic donne un retour tactile aux boutons. Utilisez toujours 0.96. N'utilisez jamais une valeur inférieure à 0.95 — tout ce qui est en dessous semble exagéré. Ajoutez une prop static pour la désactiver quand le mouvement serait distrayant.

13. Ignorer les animations au chargement de la page

Utilisez initial={false} sur AnimatePresence pour éviter les animations d'entrée au premier rendu. Vérifiez que cela ne casse pas les animations d'entrée intentionnelles.

14. Ne jamais utiliser transition: all

Spécifiez toujours les propriétés exactes : transition-property: scale, opacity. Le transition-transform de Tailwind couvre transform, translate, scale, rotate.

15. Utilisez will-change avec parcimonie

Uniquement pour transform, opacity, filter — propriétés que le GPU peut composer. N'utilisez jamais will-change: all. Ajoutez uniquement quand vous remarquez un bégaiement en première image.

16. Zone de clic minimale

Les éléments interactifs ont besoin d'une zone de clic d'au moins 40×40 px. Étendez avec un pseudo-élément si l'élément visible est plus petit. Ne laissez jamais les zones de clic de deux éléments se chevaucher.

Erreurs courantes

Format de sortie de révision

Présentez toujours les modifications sous forme de tableau markdown avec des colonnes Avant et Après. Incluez chaque modification que vous avez apportée — pas seulement un sous-ensemble. Ne listez jamais les résultats comme des lignes « Avant : » / « Après : » séparées en dehors d'un tableau. Groupez les modifications par principe en utilisant un titre au-dessus de chaque tableau et gardez chaque ligne focalisée sur un seul diff afin que le lecteur puisse parcourir rapidement la liste entière.

Exemple

Rayon de bordure concentrique

Chiffres tabulaires

Mise à l'échelle au clic

Les lignes doivent citer le fichier spécifique et la propriété spécifique qui a changé quand ce n'est pas évident à partir de l'extrait. Si un principe a été révisé mais rien ne devait changer, omettez ce tableau entièrement — les tableaux vides ajoutent du bruit.

Liste de vérification de révision

• [ ] Les éléments arrondis imbriqués utilisent un rayon de bordure concentrique
• [ ] Les icônes sont centrées optiquement, pas seulement géométriquement
• [ ] Les ombres sont utilisées à la place des bordures où approprié
• [ ] Les animations d'entrée sont fractionnées et décalées
• [ ] Les animations de sortie sont subtiles
• [ ] Les chiffres dynamiques utilisent tabular-nums
• [ ] Le lissage des polices est appliqué
• [ ] Les titres utilisent text-wrap: balance
• [ ] Les images ont des contours subtils
• [ ] Les boutons utilisent la mise à l'échelle au clic le cas échéant
• [ ] AnimatePresence utilise initial={false} pour les éléments en état par défaut
• [ ] Pas de transition: all — uniquement des propriétés spécifiques
• [ ] will-change uniquement sur transform/opacity/filter, jamais all
• [ ] Les éléments interactifs ont au moins 40×40 px de zone de clic

Fichiers de référence

• typography.md — Habillage du texte, lissage des polices, chiffres tabulaires
• surfaces.md — Rayon de bordure, alignement optique, ombres, contours d'image
• animations.md — Animations interruptibles, transitions d'entrée/sortie, animations d'icônes, mise à l'échelle au clic
• performance.md — Spécificité des transitions, utilisation de will-change