make-interfaces-feel-better

Améliorer le ressenti des interfaces

Utilisez cette compétence pour les petits détails de design-engineering qui se cumulent pour créer une interface plus soignée.

Source : récupérée de la PR communautaire obsolète #1659 par linus707.

Quand l’utiliser

• L’utilisateur dit que l’UI semble étrange, plate, générique, serrée, saccadée ou inachevée.
• Vous construisez des contrôles, des cartes, des listes, des tableaux de bord, de la navigation, des formulaires ou des barres d’outils.
• Un composant a besoin d’états de survol, actif, focus, entrée, sortie, chargement ou vide.
• Une revue frontend nécessite des recommandations spécifiques avant/après.

Principes fondamentaux

Rayon concentrique

Pour les surfaces arrondies imbriquées proches :

rayon extérieur = rayon intérieur + espacement

Si l’espacement est grand, traitez les couches comme des surfaces séparées au lieu de forcer le calcul. L’objectif est la cohérence optique, pas le respect absolu de la formule.

Alignement optique

Le centrage géométrique n’est pas toujours le centrage visuel. Les boutons d’icônes, les triangles de lecture, les flèches, les étoiles et les icônes asymétriques nécessitent souvent un petit décalage. Corrigez le SVG quand c’est possible ; sinon ajustez avec une marge ou un padding au niveau du pixel.

Ombres et bordures

Utilisez des bordures pour la séparation et les anneaux de focus. Utilisez des ombres superposées quand une carte, un bouton, un menu déroulant ou une popover a besoin de profondeur. Les ombres doivent être transparentes et suffisamment subtiles pour fonctionner sur tous les arrière-plans.

Habillage du texte

• Utilisez text-wrap: balance sur les titres et les titres courts.
• Utilisez text-wrap: pretty sur les textes de corps courts à moyens, les légendes, les descriptions et les éléments de liste.
• Évitez les deux sur les longs textes en prose, le code et le contenu préformaté.
• Utilisez font-variant-numeric: tabular-nums pour les compteurs, minuteries, prix, tableaux et autres nombres mis à jour.

Lissage de police

Sur macOS, appliquez l’antialiasing de police lissé à la mise en page racine quand le projet ne le fait pas déjà :

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Contours des images

Les images ont souvent besoin d’un contour interne subtil pour que leurs bords ne se fondent pas dans la surface.

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Utilisez des contours alpha neutres noirs ou blancs. Ne teintez pas les contours des images avec la palette de la marque.

Mouvement

Utilisez les transitions CSS pour les changements d’état interactifs car elles peuvent être redirigées lorsque l’utilisateur change d’intention en cours de mouvement. Réservez les images clés pour les entrées uniques scénarisées ou les séquences de chargement.

Bons réglages par défaut pour le mouvement :

• Entrée : combinez opacité, petit translateY et éventuellement flou.
• Sortie : plus court et plus discret que l’entrée, généralement 150 ms.
• Pression : scale(0.96) pour les boutons tactiles, avec un moyen de le désactiver lorsque le mouvement distrait.
• Échanges d’icônes : fondu enchaîné avec opacité, échelle et flou au lieu de bascules de visibilité instantanées.

Portée des transitions

N’utilisez jamais transition: all. Spécifiez les propriétés modifiées :

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Utilisez will-change uniquement pour le scintillement de la première image sur les propriétés compatibles avec le compositeur telles que transform, opacity et filter. N’utilisez jamais will-change: all.

Zones de clic

Les contrôles interactifs doivent avoir au moins une zone de clic de 40x40 px, idéalement 44x44 px là où la mise en page le permet. Agrandissez avec un pseudo-élément lorsque l’icône visible est plus petite, mais ne laissez pas les zones de clic étendues se chevaucher.

Sortie de revue

Lors de la révision d’une passe de polissage UI, rapportez les modifications concrètes sous forme de lignes avant/après :

Principe	Avant	Après
Rayon concentrique	Même rayon sur parent et enfant	Le rayon parent tient compte de l’espacement
Nombres tabulaires	Le compteur se décale quand les chiffres changent	Le compteur utilise tabular-nums
Portée des transitions	transition: all	Propriétés de transition explicites

Incluez les chemins de fichier et les propriétés quand ils ne sont pas évidents d’après les extraits. Omettez les principes que vous avez vérifiés mais que vous n’avez pas modifiés.

Liste de vérification

• Les éléments arrondis imbriqués sont optiquement cohérents.
• Les icônes sont centrées visuellement.
• Les boutons, cartes et popovers utilisent des bordures ou des ombres pour la bonne raison.
• Les titres et les textes courts évitent les coupures maladroites.
• Les nombres dynamiques utilisent des chiffres tabulaires.
• Les images ont des contours neutres là où c’est nécessaire.
• Les animations d’entrée et de sortie sont séparées, subtiles et interruptibles si approprié.
• Les boutons ont des états actifs tactiles sans mouvement exagéré.
• transition: all et will-change: all sont absents.
• Les petits contrôles ont toujours des zones de clic utilisables.