Polissage d'interface
Rendez l'interface plus facile à lire, à viser et à parcourir. Commencez par le produit existant : sa police de caractères, ses icônes, ses couleurs, sa densité, ses composants et son framework. Améliorez les relations entre ces choix. Ne modifiez une convention visuelle que lorsqu'un problème observé ou le brief de l'utilisateur le justifie.
Trouver les frottements à l'usage
Tracez une tâche représentative à travers l'écran réel. Ouvrez un menu, sélectionnez une ligne, réduisez un panneau, appliquez un filtre, et revenez au contenu. Lisez les définitions des composants et des tokens derrière les problèmes visibles. Les captures d'écran révèlent la hiérarchie et l'espacement ; l'interaction révèle le focus tronqué, les contrôles inaccessibles et le mouvement qui claque.
Priorisez les défaillances qui bloquent la lecture ou l'action avant les incohérences cosmétiques. Liez chaque changement proposé à un symptôme concret : des métadonnées qui disparaissent, une action de suivi poussée hors de vue, un nombre qui tressaute, ou un menu dont l'échelle saute tandis que son opacité s'estompe. Pour une demande large, choisissez une passe cohérente et implémentez-la. Pour une demande de révision uniquement, donnez des conclusions avec des emplacements et des preuves.
Inspectez les instructions du dépôt, la chaîne d'outils prise en charge et les vérifications existantes avant de modifier. Lisez la cascade actuelle et toute modification qui se chevauche. Une substitution de token qui semble identique sur une branche peut modifier la géométrie après qu'une autre branche met à jour ce token.
Donner aux textes et aux icônes des rôles distincts
Établissez un petit ensemble de rôles de texte. Laissez le titre de ligne mener, les métadonnées expliquer et l'action rester reconnaissable. Une interface de bureau dense pourrait utiliser des titres en 14px/600, des métadonnées en 12px/400 et des étiquettes de section en 16px. Considérez-les comme des points de départ ; une application axée sur la lecture ou tactile peut nécessiter un texte plus grand. Conservez la police établie si elle peut exprimer les graisses requises.
Utilisez l'espacement et le poids pour séparer les rôles avant d'ajouter plus de boîtes ou de couleurs. Gardez les métadonnées associées sous leur titre avec un espacement intentionnel. Utilisez des chiffres tabulaires pour les comptes en cours de mise à jour, et réservez suffisamment de largeur pour la plus grande valeur attendue. Équilibrez les titres courts ou utilisez un meilleur habillage de paragraphe là où c'est pris en charge, sans vous fier aux règles d'habillage pour corriger un panneau trop petit.
Mesurez le texte secondaire par rapport à son arrière-plan réel dans chaque thème pris en charge. Le texte ordinaire a besoin d'au moins 4,5:1 de contraste. L'opacité se combine avec les couleurs de surface, donc une valeur de token plausible à elle seule ne prouve pas grand-chose. Préservez la palette du produit et les rôles de couleurs sémantiques ; aucune police, teinte d'accent, bibliothèque d'icônes ou thème neutre spécifique n'est requis.
Gardez les tailles d'icônes et le poids optique cohérents au sein d'un rôle. Inspectez l'ensemble existant avant de modifier l'épaisseur du trait, car les bibliothèques utilisent des géométries différentes. Un petit glyphe peut se trouver dans un bouton plus grand. Donnez aux contrôles composés uniquement d'icônes des noms accessibles et masquez les doublons décoratifs des technologies d'assistance.
Faire en sorte que la géométrie soutienne l'action
Utilisez l'échelle de rayon existante de manière cohérente. Si l'échelle elle-même nécessite un travail, mappez les tailles sur des rôles tels que les petits puces, les contrôles et les panneaux flottants plutôt que de remplacer chaque coin par un seul rayon. Pour les formes imbriquées, déduisez le rayon intérieur du rayon extérieur moins l'encart réel, y compris la bordure et le rembourrage. Limitez-le à zéro si nécessaire.
Dimensionnez la cible interactive séparément de l'icône ou du texte visible. Visez au moins 24 x 24 pixels CSS sur les contrôles compacts et des cibles tactiles plus généreuses là où l'espace le permet. WCAG a des exceptions d'espacement et autres ; vérifiez-les explicitement avant de vous y fier. Préférez le rembourrage du bouton ou une étiquette d'encapsulation. Les extensions de zone de hit invisibles nécessitent des vérifications de rognage, de chevauchement et d'activation accidentelle des contrôles voisins.
Utilisez les bordures et les ombres pour le regroupement, l'état ou l'élévation lorsqu'elles aident. Un autre plan d'ombre est rarement la première solution pour une hiérarchie faible. Préservez le focus visible à l'intérieur des listes rognées, en utilisant un traitement en incrustation lorsque c'est approprié. Gardez les actions essentielles découvrables sans survol, y compris sur les appareils tactiles.
Répondre à l'espace dont dispose le composant
Une fenêtre large peut contenir une zone de travail étroite après l'ouverture d'une barre latérale ou d'un inspecteur. Dimensionnez les en-têtes, les lignes et les compositeurs réutilisables à partir de la largeur de panneau disponible. Placez les requêtes de conteneur sur l'ancêtre pertinent et adaptez ses descendants ; une requête de taille ne peut pas redimensionner son propre conteneur de requête. Vérifiez le positionnement et l'empilement des superpositions après avoir introduit le confinement.
Décidez ce qui cède en premier. Laissez les étiquettes rétrécir avec min-width: 0, réservez une piste stable pour l'action de suivi, puis rétrogradez le chrome secondaire avant de compresser la tâche principale. Une étiquette masquée a toujours besoin d'un nom accessible. Supprimer une divulgation décorative est différent de supprimer le seul moyen d'activer une ligne.
Testez les titres longs, les grands comptes, les métadonnées réelles, les listes vides et les résultats filtrés. Expliquez pourquoi une vue est vide et proposez une récupération appropriée, comme effacer un filtre ou créer un élément. Conservez le contenu existant pendant l'actualisation en arrière-plan lorsqu'il reste valide. Ne remplacez pas les lignes chargées par un squelette simplement parce qu'une requête a commencé.
Lisez les pièges d'implémentation lorsque vous modifiez la réactivité des panneaux, les contrôles imbriqués ou les superpositions.
Faire correspondre le mouvement au changement d'état
Utilisez le système d'animation et les tokens d'assouplissement déjà présents. Inspectez les styles calculés avant de prétendre qu'un remplacement de classe ou de token modifie le mouvement. Transitionnez explicitement les propriétés qui changent réellement : les scale et translate CSS individuels sont distincts de transform.
Favorisez un petit déplacement et une fixation rapide pour les contrôles courants. Une entrée d'environ 150 à 250 ms et une sortie plus courte peuvent être utiles, mais la fréquence et le but décident du timing. Évitez de mettre à l'échelle des lignes à partir de rien, des arrivées échelonnées lentes dans les listes de travail, et des animations sur chaque mise à jour en streaming. Animez uniquement ce qui aide quelqu'un à suivre un changement.
Gardez le mouvement au survol derrière des conditions de pointeur fin capables de survol. Les contrôles essentiels restent disponibles pour les utilisateurs de clavier et de tactile. Une fermeture pendant une ouverture doit inverser l'état visible, et un élément qui sort doit cesser d'accepter les entrées. Lorsqu'un dialogue ou un menu primitif gère déjà la présence et le focus, utilisez son cycle de vie de sortie pris en charge. N'ajoutez pas un deuxième minuteur de démontage ou un gestionnaire de focus concurrent. L'élimination logique et la restauration du focus doivent suivre le comportement du primitif sans attendre le mouvement de sortie décoratif.
Un mouvement réduit atteint le même état final utilisable sans déplacement spatial. Vérifiez la logique d'achèvement lorsque les transitions sont supprimées. Utilisez une compétence de mouvement dédiée pour les ressorts complexes, la chorégraphie ou l'architecture d'animation ; cette passe ne nécessite pas l'installation d'un autre package de compétence.
Vérifier le résultat que les gens utiliseront
Inspectez le résultat combiné après toutes les modifications, avec les mêmes données avant et après. Incluez un écran large avec un panneau étroit, une fenêtre de taille téléphone, les thèmes pris en charge, la navigation au clavier et l'accès de type tactile. Vérifiez l'inversion en milieu de transition et le mouvement réduit pour les modifications de mouvement. Une capture d'écran au repos ne peut pas établir qu'une sortie s'anime correctement.
Exécutez les tests applicables du dépôt, le lint, la vérification de type et la construction en utilisant son environnement d'exécution pris en charge. Enquêtez sur les échecs avant de blâmer le correctif. Lorsqu'une comparaison de base est nécessaire, reproduisez-la avec le même environnement d'exécution et la même configuration. Préférez les vérifications comportementales pour le chemin modifié ; les assertions de chaîne CSS seules ne peuvent pas établir le contraste, la géométrie, la visibilité du focus ou la continuité de l'animation.
Rapportez ce qui a changé et pourquoi, les vérifications réellement effectuées, et toute incertitude restante. Séparez les améliorations observées du nettoyage de token sans effet visible. Gardez les descriptions et les preuves à jour après l'intégration. Pour l'inspiration en amont, inspectez la source actuelle, adaptez le principe à ce produit et créditez les sources publiques. Dites quand une source était inaccessible au lieu d'inventer une citation ou un endossement.