7 astuces pour améliorer le design de vos interfaces
5 (100%) 1 vote

Qu’il le veuille ou non, tout développeur devra, un jour ou l’autre, gérer le design de sa création. Qu’il s’agisse de prendre des décisions vis-à-vis de l’apparence d’un site, ou de gérer l’interface utilisateur, savoir coder ne suffit pas toujours. 

En effet, peut-être que votre entreprise ne dispose pas d’un webdesigner à plein temps et qu’il vous revient la lourde tâche de prendre des décisions en matière d’esthétique ou d’UI. 

Je vous vois déjà lever les yeux au ciel : « Mais je suis un développeur moi, pas un artiste ! ». Détends-vous, on vous offre quelques conseils pour améliorer le design de vos interfaces avec de la technique plutôt que du talent, même si vous n’y connaissez rien au webdesign.

Cet article est une traduction libre d’un article de RefactoringUI

1 – Utilisez des couleurs ou des attributs d’écritures différents pour montrer la hiérarchie de votre site 

Image RefactoringUI

Il est assez courant de jouer sur la taille d’une police d’écriture pour faire ressortir l’ordre d’importance des différents éléments d’une page.

  • «  Cet élément est important ? Je vais l’écrire en plus gros. » 
  • « Ce texte est secondaire ? Je vais l’écrire en plus petit. »

Pourtant, il existe d’autres solutions. Essayez d’utiliser les couleurs et les attributs de votre police à bon escient, vous aurez le même résultat !

  • « Ce texte est important ? Je vais l’écrire en gras. »
  • « Ce texte est secondaire ? Je vais le mettre dans un couleur plus claire. »

Pour y arriver, définissez deux ou trois nuances et utilisez-les :

  • Une couleur foncée (mais pas de noir) pour le contenu primaire (comme le titre)
  • Une couleur grise pour les éléments secondaires (la date de publication d’un article)
  • Une couleur claire pour les éléments peu importants (le copyright, les mentions légales )
Image RefactoringUI

Aussi, choisissez 2 attributs :

  • Une police normale pour la plupart du texte
  • Une police plus grasse pour les éléments importants et les titres
Image RefactoringUI

2 – N’utilisez pas de gris sur un fond coloré 

Image RefactoringUI

Comme nous l’avons dit, utiliser du gris est une bonne façon de diminuer l’importance d’un texte sur un fond blanc, mais une écriture grise ne rend pas vraiment bien sur un fond coloré.

Image RefactoringUI

C’est simplement parce que ce n’est pas la couleur grise choisie en elle-même qui atténue l’importance d’un texte, c’est l’effet de faible contraste sur un fond blanc.

 Pour recréer cet effet sur un fond coloré, vous avez deux options :

  • réduire l’opacité d’une écriture blanche
Image RefactoringUI
  • trouver une couleur claire basée sur la couleur de fond en jouant sur la saturation et le contraste
Image RefactoringUI

3 – Décalez vos ombres

Image RefactoringUI

Plutôt que d’utiliser de larges effets de flou, utilisez un léger décalage vertical pour faire ressortir vos éléments.

Cela semblera beaucoup plus naturel puisque la lumière semblera venir du dessus, comme dans la « vraie vie ». Ce conseil s’applique également aux ombres incrustées (par exemple dans les champs de formulaire).

Image RefactoringUI

4 – Utilisez moins de bordure

Il est temps de se débarrasser de ce mauvais réflexe : bien qu’efficaces, les bordures ne sont pas le seul moyen de séparer deux éléments.

Image RefactoringUI

Au contraire, si vous en utilisez trop, vous risquez de rendre votre site trop encombré, pas suffisamment aéré. Voici plusieurs autres solutions :

  • Jouez sur les ombres pour faire ressortir un élément de façon plus subtile 
Image RefactoringUI
  • Utilisez des couleurs de fond légèrement différentes
Image RefactoringUI
  • Augmentez l’espacement pour mieux délimiter les différents éléments sans utiliser de bordure
Image RefactoringUI

5 – Ne rendez pas vos icônes plus grandes qu’elles ne devraient l’être

Image RefactoringUI

Il existe de nombreux sites de ressources en ligne pour trouver des icônes liées à vos différentes sections, par exemple les fonctionnalités de votre application.

Vous voilà donc avec votre petite icône en format vectoriel. Vous vous dites « c’est du vectoriel, je peux la redimensionner autant que je le veux ! », et vous vous retrouvez avec des icônes de la taille d’une main sur votre page.

Grave erreur.

Même s’il est vrai que la qualité des images vectorielles reste la même en augmentant leur taille, les icônes dessinées entre 16 et 24 pixels ne seront jamais très professionnelles si vous les agrandissez jusqu’à 3 ou 4 fois leur taille originale. Elles manqueront de détails et feront brouillon. 

Image RefactoringUI

Si vous ne disposez que de petites icônes, essayez de les ajouter au sein d’une forme ou d’y ajouter une couleur de fond. Cela vous permettra de remplir l’espace sans perdre le design original de l’icône. 

Image RefactoringUI

6 – Utilisez des bordures accentuées pour ajouter de la couleur à un design un peu fade

Pas besoin d’être un artiste pour ajouter un peu d’originalité à vos UI !

Ajoutez des bordures colorées à vos design pour les faire ressortir. Cette simple astuce vous permettra de faire la différence en un rien de temps.

Image RefactoringUI

Il ne faut pas être graphiste pour ajouter un rectangle coloré à votre interface utilisateur, et cela peut grandement contribuer à donner à votre site une apparence plus “conçue”.

Exemple avec les messages d’alerte

Image RefactoringUI

… avec un élément actif

Image RefactoringUI

… ou même avec un header

Image RefactoringUI

Vous avez du mal à choisir vos couleurs ? Découvrez les différents outils pour vous aider à créer des palettes de couleurs.

7 – Sachez qu’il n’est pas toujours nécessaire d’ajouter une couleur de fond à vos boutons

Lorsqu’il y a plusieurs actions qu’un utilisateur peut effectuer sur une page, il est facile de tomber dans le piège de la conception des boutons call to action uniquement basée sur la sémantique.

Certes, la sémantique est un élément important de la conception des boutons, mais il existe une dimension plus importante, généralement oubliée: la hiérarchie.

Image RefactoringUI

Vous vous dites « Est-ce une action positive? Je mets le bouton en vert. » « Est-ce que cela efface les données? Je mets le bouton en rouge. »

La plupart des pages ne comportent qu’un seul call to action, deux call to action secondaires moins importants et quelques actions tertiaires rarement utilisées.

En créant les boutons qui correspondent à ces actions, vous devriez vous baser sur la hiérarchie que vous souhaitez mettre en évidence :

Image RefactoringUI

– Les actions primaires devraient sauter aux yeux. Les couleurs de fond solides et contrastées fonctionnent généralement bien ici.

– Les actions secondaires doivent être claires mais non saillantes. Les styles de contour ou les couleurs d’arrière-plan moins contrastées sont d’excellentes options.

– Les actions tertiaires doivent être trouvables, mais discrètes. Un simple lien cliquable est généralement la meilleure approche.

Je vous entends d’ici : « Mais ! Les boutons qui détruisent les données ou annulent une action sont censés être rouges ! ». Et bien, pas forcément. Si l’action destructive n’est pas l’action principale de la page, il peut être préférable de lui attribuer un traitement secondaire ou tertiaire.

Image RefactoringUI

Gardez votre gros bouton rouge pour les actions principales destructives, comme la confirmation de suppression de compte.

Image RefactoringUI

Conclusion

Si vous avez aimé cet article, je vous recommande vivement la lecture de leur livre Refactoringui. Il y’a beaucoup d’autres concepts détaillés et simples à mettre en pratique pour améliorer vos interfaces.