Rendre les interfaces plus agréables

Que fait Rendre les interfaces plus agréables ?

Utilisez cette compétence pour les petits détails d'ingénierie de conception qui, combinés, donnent une interface plus soignée.

Source : récupéré de la PR communautaire #1659 par linus707.

Quand l'utiliser

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

Principes fondamentaux

Rayon concentrique

Pour les surfaces arrondies imbriquées proches :

rayon extérieur = rayon intérieur + padding

Si le padding 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 un culte de la formule.

Alignement optique

Le centrage géométrique n'est pas toujours le centrage visuel. Les boutons d'icône, les triangles de lecture, les flèches, les étoiles et les icônes asymétriques nécessitent souvent un léger 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 les 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 un popover a besoin de profondeur. Les ombres doivent être transparentes et suffisamment subtiles pour fonctionner sur tous les arrière-plans.

Retour à la ligne

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

Lissage de police

Sous macOS, appliquez un lissage de police antialiasé à la racine du layout si 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 subtil intérieur 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 noirs ou blancs neutres. Ne teintez pas les contours d'image avec la palette de la marque.

Animations

Utilisez les transitions CSS pour les changements d'état interactifs car elles peuvent recibler lorsque l'utilisateur change d'intention en cours d'animation. Réservez les keyframes pour les entrées uniques scénarisées ou les séquences de chargement.

Bonnes valeurs par défaut pour les animations :

• Entrée : combinez opacité, petit translateY, et éventuellement un flou.
• Sortie : plus courte et plus discrète que l'entrée, généralement 150 ms.
• Appui : scale(0.96) pour les boutons tactiles, avec un moyen de le désactiver quand le mouvement distrait.
• Changement d'icône : 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 bégaiement de 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 une zone de clic d'au moins 40x40 px, idéalement 44x44 px là où le layout le permet. Étendez avec un pseudo-élément lorsque l'icône visible est plus petite, mais ne laissez pas les zones de clic étendues se chevaucher.

Résultat de la revue

Quand vous examinez une passe de polissage UI, rapportez les modifications concrètes dans des lignes avant/après :

Principe	Avant	Après
Rayon concentrique	Même rayon sur parent et enfant	Le rayon parent tient compte du padding
Nombres tabulaires	Le compteur bouge 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 fichiers et les propriétés quand ils ne sont pas évidents d'après les extraits. Ommettez les principes que vous avez vérifiés mais sans changement.

Liste de vérification

• Les éléments arrondis imbriqués sont optiquement cohérents.
• Les icônes sont visuellement centrées.
• Les boutons, cartes et popovers utilisent des bordures ou des ombres pour la bonne raison.
• Les titres et les textes courts évitent les retours à la ligne gênants.
• Les nombres dynamiques utilisent des chiffres tabulaires.
• Les images ont des contours neutres si 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.