Tout ce qu’il faut savoir sur l’UI design
UI design, UX design, qu’est-ce que tout cela signifie ? Tout le monde en parle et c’est de plus en plus dans l’air du temps.
Eh bien oui, ces deux domaines étroitement liés permettent de pousser l’expérience utilisateur pour qu’elle soit la plus agréable et intuitive possible. Le tout pour faire en sorte que l’utilisateur se sente bien et en confiance sur le site qu’il parcourt.
Anne-Laure Compain
1. À quoi sert l’UI design ?
Et si je commençais par vous expliquer ce qu’est l’UI design ?
UI design signifie User Interface, et en français interface utilisateur. L’UI design est tout le travail réalisé sur les interfaces que l’utilisateur va parcourir. Cela concerne tout l’aspect graphique et visuel d’une application ou d’un site internet.
En UI design, on s’intéresse tout particulièrement aux :
- Boutons
- Mise en forme des textes
- Choix des typographies
- Choix des couleurs
- Mise en forme des blocs
- Emplacements des images
1.1 Comment réussir une interface avec l’UI design ?
Haha, sacrée question ! Il n’est pas toujours évident de savoir reconnaître une interface qui fonctionne ou non. Mais d’abord, qu’est-ce que ça signifie « qui fonctionne » ? Eh bien, tout simplement que l’utilisateur est content de parcourir l’interface et qu’il le fait intuitivement, sans se poser de questions. Voici quelques pistes pour vous aider à reconnaître une interface qui fonctionne :
- L’interface doit être simple, claire et sans éléments superflus.
- Le design doit être cohérent sur tous les écrans et avec la marque, pour que l’utilisateur ne soit pas perdu en passant d’une page à une autre.
- L’interface doit être responsive. Cela signifie qu’elle doit s’adapter correctement à tous les écrans. Certains UI designers travaillent même le mobile avant de travailler l’ordinateur, on appelle ça le « Mobile First ». Cela permet de placer tous les éléments sur le plus petit écran possible. Ensuite il est plus simple de placer ces mêmes éléments sur un grand écran. Au moins, on est sûr que tout va rentrer 😉
- L’interface doit tenir compte des habitudes de l’utilisateur. Certaines actions de l’utilisateur sont intuitives et ne demandent pas de réflexion de sa part. Il faut donc en tenir compte et les garder ! Je parle là d’avoir le logo en haut à gauche et cliquable pour revenir à la page d’accueil. Mais aussi d’avoir un bouton de connexion ou le panier en haut à droite.
1.2 Google se met à l’UI design
Depuis 2020, il existe les Core Web Vitals sur Google. Ces Signaux Web Essentiels (Core Web Vitals en français) permettent aux personnes non techniques et techniques d’avoir des informations sur la vitesse de chargement d’un site et de l’expérience utilisateur. Ce qui nous intéresse en UI design, c’est tout ce qui va toucher à l’accessibilité d’une page. Cela concerne :
- Le contraste entre les couleurs
- La lisibilité des textes
- L’apparence des liens
- La hiérarchisation des textes et des titres
2. UX/UI design, la combinaison imparable
L’UX et l’UI design sont deux axes très différents, mais extrêmement complémentaires. Tandis que l’UX design va être axé sur l’ensemble de la réflexion autour d’une interface, l’UI va s’approprier la charte graphique et les recherches UX pour créer l’apparence d’une interface.
Comme une image vaut mille mots, voici un schéma représentant l’UX et l’UI design.
3. Le guide de style, qu’est-ce que c’est ?
Le guide de style est un document qui va recenser tous les éléments récurrents qui vont être utilisés sur une application ou un site Internet. C’est-à-dire tous les éléments qui vont être utilisés plusieurs fois, comme le menu, le footer, les couleurs, les icônes ou encore les boutons.
Mais avant de créer un guide de style, il faut trouver le style des interfaces.
3.1 Comment choisir un style graphique pour des interfaces ?
Un style graphique c’est la direction artistique que va prendre l’UI designer pour réaliser ses interfaces. Ce style va définir l’apparence des traits, des boutons, des ombres, des arrondis et bien d’autres choses !
Pour choisir le style graphique, il faut étudier en amont la charte graphique du client pour reprendre le style déjà instauré. Et s’il n’en a pas, il faut en trouver un !
Voici quelques styles graphiques souvent utilisés :
FLAT DESIGN
Isométrie
Néomorphisme
LINE DESIGN
Les styles graphiques en images
3.2 Comment réaliser un guide de style ?
Le guide de style est ni plus ni moins qu’une charte graphique web. Il se présente sous forme de document ou de site internet. Avoir un guide de style permet de garder une parfaite cohérence dans tout le projet. En effet, que ce soit le client, les designers UX ou UI ou encore les développeurs, tout le monde a la même base pour travailler.
Voici les éléments que doit contenir un guide de style :
La typographie
Dans le guide de style, il faut préciser la ou les familles de typographie utilisées. Mais aussi la taille des caractères et l’espacement entre les lignes (interlignage) et entre les caractères (interlettrage). Il faut aussi indiquer, pour chaque élément de titre, sa taille.
Les palettes de couleurs
Il faut préciser les différentes palettes de couleurs du projet. La palette principale, la palette secondaire, mais aussi les couleurs des fonds clair et sombre, s’il y a un mode sombre. Pour chaque couleur, il est intéressant d’indiquer le code hexadécimal mais aussi les valeurs RVB. C’est ainsi que sont représentées les couleurs sur le web.
Les icônes
Il est intéressant d’afficher le style d’icônes utilisé, avec quelques exemples. Si une librairie d’icônes est utilisée, il faut aussi l’indiquer et mettre un lien.
Les boutons
Dans le guide de style, on affiche le style des boutons : forme, couleur, arrondi, ainsi que leur animation au survol ou au clic.
Les formulaires
Dans la partie « Formulaires », il faut présenter les différents champs, afficher les textes d’aide s’ils existent et montrer comment sont représentés les messages d’erreur.
Voici un exemple de guide de style :
Inscrivez-vous à notre newsletter Flocon de neige et recevez tous nos nouveaux articles de blog directement dans votre boîte mail.
4. Comment améliorer l’UI d’un site web ?
4.2 La liste des améliorations UI à faire sur un site web
Bien connaître l’utilisateur cible
L’UI design doit permettre de susciter de l’émotion chez l’utilisateur. Or, si on ne connaît pas l’utilisateur, on ne peut pas savoir ce qui va lui apporter une émotion.
Créer une hiérarchie visuelle
Faire simple, mais faire bien. Il faut que l’œil puisse voir tous les éléments. Et pour ce faire, les éléments doivent être rangés et l’information doit être mise en page de façon stratégique. La taille des titres joue un rôle important dans la lisibilité de l’information et dans la hiérarchie.
Gérer les appels à l’action
Les boutons d’appel à l’action doivent être intégrés dans l’interface de façon naturelle. Ils doivent être visibles et repérables, mais ils ne doivent pas s’imposer dans la mise en page.
Choisir des couleurs adaptées
S’il existe une charte graphique, les couleurs des interfaces doivent être en adéquation avec celles de cette charte. On peut alors utiliser des couleurs complémentaires, analogues ou monochromatiques. Le cercle chromatique devient alors notre meilleur allié.
Cependant, s’il n’y a pas de charte graphique, l’UI designer doit trouver les bonnes palettes de couleurs. Il faut savoir que chaque couleur a une signification bien précise. Si l’on prend l’exemple du violet, il évoque le mystère, la magie et tout ce qui n’est pas naturel mais artificiel ou chimique. Cette couleur est parfaite pour le monde de l’enfance ou pour évoquer la science-fiction.
Utilise les animations avec parcimonie
En quantité limitée, les animations aident l’utilisateur dans son parcours sur l’application ou le site Internet : elles l’amènent à passer à l’action. Elles permettent aussi de faire une pause dans la lecture d’une page, surtout si c’est une longue page.
Dans le cas contraire, s’il y a trop d’animations, l’œil de l’utilisateur sera attiré par tout ce qui bouge et sera vite fatigué. L’utilisateur sera perdu et aura envie de quitter le site Internet ou l’application.
Choisir les bonnes typographies
Le choix de la typographie doit se faire en fonction de l’utilisateur final, mais aussi de la charte graphique. Il est intéressant de privilégier une typographie sans‑serif pour le texte : elle sera plus facile à lire sur les petits écrans. De plus, si l’on souhaite apporter du chic ou de l’authenticité aux interfaces, on peut utiliser une typographie serif pour les titres.
La taille de la typographie est un choix très important : il faut penser à la lecture sur mobile, qui fatigue davantage l’œil que la lecture sur ordinateur.
Conseil : partez sur une typographie avec une taille entre 12px et 14px pour l’ordinateur et entre 14px et 16px pour le mobile. Ensuite, pour la couleur de la typographie, il faut rester sur du classique et toujours garder un contraste élevé entre la couleur du texte et celle du fond.
Utiliser les pages 404 à bon escient
Si l’utilisateur tombe sur une page 404, celle-ci doit le rediriger ailleurs : il ne doit pas rester bloqué sur cette page. On peut donc proposer à l’utilisateur de revenir à la page d’accueil, de parcourir le blog ou encore d’accéder aux services. Il faut aussi que cette page soit ludique, afin que l’utilisateur ne soit pas frustré face à une page d’erreur.
Simplifier un formulaire
Les formulaires doivent être simples et comporter des indications. Voici quelques astuces :
- Ajouter un label. Il s'agit d'un texte qui permet d'intituler un champ de formulaire.
- Ajouter un « placeholder ». Il aidera l'utilisateur à savoir comment remplir le champ.
- En cas d'erreur dans le formulaire, la représentation de l'erreur doit être visible et descriptive. On peut alors afficher un message d'erreur et mettre en évidence le champ erroné en rouge.
- Pour que l'utilisateur indique une date, privilégiez un calendrier. Cela évite qu'il saisisse une date au format texte et oublie les «/» pour séparer le jour, le mois et l'année, ce qui générerait une erreur.
- Quand l'utilisateur doit renseigner une donnée numérique, évitez le curseur ! Il n'y a rien de plus frustrant que d'essayer de positionner le curseur sur le bon chiffre. À la place, utilisez un champ texte tout simple.
Utiliser la pagination
Trop souvent oubliée, la pagination permet d’organiser une page qui contient beaucoup d’éléments, comme la page d’accueil d’un blog, par exemple. Si, sur l’accueil du blog, vous devez afficher plus de 10 articles, utilisez la pagination. Elle permet, par exemple, d’afficher 10 articles sur la page 1, 10 sur la page 2 et ainsi de suite.
Grâce à la pagination, l’utilisateur ne sera pas submergé d’informations. Pensez au mobile ; la pagination permet d’éviter un défilement infini pour atteindre le dernier élément !
Montrer un chargement
Lorsqu’on a un élément qui met du temps à charger, il est préférable d’ajouter une animation de chargement, aussi appelée « spinner ». Cette animation permet à l’utilisateur de savoir que le contenu est en cours de chargement et qu’il va bientôt s’afficher. Cela évite qu’il pense que le site a planté et que rien ne s’affichera. Grâce à l’animation de chargement, l’utilisateur est plus enclin à patienter jusqu’à l’affichage du contenu.
De même, si des fichiers doivent être téléchargés sur un site, ajouter une barre de progression aide l’utilisateur à savoir où en est le téléchargement.
Penser au responsive
Il peut paraître un peu vieux jeu de parler de responsive, mais aujourd’hui il existe encore des sites qui ne sont pas adaptés à une navigation sur tablette ou sur mobile.
5. Sur quels logiciels faire de l’UI design ?
5.1 Des logiciels pour créer des interfaces
Ce logiciel a été pensé et conçu pour le web et pour la création d’interfaces web. Son point fort, c’est que, lorsqu’on crée un élément, comme un champ de formulaire, on peut ensuite l’enregistrer dans sa bibliothèque et le convertir en symbole. L’atout, c’est que, une fois converti en symbole, si l’on effectue une modification sur ce champ symbole, comme par exemple changer la taille du texte ou la couleur du champ, les modifications seront répercutées sur l’ensemble des champs utilisés dans toutes les interfaces.
Parmi les logiciels très puissants de la suite Adobe, on trouve XD. Ce logiciel est le principal concurrent de Sketch et a d’ailleurs été créé pour cela ! Tout comme Sketch, XD permet de créer des interfaces web ou mobiles facilement. La création de composants, comme chez Sketch, permet de mettre à jour facilement un élément et ce, sur toutes les interfaces. On peut aussi ajouter des liens entre les éléments, puis les tester et filmer ces tests. Enfin, le partage des documents se fait très facilement, ainsi que l’ajout de commentaires.
5.2 Des logiciels pour trouver de l’inspiration
La veille est une chose très importante pour un UI designer, mais aussi pour toute personne travaillant dans le design ou dans le développement. C’est important d’être à l’écoute des nouvelles tendances, de les tester, mais aussi de s’en faire un avis. Ceux qui ont une ⭐️ sont mes favoris !
Ce site regroupe des milliers de designs et de conceptions web. L’objectif est d’évaluer les créations afin d’encourager les meilleures.
Appartenant à Adobe, Behance permet à des millions de designers de montrer leur travail à travers le monde, sous forme de portfolios.
Tout comme Behance, Dribble propose aux designers à travers le monde d’afficher leur travail sur le web.
Chaque jour, retrouvez de nouvelles inspirations design et web !
Créé par inVision, Muzli recense un peu de tout en termes de design. L’idée de passer par une extension de navigateur est top, car on peut y accéder et voir les nouveautés à tout moment.
6. UI designer : formation, emploi, salaire
6.1 Quelle formation suivre pour devenir UI designer ?
Tout comme pour devenir UX designer, il n’y a pas de formation spécifique pour devenir UI designer. Le mieux, c’est de faire une école de graphisme, d’infographie ou d’informatique et multimédia.
Je vous conseillerai les mêmes écoles que pour la formation d’UX designer. Je vous laisse donc le soin de lire la formation pour devenir UX designer.
6.2 Que signifie être un bon UI designer ?
Être un bon UI designer implique certaines règles :
- Savoir et aimer faire de la veille
- Connaître les différents logiciels pour travailler les interfaces
- Avoir des notions en HTML et en CSS
- Connaître la signification des couleurs
- Maîtriser la typographie pour pouvoir y jouer
- Suivre les avancées en web pour toujours être « à la page »
- Connaître les contraintes de design sur Android et iOS mais aussi celles du web, pour les créateurs d’interfaces mobiles et web
- Savoir s’imprégner des dernières tendances et les utiliser dans des interfaces
6.3 Et dans le monde de l’emploi ?
Avoir fait des études de design aide énormément à être un bon UI designer. Ces cursus nous apprennent la rigueur, à développer notre créativité, à être polyvalents et, surtout, à faire de la veille.
Dans le monde de l’emploi, le principal atout, c’est la créativité ! C’est la seule chose qui fait qu’un UI designer est différent d’un autre. Cette créativité doit être mise en avant dans un portfolio reflétant le caractère de l’UI designer. Tout comme un client, un employeur va tout d’abord regarder votre créativité, votre expertise et votre savoir-faire. Il va s’assurer que vous faites de la veille, que vous connaissez vos logiciels et que vous êtes apte à remplir votre rôle d’UI designer.
Découvrez une interview d’une UI designer !
7. Exemple d’une template UI design
Conclusion
Comme vous avez pu le constater dans cet article, l’UI design a beaucoup d’importance pour l’utilisateur, car c’est ce qu’il voit. En revanche, pour l’UX design, l’utilisateur ne se rend pas forcément compte du travail, puisque c’est intuitif.
Je souhaite travaillerl’UI de mon site
En savoir plus
Si le web design vous fascine, ces articles devraient également vous intéresser.
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.
4.1 Comment savoir que l’UI d’un site web ne va pas ?
Il existe de nombreux signes montrant que le design de l’UI n’est pas optimisé. Je ne vais pas tout vous énumérer, car, à mon sens, il n’y en a que deux principaux :
Si les visiteurs d’un site internet arrivent sur le site, mais qu’ils ne cliquent sur aucun lien ou qu’ils repartent aussitôt, cela indique que l’UI du site n’est pas intuitive ou claire, ou que l’utilisateur a rencontré des problèmes de navigation. On parle donc de taux de rebond. Si le taux de rebond est bas, cela signifie que les utilisateurs ont eu une mauvaise expérience et quittent donc le site.
Ensuite, si, sur un site internet, les utilisateurs parcourent les pages mais qu’ils ne passent pas à l’action, c’est-à-dire qu’ils ne font pas de demande de contact, qu’ils ne s’abonnent pas ni ne s’inscrivent, cela signifie que l’UI est à retravailler. On parle ici de taux de conversion. Plus les utilisateurs se perdent sur le site et ne comprennent pas l’offre présentée, plus le taux de conversion chute.