Petites astuces de design UI qui produisent un grand effet

• Le design UI peut être amélioré plus vite et de façon plus prévisible en appliquant des règles logiques cohérentes pour décider de la disposition, des espacements, des polices et des couleurs, plutôt qu’en s’appuyant sur le seul sens artistique
• Regrouper les éléments liés grâce aux espaces, utiliser la même forme pour la même fonction et créer une hiérarchie visuelle claire avec la taille, la couleur, le contraste et la position constituent la base
• Il faut réduire les couleurs décoratives et les bordures inutiles, et utiliser la couleur de manière sélective pour indiquer si un élément est interactif, comme les liens et les boutons
• Selon le niveau AA des WCAG 2.1, les éléments d’UI doivent avoir un contraste d’au moins 3:1, et les petits textes d’au moins 4.5:1 ; il faut aussi fournir des indices autres que la couleur, comme un soulignement ou une forme
• En s’appuyant sur une seule police sans serif et sur les graisses regular/bold, puis en appliquant une grande x-height, la casse phrase, l’alignement à gauche et une hauteur de ligne d’au moins 1.5, on améliore la lisibilité et la cohérence

---

Comment améliorer une UI avec des règles logiques

• Le design UI doit prendre en compte non seulement la mise en page, l’espacement, la typographie et les couleurs, mais aussi l’utilisabilité, l’accessibilité et la psychologie, ce qui rend les choix facilement complexes
• Au lieu de déplacer les éléments à l’intuition jusqu’à obtenir un rendu agréable, l’application d’un système de règles réutilisables permet de prendre plus vite des décisions fondées
• Un écran de détail d’hébergement en location courte durée sert d’exemple pour corriger étape par étape un écran initial complexe et difficile à utiliser
• L’objectif n’est pas d’ajouter une décoration de marque, mais d’assurer d’abord l’intuitivité, l’accessibilité et une qualité visuelle de base

1. Regrouper les éléments liés avec les espaces

• En divisant l’information en petits groupes liés, on peut comprendre et mémoriser plus vite la structure de l’écran
• Il existe quatre façons de regrouper les éléments
  • les placer dans le même conteneur
  • réduire l’espacement entre les éléments liés
  • les représenter avec des formes similaires
  • les aligner le long d’une ligne continue
• Les conteneurs sont l’indice de regroupement le plus fort, mais ils peuvent ajouter des décorations inutiles à l’écran
• Les espaces et l’alignement sont des méthodes plus subtiles qui permettent aussi de garder un écran simple
• Dans l’exemple, l’espacement entre les contenus est augmenté afin de distinguer clairement les différents groupes d’information

2. Garder des formes et des comportements cohérents

• Les éléments similaires doivent se ressembler et fonctionner de manière similaire, non seulement dans le produit lui-même, mais aussi par rapport à d’autres produits familiers
• Un comportement prévisible réduit le besoin pour l’utilisateur de réapprendre l’usage à chaque fois et diminue le risque d’erreur
• Dans l’exemple, les icônes mélangeaient styles pleins et contours, ce qui pouvait faire croire que les icônes pleines correspondaient à un état sélectionné
  • Toutes les icônes sont harmonisées avec des angles arrondis et un contour de 2 pt afin d’équilibrer leur poids visuel
  • Des libellés texte sont ajoutés pour les utilisateurs qui comprennent difficilement le sens via les seules icônes et pour les utilisateurs de lecteurs d’écran
• On s’attend à ce que des éléments de même forme fonctionnent de la même manière ; si la fonction diffère, le traitement visuel doit aussi différer
• Dans l’exemple, le conteneur d’icône non interactif ressemblait au bouton Book now, donc la couleur bleue et le style de bouton ont été retirés

3. Créer une hiérarchie visuelle claire

• Toutes les informations n’ont pas la même importance ; les éléments importants doivent donc être représentés de manière plus visible
• En ajustant la taille, la couleur, le contraste, l’espacement, la position et la profondeur, l’utilisateur peut parcourir rapidement l’écran et trouver les zones d’intérêt
• Le Squint Test consiste à plisser les yeux ou à regarder l’écran flou pour vérifier si les éléments importants et la fonction de l’écran restent perceptibles
• Sur l’écran initial, plusieurs éléments rivalisaient avec une intensité similaire, tandis que le bouton d’action principal en bas à gauche passait presque inaperçu
• En appliquant au bouton principal une couleur de fond à fort contraste et une police en gras, il devient l’élément le plus saillant de l’écran
• La description principale était trop mise en avant par rapport à son importance ; sa couleur et sa typographie sont ensuite ajustées pour abaisser sa place dans la hiérarchie

4. Supprimer les décorations inutiles

• Les lignes, couleurs, fonds ou animations qui ne transmettent pas de sens et ne servent pas à regrouper les éléments peuvent détourner l’attention et augmenter la charge cognitive
• Les marges blanches et la bordure autour de l’image de l’exemple sont supprimées car elles ne sont pas nécessaires à la transmission de l’information
• Réduire les éléments décoratifs simplifie l’écran et aide à se concentrer sur les informations et actions essentielles

5. Donner un rôle clair à la couleur

• Il est plus sûr d’utiliser la couleur avec parcimonie pour transmettre du sens plutôt que comme simple décoration
• Une approche efficace consiste à partir du noir et blanc, puis à n’ajouter de la couleur qu’aux endroits nécessaires
• Appliquer la couleur de marque aux éléments interactifs comme les liens texte et les boutons facilite l’apprentissage de ce qui est cliquable
• Pour des éléments dont la forme indique déjà l’interactivité, comme une carte, il n’est pas indispensable d’ajouter de la couleur
• Dans l’exemple, le titre bleu et les étoiles de notation étaient des éléments non interactifs, mais semblaient cliquables ; la couleur a donc été retirée
• Le résultat rend plus claire la distinction entre éléments interactifs et information générale

6. Appliquer un contraste d’au moins 3:1 aux éléments d’UI

• Le contraste exprime la différence de luminosité perçue entre deux couleurs par un ratio allant de 1:1 à 21:1
• Selon le niveau AA des WCAG 2.1, les éléments d’UI comme les champs de formulaire, les icônes et les boutons nécessitent un contraste minimal de 3:1
• Dans l’exemple, les flèches sur la photo pouvaient être difficiles à voir selon l’image de fond
  • Une icône grise et un fond blanc opaque sont appliqués afin d’assurer le contraste indépendamment de la photo
  • L’ajout d’un conteneur de fond rend aussi la zone cliquable plus grande et plus claire
• Le bouton principal initial manquait lui aussi de contraste avec le fond, ce qui rendait sa forme difficile à distinguer pour les utilisateurs malvoyants
• En augmentant son contraste à au moins 3:1, on améliore à la fois l’accessibilité et la hiérarchie visuelle
• Le contraste peut être mesuré avec WebAIM Contrast Checker ou le plugin Contrast pour Figma

7. Appliquer un contraste suffisant au texte

• Le niveau AA des WCAG 2.1 exige des rapports de contraste différents selon la taille et la graisse du texte
  • Les petits textes de 18 px ou moins nécessitent au minimum 4.5:1
  • Les textes en gras de plus de 18 px, ou les textes regular de plus de 24 px, nécessitent au minimum 3:1
• L’indication du nombre de photos manquait de contraste avec le fond ; l’opacité du conteneur gris est donc augmentée et une ombre portée est ajoutée au texte
• Le texte de localisation était trop clair et sa police trop fine ; il est remplacé par un gris plus foncé
• Même si le seuil de contraste est respecté, une police trop fine peut rester difficile à lire ; il faut donc aussi ajuster la graisse séparément

8. Ne pas distinguer un état uniquement par la couleur

• Les utilisateurs atteints de troubles de la vision des couleurs peuvent avoir du mal à distinguer certaines combinaisons, ou ne pas percevoir la couleur elle-même
• Le sens, l’état ou l’interactivité ne doivent pas être communiqués uniquement par la couleur
• Dans l’exemple, le lien Reviews ne se distinguait plus du texte normal une fois le bleu retiré
• En ajoutant un soulignement, il devient identifiable comme lien même si la couleur n’est pas perçue

9. Utiliser une seule police sans serif

• Une police de caractères (typeface) est un ensemble de glyphes partageant un style commun, comme Helvetica, tandis que les variantes de taille et de graisse comme bold/regular correspondent aux polices individuelles
• Dans une interface, il est généralement plus sûr d’utiliser une seule police sans serif, lisible, neutre et simple
• Dans l’exemple, la police serif décorative du titre était difficile à lire et pouvait mal s’accorder avec la photo du logement ou l’ambiance du service
• L’unification avec la même police sans serif que le corps de texte améliore l’utilisabilité et la cohérence visuelle

10. Choisir une police avec une grande hauteur d’x

• Une police avec une x-height importante, qui correspond à la hauteur des minuscules, et un espacement suffisant entre les lettres est généralement plus lisible en petite taille
• Dans l’exemple, League Spartan avait une x-height relativement faible
• Le remplacement par Inter, qui possède une x-height plus élevée, améliore la lisibilité du petit texte courant

11. Limiter l’usage des majuscules

• Les personnes lisent souvent vite en reconnaissant la forme globale des mots plutôt que chaque lettre individuellement
• Un mot écrit entièrement en majuscules prend une forme rectangulaire uniforme, ce qui oblige davantage à vérifier les lettres une à une et le rend plus difficile à lire
• Les informations de localisation passent des MAJUSCULES intégrales à la casse phrase, avec une majuscule seulement au premier mot et aux noms propres
• Les majuscules intégrales doivent être réservées aux expressions courtes qui exigent réellement une forte emphase

12. Utiliser seulement les graisses regular et bold

• Même si une police propose plusieurs graisses, les utiliser toutes ajoute du bruit visuel à l’écran et rend la gestion cohérente plus difficile
• Il vaut mieux garder un design system simple, centré sur regular et bold
  • utiliser bold pour les titres et les textes mis en avant
  • utiliser regular pour les petits textes courants
  • si bold paraît trop lourd, on peut le remplacer par semi-bold
  • réserver les graisses très fines ou très épaisses aux grands titres, et seulement de manière limitée
• Dans l’exemple, le texte de localisation utilisait une graisse light, ce qui pouvait rester difficile à lire même après l’augmentation du contraste
• Le passage à regular améliore la lisibilité et réduit le nombre de graisses utilisées

13. Éviter le texte en noir pur

• Le noir pur crée un contraste très élevé avec un fond blanc, ce qui peut fatiguer les yeux lors d’une lecture prolongée
• Sur fond blanc, il est plus sûr d’utiliser un gris foncé plutôt que du noir pur
• Dans l’exemple, plusieurs éléments noirs sont remplacés par un gris foncé afin d’ajuster la lisibilité
• Une description de logement trop visible par rapport à son importance reçoit un gris plus clair pour réduire sa place dans la hiérarchie visuelle

14. Aligner les textes longs à gauche

• En anglais, la lecture se fait de gauche à droite et le balayage visuel suit souvent une forme en F ; l’alignement à gauche est donc le plus stable
• Les titres ou les phrases courtes restent faciles à lire même centrés
• Quand un texte long est centré, le début de chaque ligne change de position, ce qui rend plus difficile la recherche de la ligne suivante
• La justification et le centrage peuvent rendre les longs textes particulièrement difficiles à lire pour les utilisateurs ayant des troubles cognitifs
• Dans l’exemple, la description du logement passe d’un alignement centré à un alignement à gauche, ce qui la rend aussi plus cohérente avec le texte situé au-dessus

15. Régler la hauteur de ligne du corps de texte à 1.5 ou plus

• La hauteur de ligne est la distance verticale entre deux lignes de texte
• Un espacement adapté entre les lignes aide à éviter de relire la même ligne et rend les textes longs plus confortables à lire
• La hauteur de ligne du corps de texte doit être au minimum de 1.5 (150 %), et une valeur entre 1.5 et 2 est généralement appropriée
• Dans l’exemple, la hauteur de ligne passe de 1 (100 %) à 1.5 (150 %), ce qui améliore la lisibilité

Résultat des modifications et principes d’application

• En appliquant successivement 16 règles, l’écran initialement complexe devient plus simple, plus lisible et plus accessible
• Une décoration adaptée à l’identité de marque peut être ajoutée ensuite, mais il faut d’abord corriger les bases comme la structure de l’information, la distinction des interactions, le contraste et la typographie
• En utilisant des règles objectives plutôt que des préférences subjectives, on peut concevoir plus vite des UI intuitives et accessibles
• Les règles appliquées de manière répétée deviennent progressivement la base naturelle du flux de travail en design, sur laquelle on peut ensuite expérimenter de nouvelles expressions et décorations