Bases de l’UI Design : les règles fondamentales à connaître

Avant de découvrir les bases de l’UI Design, il faudrait en amont, définir ce qu’est l’UI Design. J’en ai déjà parlé dans un autre article, mais la notion de « Design » est assez nébuleuse et il existe une multitude d’expertises qui gravitent autour. Mais pour connaître les fondamentaux, il est important de comprendre de quoi on parle.

L’UI Design, késako ?

Vous avez sans doute déjà entendu parler d’UX Design, voire d’UX/UI Design. Dans le second cas, c’est tout à fait normal, car les UX et UI Designers travaillent souvent ensemble, ce sont deux expertises très liées.

« L’UI ? Ah oui, ça sert à rendre le site joli ! »

Mhm… Non. J’entends souvent cette phrase, mais l’UI Design ce n’est pas juste rendre le tout « joli ». UI signifie « User Interface », ou « Interface Utilisateur » en français. L’UI Design s’attarde donc plutôt sur l’expérience d’interaction et l’aspect visuel d’un site ou d’une application.

Les bases de l’UI Design reposent sur trois grands principes

La mission de l’UI Designer est très simple (et compliquée à la fois), il doit travailler sur les aspects visuels de l’interface afin d’offrir la meilleure expérience possible aux utilisateurs. La meilleure ne veut pas dire « la plus belle », mais la combinaison d’une expérience claire et simple avec une interface agréable et bien conçue.

#1 Le design de marque, le branding

Il va se baser sur l’identité visuelle de la marque ou en créer une de A à Z. Votre site ou votre application, c’est la continuité de votre identité visuelle, vous diffusez votre image via ces outils numériques. Par conséquent, un UI Designer doit toujours respecter la charte graphique d’une marque : le logo, les couleurs, les typographies, les icônes ou les illustration. Ainsi, votre utilisateur sera capable de facilement faire le lien entre la marque et l’interface, l’ensemble sera cohérent et rassurant pour lui.

#2 Le design d’information

L’autre principe de base sur lequel travaille l’UI Design tourne autour du design d’information. Grosso modo, cela regroupe tous les éléments liés à l’information textuelle (titraille, texte, liens, CTA…). Et ensuite, il faut être capable de hiérarchiser ces éléments pour faciliter la lecture. Le but est ne pas surcharger une page avec trop d’éléments, il faut créer de l’espace négatif (de l’espace vide), mais pas trop non plus !

Il faut ensuite que tout ces éléments soient bien visibles, que les éléments importants soient bien mis en avant et ceux qui sont secondaires ne prennent pas le dessus. Pour y parvenir, on joue sur les couleurs, les contrastes, les espacements, la typographie, etc.

Et bien entendu, tous ces éléments, s’ils sont réutilisés, doivent l’être de la même manière. Comme pour le branding, on respecte les mêmes codes graphiques. Par exemple, si votre CTA d’abonnement est jaune avec un typo noire, vous devez garder le même code graphique sur l’ensemble de votre site (bien sûr vous pouvez adapter la taille). C’est très important pour la bonne compréhension des informations et pour améliorer l’expérience.

#3 Le design d’interaction

Dernier principe de l’UI Design, et pas des moindres : l’interaction. Le but est de guider l’utilisateur et faciliter sa navigation, optimiser son parcours. Quand on parle d’interaction, on pense à tout les éléments cliquables : que ça soit un CTA, un champ de formulaire, un lien ou même une icône.

L’UI Designer doit donc rendre tous ces éléments reconnaissables par l’utilisateur. Ce dernier doit comprendre qu’il peut interagir avec un élément. Et c’est là généralement qu’on va miser sur l’affordance. C’est un terme courant pour tout UI ou UX Designer. L’affordance c’est une caractéristique d’un élément (mais ça vaut aussi pour un objet) qui suggère à l’utilisateur son mode d’usage ou la façon d’interagir avec. On peut prendre l’exemple des poignées de porte, certains vont suggérer à l’utilisateur qu’il faudra « pousser » ou « tirer ». Et quand c’est mal fait… Je vous laisse repenser à toutes ces personnes que vous avez vu galérer au moment où il fallait ouvrir la porte.

Mais il n’y a pas que l’affordance qu’il faut prendre en compte, mais également la zone de clic. En particulier sur les interfaces mobile, il faut qu’un élément puisse être facilement cliquable en fonction de la taille d’un doigt ou d’un pouce. Mais cela vaut aussi sur le web, si un utilisateur souhaite dérouler un menu dans une barre de navigation il faut lui laisser une marge de manœuvre et ne pas rendre la zone cliquable microscopique.

La Checklist Design : où comment ne pas oublier les bases de l’UI Design

Après vous avoir présenté les bases de l’UI Design, je vais vous parler maintenant de certaines règles qu’il est important de suivre quand on conceptualise une interface web ou mobile.

Récemment, j’ai découvert un outil en ligne pour avoir une checklist des bonnes pratiques en UI et aussi en UX. Cet outil parfait, c’est la « Checklist Design ». Ce site permet de passer en revu les éléments indispensables et la façon de les présenter, les contextes, etc. C’est hyper simple, ludique et même pas besoin de s’inscrire pour y accéder.

Je vous propose de parcourir quelques points, qui selon moi, sont primordiaux.

#1 Les couleurs

Les couleurs et les contrastes, j’ai l’impression que c’est le combat de ma vie.

• La psychologie des couleurs

Il faut savoir que la couleur peut avoir un réel impact sur vos utilisateurs, sur leurs émotions et sur l’image qu’ils ont de votre marque et de votre site ou votre app.
Par exemple, le rouge est toujours associé à la destruction, au négatif. Tandis que le vert à l’approbation, au positif. Dans le secteur de la presse, le jaune/orange est toujours associé à l’abonnement ou au contenu Premium.

• Les valeurs ou les états par la couleur

La couleur sert aussi à comprendre la hiérarchie des informations, avec une couleur principale, une secondaire, etc. Elle permet aussi de faire comprendre certains états à vos utilisateurs : la réussite, l’erreur, l’avertissement, la sélection, etc.

• Les contrastes

Il est important de faire attention aux contrastes de vos couleurs. Si sur le même élément vous avez une couleur flashy et une autre flashy, la lisibilité du message risque d’en prendre un coup. Au contraire, un élément fade avec une autre couleur fade a peu de chances de se démarquer. Pensez à cela par pitié, je vois encore trop d’éléments graphiques illisibles à cause d’un manque de contrastes. Surtout qu’aujourd’hui, il y a plein d’outils qui vous permettent de tester les contrastes de vos combinaisons de couleurs.

#2 Les typographies

C’est le même combat pour les typographies. Alors oui, des fois certaines combinaisons ont l’air jolies, mais elles sont totalement illisibles. Le fait que vos utilisateurs arrivent à lire vos éléments prime sur l’esthétique.

• La combinaison de polices

Cette règle vaut aussi pour du branding, mais il faut veiller à ce que les polices fonctionnent bien ensemble. Généralement, on utilise plutôt deux polices, voire trois mais c’est vraiment la limite.
On va utiliser une police pour les titres, une autre pour le corps du texte par exemple. Et l’une des deux polices pour les CTA, mais on utilise toujours la même pour les CTA.

• L’alignement et la longueur des lignes

Ça peut paraître bête pour certains, mais l’alignement et la longueur des lignes c’est hyper important, surtout si vous avez beaucoup de contenu à lire. Une ligne trop longue augmente la difficulté à suivre cette ligne pour un utilisateur. Il risque de « perdre la ligne » et ça va rapidement lasser vos utilisateurs.

• L’espacement et les contrastes

Vérifiez que vos couleurs soient bien lisibles, généralement on évite le trop de saturation sur du texte. Aussi, on voit souvent le gris clair utilisé pour une information secondaire, voire peu importante. N’oubliez pas que ça reste malgré tout une information, elle doit être lisible. Si vous faites le choix de mettre très peu de contraste à tel point qu’on a du mal à voir l’info, il vaudrait peut-être mieux carrément l’enlever.
Pour les espacements, c’est aussi important. Souvent, on se contente d’un interlignage par défaut, mais ça peut rendre votre texte illisible et avoir à nouveau le phénomène de « perdre la ligne » parce que votre texte sera trop dense et compressé.

#3 Les labels et les guides

Ici on parle « d’UX Writing » ou des labels. Ce sont les termes utilisés sur des CTA ou les phrases qui guident vos utilisateurs pour leur expliquer quelle action va se produire en interagissant avec cet élément.

• Être clair et concis

Si vous devez guidez un utilisateur au moment d’un action, soyez clair et très concis. Il suffit de décrire ce qu’il va se passer avec le moins de mots possible.

• Les labels des CTA

Si vous n’avez pas de contexte, évitez les CTA du style « Ok », « Continuer », « Oui » ou « Non ». Dans certains cas, un mauvais terme peut entraîner une confusion. Notamment durant les actions qui peuvent entraîner une destruction un quelque chose de négatif.
Bien entendu, il faut faire court, car on est sur un bouton d’action. Soit vous rajoutez du contexte dans le bouton, soit vous contextualisez l’ensemble de l’action.

• La cohérence dans les labels

Pensez aussi à rester cohérent, notamment quand un utilisateur enchaîne plusieurs actions. N’utilisez pas « Suivant » puis « Continuer » ou « Ok » d’un écran à l’autre. Gardez en permanence le même wording, mais, pensez à le changer quand une nouveauté apparaît. Par exemple, « Terminer » ou « Confirmer » pour faire comprendre à l’utilisateur qu’il est sur quelque chose de différent et que sa tâche prend bientôt fin.

Bases de l’UI Design : ce qu’il faut retenir

Je vous ai parlé des grands principes de l’UI Design, même s’il y a encore beaucoup de choses à dire sur le sujet. Et je vous ai énuméré quelques éléments que vous ne devez jamais oublier quand vous faites de l’UI. Bien entendu, je n’ai pas tout détaillé. Mais vous pouvez consulter la « Checklist Design » qui est très complète.

Les grandes idées :

• Commencez votre travail en respectant la charte graphique
• Pensez toujours à la hiérarchisation de l’information et à sa présentation
• Mettez-vous à la place de l’utilisateur et pensez à l’interaction entre votre interface et lui !