13 conseils en UI design qui font une grande différence
Une étude de cas en design UI pour corriger une interface utilisateur en utilisant des conseils logiques de design.
Source : adhamdannaway.com/blog/ui-design/ui-design-tips
Les deux maquettes suivantes correspondent à la page de détails d’un bien dans une application de location. La première est la maquette originale, la seconde est le résultat après application de certains conseils UI.
Même sans grande expérience, on remarquera que le design original peut paraître plus confus, compliqué et plus difficile à utiliser. Il contient de nombreux détails problématiques qui nuisent à l’utilisabilité.
Nous allons corriger les problèmes un à un à l’aide des conseils ci-dessous.
Utilisez l’espace pour grouper les éléments liés
Regrouper l’information en petits blocs d’éléments conteneur liés.
Dans notre exemple, le manque d’espace entre les contenus rend la maquette encombrée et difficile à comprendre. Augmenter les espacements permet de clairement grouper les contenus, les rendant plus organisés et intelligibles.
Soyez cohérent
Les éléments similaires doivent se ressembler et avoir la même fonction.
Dans notre exemple, les styles d’icônes sont incohérents : certaines sont pleines, d’autres non. Cela peut embrouiller, puisque les icônes remplies suggèrent souvent qu’un élément est sélectionné. En uniformisant le design de toutes les icônes grâce à une contour de 2 pts et des coins arrondis, on améliore la cohérence visuelle et on donne à chaque icône un poids visuel similaire.
Des étiquettes de texte sont aussi ajoutées aux icônes pour aider à assurer que les personnes comprennent leur signification.
Les éléments ayant une apparence similaire fonctionnent de la même façon
Si des éléments se ressemblent, l'utilisateur s’attendra à ce qu’ils fonctionnent de manière similaire.
Dans notre exemple, les conteneurs d’icônes ont un style visuel proche du bouton « Book now ». Cela les rend interactifs, même si ce n’est pas le cas. Enlevant la couleur bleue et le style bouton des icônes évite qu’elles soient prises pour des éléments interactifs.
Créez une hiérarchie visuelle claire
Une hiérarchie d’importance claire aide les utilisateurs à scanner rapidement l’interface.
L'utilisateur va ainsi se concentrer sur ce qui compte. Elle améliore aussi l’esthétique en donnant un ordre. Pour cela, vous pouvez jouer sur les variations de taille, couleur, contraste, espacement, position et profondeur.
Dans l’exemple ci-dessous, une bannière sans hiérarchie claire est comparée à une version bien structurée.
Supprimez les styles inutiles
Les informations visuelles inutiles peuvent distraire et augmenter la charge cognitive.
Dans notre exemple, les espaces blancs et bordures autour d’une image ajoutent une complexité visuelle inutile. Ils ne sont pas nécessaires pour transmettre de l’information ou grouper les éléments, on peut donc les retirer pour simplifier le design.
Utilisez la couleur à bon escient
Utilisez la couleur avec parcimonie et intention.
Évitez d’utiliser la couleur uniquement comme décoration, cela peut être confus ou distrayant. Commencez par le noir et blanc, puis introduisez la couleur là où elle transmet du sens.
Une approche simple et efficace : appliquer la couleur de la marque aux éléments interactifs (liens, boutons). Cela apprend aux utilisateurs ce qui est interactif ou non. Essayez d’éviter d’utiliser la couleur de la marque sur des éléments non-interactifs.
Dans l’exemple original, le titre bleu peut ressembler à un lien. Pour éviter la confusion, on retire la couleur bleue du titre non interactif. On enlève la couleur bleue des éléments non interactifs comme les étoiles (notation) pour mieux distinguer ce qui est cliquable.
Veillez à ce que les éléments de l’interface aient un contraste de 3:1
1:1 (pas de contraste) > 21:1 (contraste maximal).
Afin de garantir que les personnes avec des déficiences visuelles distinguent clairement les détails de l’interface, visez au minimum les exigences WCAG 2.1 niveau AA pour le contraste des éléments UI (champs de formulaire, icônes, boutons) — soit au moins 3:1.
Dans l’exemple, nous avons augmenté le contraste de l’icône grâce à un fond blanc et du bouton à un ratio ≥ 3:1. Ces choix rendent ces éléments plus accessibles, ce qui permet de clarifier la hiérarchie visuelle de l'interface.
Veillez à ce que le texte ait un contraste de 4,5:1
Pour que le texte soit lisible par des personnes avec déficiences visuelles, il doit répondre aux critères WCAG 2.1 niveau AA :
Le texte petit (≤ 18 px) doit avoir un contraste minimum de 4,5:1
Le texte plus grand doit avoir un contraste minimum de 3:1
Dans l’exemple, le texte du compteur de photos a un contraste insuffisant. On augmente l’opacité du conteneur gris et on ajoute une ombre portée au texte pour atteindre ≥ 4,5:1. Le texte de localisation a lui aussi un contraste trop faible ; on utilise une teinte de gris plus sombre pour rendre le texte accessible.
Préférez une police sans serif
Dans une interface, il est généralement plus sûr d’utiliser une seule police sans serif : elles sont plus lisibles, plus neutres et plus simples.
Dans l’exemple, le titre utilise une police serif détaillée, difficile à lire et peut distraire. Utiliser une police sans serif simple (comme celle du texte principal) améliore la lisibilité et l’esthétique.
N'utilisez pas trop de graisses différentes
Bien que de nombreuses graisses existent dans une police, vous n’avez pas besoin de toutes les utiliser dans vos designs UI. Utiliser trop de graisses différentes peut ajouter de l’encombrement à l’interface, et il devient plus difficile de les utiliser de manière cohérente.
Gardez votre système de design simple et concis en n’utilisant 2 à 3 graisses au maximum : du bold pour les titres, du regular pour les textes secondaires.
Dans l’exemple, le texte de localisation utilise une graisse light. Même si nous avons augmenté le contraste au-delà de 4,5:1, les caractères fins peuvent rester difficiles à lire pour certains. Passer à la graisse regular améliore la lisibilité et simplifie le design.
Évitez le texte noir pur
En design UI, il est généralement préférable d’éviter l’utilisation du noir pur, car il présente un contraste très élevé avec le blanc, ce qui peut provoquer une fatigue oculaire ou une tension visuelle lors de la lecture prolongée.
Dans l’exemple, plusieurs éléments utilisent du noir pur. En les remplaçant par un gris foncé, on améliore la lisibilité. Par exemple, le texte de description du bien était trop mis en avant. Pour respecter la hiérarchie visuelle, on l’éclaircit légèrement pour réduire sa proéminence.
Alignez le texte à gauche
On lit de gauche à droite, de haut en bas selon un motif en “F”.
Il est donc préférable d’aligner le texte à gauche pour une lisibilité optimale. Pour de longs textes, éviter l’alignement centré ou justifié ; ils sont plus difficiles à lire.
L’alignement centré peut convenir aux titres ou textes courts, car ils sont lus rapidement. Mais pour des blocs de texte longs, l’alignement centré force les yeux à chercher le début de chaque ligne, ce qui fatigue.
La justification n'est pas recommandée pour le design d'interfaces mobiles car les espacements entre les mots sont difficiles à gérer et peuvent vite créer des "fleuves", ces espaces blancs verticaux trop importants qui nuisent à la régularité visuelle et fatiguent l’œil.
Dans l’exemple, le texte de description du bien était centré. Le passer à un alignement à gauche améliore la lisibilité et reste cohérent avec le texte au-dessus.
