Savoir-faire d'interface
La plupart des interfaces n'échouent pas sur les idées. Elles échouent sur l'exécution — un espacement presque cohérent, une hiérarchie presque claire, une typographie presque juste.
Diagnostiquer avant de restyler
Demandez à quoi sert l'écran. Une action principale, tout au plus une secondaire. Si vous ne pouvez pas nommer l'action principale, le problème de mise en page est un problème de produit et aucun style ne le résout.
Ce qui fait vraiment la qualité perçue
Hiérarchie. Un spectateur doit savoir où regarder avant même de lire quoi que ce soit. Obtenez-la avec la taille, le poids et l'espace — dans cet ordre. La couleur est l'outil de hiérarchie le plus faible et le plus surutilisé.
Rythme d'espacement. Les éléments liés sont plus proches que les éléments non liés, et les écarts proviennent d'une seule échelle. Un espacement incohérent est le défaut que les gens ressentent sans pouvoir le nommer. Obtenez une proximité correcte et une mise en page simple donne l'impression d'être conçue.
Typographie. Une famille pour l'interface, deux au maximum sur la page. Définissez une échelle réelle et utilisez ses paliers plutôt que d'inventer des tailles. Le corps de texte veut une mesure confortable — environ 60 à 75 caractères — et une hauteur de ligne qui augmente avec la largeur de la mesure.
Retenue dans les surfaces. Les bordures, les ombres et les remplissages séparent tous les éléments. Choisissez-en un par limite. Empiler les trois est la raison pour laquelle les interfaces semblent chargées à densité normale.
Alignement. Tout s'aligne avec quelque chose. Un élément aligné sur rien ressemble à une erreur, même quand il est intentionnel.
La densité est un choix
Un outil dense en informations et une page marketing demandent des traitements opposés. Décidez de ce qu'il est et engagez-vous — le milieu inconfortable, où un tableau de données a le padding d'une page d'accueil, ne sert ni l'un ni l'autre.
Finaliser les états
Les états de chargement, vide, erreur et débordement sont là où les produits semblent inachevés. Un état vide est une opportunité de conception ; un spinner sans contexte est un aveu. Les chaînes longues, les listes longues et les petits écrans doivent tous être gérés, pas espérés.
Le mode sombre est une palette, pas une inversion
Inverser un thème clair produit le mauvais mode sombre caractéristique : fonds noirs purs, texte blanc pur et ombres qui ne font rien.
- Utilisez un gris très foncé plutôt que du noir pur, et un blanc légèrement atténué plutôt que du blanc pur. Le contraste maximum entre les deux provoque de l'halation et est vraiment fatiguant à lire.
- L'élévation s'inverse : dans les thèmes clairs, les surfaces surélevées projettent des ombres ; dans les thèmes sombres, elles deviennent plus claires. L'ombre seule ne transmet rien sur un fond sombre.
- Les couleurs saturées qui fonctionnaient sur du blanc vibreront sur du foncé. Désaturez et éclaircissez les couleurs d'accent pour la palette sombre plutôt que de les réutiliser.
- Définissez les deux palettes ensemble, au niveau des tokens, dès le départ. La rétro-ingénierie signifie auditer chaque surface.
Seuil d'accessibilité
Ce ne sont pas des éléments de polissage — en dessous d'eux, certaines personnes ne peuvent pas utiliser du tout l'interface.
- Contraste du texte respectant le ratio standard par rapport à son fond réel, y compris le texte sur les images et à l'intérieur des boutons colorés.
- Ne jamais transmettre de sens uniquement par la couleur. Une bordure rouge indiquant une erreur a besoin aussi d'un texte ou d'une icône.
- Chaque élément interactif accessible via le clavier, dans un ordre logique, avec un état de focus visible.
- Cibles tactiles suffisamment grandes pour être touchées de manière fiable, avec un espacement entre les cibles adjacentes.
- Respecter la préférence de mouvement réduit : une animation qui ne peut pas être désactivée provoque de véritables symptômes chez certains utilisateurs.
- De vrais éléments sémantiques — des boutons qui sont des boutons, des titres dans l'ordre. Un div stylisé est invisible pour les technologies d'assistance.
Jamais
- Ajouter du poids visuel pour résoudre un problème de hiérarchie causé par trop d'éléments égaux. Supprimez plutôt.
- Centrer le texte du corps.
- Livrer un état survol sans l'état focus correspondant.