7 astuces pour améliorer le design de vos interfaces

Le 14/03/2019

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

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étendez-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.

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

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 )

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

3 – Décalez vos ombres

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).

4 – Utilisez moins de bordure

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

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.

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

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

… avec un élément actif

… ou même avec un header

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.

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 :

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.

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

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.