Réponse en bref
Le design UX décide de la façon dont un produit fonctionne pour la personne qui l’utilise : ses besoins, les étapes qu’elle franchit, les endroits où elle bloque. Le design UI donne à ces étapes une forme visible : écrans, boutons, textes, couleurs et états. Une entreprise y gagne une structure testée, un prototype et un ensemble d’écrans et de composants sur lesquels les développeurs peuvent construire, et moins de visiteurs qui partent sans comprendre.
L’UX, c’est le fonctionnement du formulaire de commande ; l’UI, son apparence
Prenez le formulaire de commande d’une petite boutique en ligne. Quelqu’un doit décider quels champs il demande, ce qui se passe quand le numéro de téléphone est mal saisi, et ce que l’acheteur voit après avoir cliqué sur le bouton. Quelqu’un doit aussi décider de l’aspect des champs, du bouton et du message d’erreur, pour que l’on sache où cliquer. Le premier ensemble de décisions relève de l’UX, l’expérience utilisateur. Le second, de l’UI, l’interface utilisateur. Le design UX/UI est le nom du travail qui couvre les deux.
La définition du Nielsen Norman Group, signée Don Norman et Jakob Nielsen, est large : l’expérience utilisateur englobe tous les aspects de l’interaction de l’utilisateur final avec l’entreprise, ses services et ses produits. La norme ISO 9241-210, telle que la cite Wikipédia en anglais, est plus sèche : les perceptions et les réactions d’une personne qui résultent de l’usage, ou de l’usage anticipé, d’un système, d’un produit ou d’un service. Les deux parlent d’une personne, pas d’un écran. Norman et Nielsen ajoutent un exemple : un site de critiques de films à l’interface parfaite offre une mauvaise expérience si sa base ne contient pas la petite sortie indépendante que quelqu’un cherchait.
Ce que livre un designer UX : recherche, parcours, wireframes et prototype
Ce que produit un designer UX, ce sont rarement des images. L’Interaction Design Foundation énumère ses tâches habituelles : la recherche utilisateur, la création de personas, la conception de wireframes et de prototypes interactifs, les tests. Après la recherche vient le trajet, que le Nielsen Norman Group appelle user flow, ou parcours utilisateur : les étapes nécessaires pour accomplir une tâche courante avec un produit. Pour la boutique, c’est le chemin de la fiche produit à la commande payée, avec ses embranchements : l’article est en rupture, la carte est refusée.
La structure de chaque écran est fixée dans des wireframes. L’Interaction Design Foundation les présente comme des représentations visuelles élémentaires d’une interface, qui en tracent la structure et la disposition sans couleurs, polices ni images ; la maquette ajoute l’aspect visuel mais reste statique, et le prototype simule l’interaction. C’est le prototype qu’il faut demander à voir et parcourir vous-même. Le Nielsen Norman Group en donne la raison en une ligne : jeter du code coûte très cher, jeter un prototype, non.
Ce que livre un designer UI : langage visuel, composants et leurs états
Le designer UI prend la structure déjà testée et lui donne un visage. L’Interaction Design Foundation décrit le design d’interface comme la construction d’interfaces centrée sur l’apparence et le style : couleurs, typographie, boutons, icônes. Le travail commence par un langage visuel, un petit ensemble de décisions qui se répète sur chaque écran : les polices, le sens de chaque couleur, l’allure du bouton principal. Le visiteur ne saurait pas nommer ces décisions, mais il remarque aussitôt que deux pages d’un même site semblent venir de deux entreprises différentes.
Sur les grands projets, ces décisions sont réunies dans un design system. Le Nielsen Norman Group le définit comme un ensemble complet de standards destiné à gérer le design à grande échelle au moyen de composants et de modèles réutilisables. Chaque composant est décrit avec ses états, de sorte qu’un champ existe vide, actif, rempli, en erreur et désactivé, et non comme une seule jolie image. Le même article est franc sur le coût : entretenir un design system prend beaucoup de temps et demande une équipe dédiée. Un site de cinq pages a besoin d’un kit de composants bien rangé, pas d’un système.
Les étapes du travail de design, du brief à la remise aux développeurs
Il n’existe pas de processus officiel unique, et l’Interaction Design Foundation l’écrit sans détour. La plupart des équipes suivent une variante des cinq étapes du design thinking : comprendre les personnes par la recherche, définir le problème, imaginer des solutions, prototyper, tester avec de vrais utilisateurs. Pour le client, c’est une chaîne de livrables : la recherche, puis les parcours et les wireframes, ensuite le prototype cliquable, enfin le design visuel. Sur les tests, l’article que Jakob Nielsen consacre à leur taille soutient que les meilleurs résultats viennent de tests menés avec cinq utilisateurs au plus, répétés autant de fois que vos moyens le permettent.
La remise est le moment où le design devient une spécification. Selon les recommandations du Nielsen Norman Group sur les spécifications de design, le fichier doit définir les parcours d’interaction, les styles visuels, la grille et les points de rupture, les composants, du contenu réel à la place du faux texte, et les besoins d’accessibilité comme l’ordre de tabulation ou les textes alternatifs. Ces mêmes recommandations demandent d’associer les développeurs bien avant que le design soit terminé. Un design qu’ils découvrent le jour de la remise revient en général sous forme de liste de ce qui ne peut pas être construit.
Distinguer une bonne interface d’une mauvaise : les dix heuristiques de Nielsen
Pour juger une interface, un dirigeant n’a pas besoin d’avoir du goût. Jakob Nielsen a publié dix heuristiques d’utilisabilité en 1994, et le Nielsen Norman Group les publie toujours comme des règles générales de bon sens pratique, non comme des consignes précises. Visibilité de l’état du système : le design doit toujours tenir la personne informée de ce qui se passe, si bien qu’après le clic le formulaire montre que la commande est en cours d’envoi, puis qu’elle est acceptée. Contrôle et liberté de l’utilisateur : les gens agissent souvent par erreur et ont besoin d’une issue de secours clairement signalée, un moyen de revenir d’une étape ou d’annuler sans tout recommencer.
Prévention des erreurs : les meilleurs designs empêchent le problème de se produire, et le formulaire arrête un numéro impossible avant l’envoi. Reconnaître plutôt que se souvenir : la personne ne devrait pas avoir à retenir une information d’une partie de l’interface à l’autre, de sorte que l’adresse de livraison choisie à la première étape reste sous les yeux à la dernière. Les messages d’erreur, d’après la neuvième heuristique, sont rédigés en langage simple, sans codes, indiquent précisément le problème et proposent une solution. Une interface qui échoue à ces questions est cassée, aussi élégante qu’elle paraisse.
L’accessibilité en chiffres : contraste, taille du texte et zones cliquables selon les WCAG
Une partie de la qualité est écrite sous forme de critères mesurables. Le W3C publie les Règles pour l’accessibilité des contenus Web ; la version WCAG 2.2 de son site est une Recommandation du W3C datée du 12 décembre 2024. À son niveau AA, le texte doit présenter un rapport de contraste d’au moins 4,5:1 avec son fond, et le grand texte d’au moins 3:1. Grand signifie 18 points au minimum, ou 14 points en gras, ce que la page explicative du W3C situe à environ 24 et 18,5 pixels CSS. Le texte doit aussi pouvoir être agrandi jusqu’à 200 pour cent sans perte de contenu ni de fonctionnalité.
Plusieurs critères concernent directement les formulaires. La couleur ne peut pas être le seul moyen visuel de transmettre une information : un champ signalé comme erroné par une simple bordure rouge ne passe pas, et l’erreur doit être décrite par du texte. Les cibles que l’on touche du doigt ou de la souris doivent mesurer au moins 24 par 24 pixels CSS, sauf exceptions prévues. La norme est révisée de temps à autre. Savoir si une loi oblige votre site à la respecter dépend du pays et du type d’activité, et cette question se pose à un juriste.
Quand une entreprise a besoin d’un travail UX et UI, et quand le design n’y peut rien
Trois situations l’appellent. La première est un nouveau produit, site ou application : les décisions de structure coûtent le moins cher avant toute construction. La deuxième est une refonte : l’introduction à l’utilisabilité du Nielsen Norman Group conseille de tester d’abord l’ancien design, pour savoir ce qui mérite d’être gardé. La troisième est la plus courante : les visiteurs viennent et ne deviennent pas clients. La même introduction le dit sans ménagement : si un site est difficile à utiliser, les gens partent, et la première loi du commerce en ligne veut que si les utilisateurs ne trouvent pas le produit, ils ne peuvent pas l’acheter non plus.
Le design a aussi une limite, celle de l’exemple des films. Si l’offre est faible, le prix caché, ou s’il manque au catalogue ce que les gens cherchent, une meilleure interface ne fera que le montrer plus vite. La recherche peut révéler ces problèmes, mais les corriger est une décision d’entreprise. Le test honnête consiste à se demander si une erreur de structure coûterait plus que le travail qui l’évite.
Ce qu’il faut préparer avant de commander le design d’une interface
Commencez par les tâches, pas par les références. Notez les trois ou quatre choses qu’un visiteur doit pouvoir faire : trouver un produit, comparer, commander, retourner. Rassemblez ce que vous savez déjà : les statistiques, les questions que les clients posent au support, les étapes où les commandes sont abandonnées. Préparez de vrais textes et de vraies photos, car un design dessiné sur du faux texte casse quand les vrais noms tiennent sur trois lignes. Convenez à l’avance de ce que vous recevrez à la fin : un prototype cliquable, des écrans pour mobile et ordinateur, un kit de composants avec leurs états.
Le faire vous-même ou le commander dépend de l’enjeu. Un site simple monté sur un outil de création avec un modèle éprouvé porte déjà beaucoup de décisions saines, et les dix heuristiques, plus une vérification du contraste, mènent un dirigeant assez loin. Une application, un catalogue à filtres, un espace client ou une commande en plusieurs étapes, c’est autre chose : la structure est la vôtre et personne ne l’a testée pour vous. C’est là que le design UX/UI se commande d’ordinaire, à un indépendant ou à un studio comme VITON13 Studio ; le guide en lien explique de quoi se compose le coût. Dans tous les cas, demandez un prototype cliquable avant que quiconque n’écrive du code.
Checklist pratique
- Notez les trois ou quatre tâches qu’un visiteur doit accomplir, avec ses propres mots.
- Rassemblez les statistiques, les questions posées au support et les étapes où les gens abandonnent une commande.
- Préparez les vrais textes, les données produit et les photos avant la première maquette.
- Demandez un prototype cliquable et testez-le avec cinq personnes qui ressemblent à vos acheteurs.
- Vérifiez le contraste du texte et la taille des boutons d’après les critères AA des WCAG 2.2.
Questions et réponses
Le design UX/UI est-il un métier ou deux ?
Ce sont deux ensembles de compétences qu’une seule personne réunit souvent sur les petits projets. L’UX couvre la recherche, la structure et les tests ; l’UI, la couche visuelle et les composants. Sur un grand produit, les rôles sont en général séparés, et il vaut la peine de demander qui s’occupe de quelle partie.
Un site peut-il être beau et offrir une mauvaise UX ?
Oui. L’exemple du Nielsen Norman Group est un site de critiques de films doté d’une recherche impeccable et d’une base où manque le film que le visiteur veut. L’apparence, c’est l’interface ; l’expérience dépend aussi du fait que la personne obtienne ce pour quoi elle est venue.
Quelle différence entre wireframe, maquette et prototype ?
Selon l’explication de l’Interaction Design Foundation, le wireframe est le plan : structure et disposition, sans couleurs ni images. La maquette montre l’aspect final mais reste statique. Le prototype simule l’interaction, et vous pouvez le parcourir comme s’il s’agissait du produit.
Une petite entreprise a-t-elle besoin de tests d’utilisabilité ?
Un petit test est à la portée de toute entreprise. L’article de Jakob Nielsen évalue à 85 % la part des problèmes d’utilisabilité que trouve une première étude avec cinq participants, et recommande plusieurs petites séries plutôt qu’une grande. Pour regarder cinq personnes tenter une commande, une soirée et un prototype suffisent.
Mon site est-il obligé de respecter les WCAG ?
Les WCAG sont une norme technique publiée par le W3C. Savoir si une loi impose à votre site de la respecter dépend de votre pays et de votre activité ; vérifiez votre cas avec un juriste. Comme repère de design, les critères AA de contraste et d’agrandissement du texte sont un plancher raisonnable pour n’importe quel site.