L’UX, ou expérience utilisateur, désigne ce qu’une personne perçoit, ressent et accomplit avant, pendant et après l’usage d’un site. L’UI, ou interface utilisateur, rassemble ce qu’elle voit et manipule : écrans, composants, typographie, couleurs. Dans un projet UI UX, la première trace le parcours, la seconde lui donne forme, et les deux se vérifient ensemble.
Différence UI UX : deux définitions de référence
La norme ISO 9241-210, consacrée à la conception centrée sur l’humain des systèmes interactifs et révisée en 2019, définit l’expérience utilisateur comme les perceptions et les réactions d’un utilisateur qui résultent de l’usage, effectif ou anticipé, d’un système, d’un produit ou d’un service. Une note y inclut émotions, croyances, préférences, confort, comportements et accomplissements.
Une seconde note cite les sources de cette expérience : image de marque, présentation, fonctionnalités, performance, comportement interactif, mais aussi le vécu de la personne et le contexte d’usage. L’expérience ne se dessine donc pas : elle se constate chez l’utilisateur, et le design en réunit les conditions.
L’interface, ce qui se voit et se manipule
Pour l’interface utilisateur, la même norme reprend la définition de l’ISO 9241-110 : l’ensemble des composants d’un système interactif, logiciels ou matériels, qui fournissent à l’utilisateur des informations et des commandes pour accomplir des tâches précises. Sur un site : menus, boutons, champs, messages, icônes, typographie et grille.
La différence UI UX tient donc à l’objet observé. L’interface se juge à l’écran, composant par composant. L’expérience se juge chez la personne, sur tout le trajet, y compris hors de l’écran : le courriel de confirmation, le délai de réponse.
L’utilisabilité, le maillon entre les deux
Entre ces deux notions se glisse l’utilisabilité. L’ISO 9241-11, dans son édition de 2018, la mesure par trois critères : efficacité, efficience et satisfaction, pour des utilisateurs, des objectifs et un contexte d’usage donnés. Une interface soignée peut échouer sur les trois.
Le terme s’est diffusé depuis l’industrie. Arrivé chez Apple en 1993, le chercheur en sciences cognitives Donald Norman y a pris, selon son propre récit, le titre de User Experience Architect, et son équipe a obtenu que l’expérience utilisateur pèse autant que l’ingénierie et le marketing dans la validation des produits.
Les livrables de l’UX design, avant le premier écran
Le travail d’UX design commence loin des maquettes. Il cherche à comprendre qui utilise le site, dans quel but et dans quelles conditions, puis traduit ces constats en structure. Ses livrables restent volontairement bruts, pour se discuter et se corriger vite.
- La recherche utilisateur : entretiens, observation en situation, statistiques de visite, questions reçues par téléphone ou par courriel.
- Les personas : quelques profils synthétiques, tirés de cette recherche, qui décrivent des besoins plutôt que des tranches d’âge.
- Le parcours utilisateur : étapes, hésitations et points de friction, du premier contact au service rendu.
- L’arborescence : l’organisation des contenus en rubriques aux intitulés compréhensibles.
- Les wireframes : des schémas de pages en niveaux de gris, qui placent les blocs sans trancher le style.
- Les prototypes basse fidélité, sur papier ou cliquables, pour éprouver un enchaînement avant de le dessiner.
La norme ISO 9241-210 range d’ailleurs les personas et les prototypes basse fidélité parmi les exemples de résultats d’une démarche centrée sur l’humain, aux côtés des rapports de test d’utilisabilité.
Le tri de cartes résume l’esprit du métier : des participants regroupent à leur guise des cartes portant chacune un contenu prévu, puis nomment les paquets. Leurs familles et leurs mots valent souvent davantage que l’organigramme interne pour bâtir le menu.
L’UI design, du composant au système
Une fois la structure validée, l’UI design prend le relais. Il transforme les wireframes en écrans définitifs : grille, échelle typographique, palette, iconographie, espacements. Un bouton ne se dessine jamais une seule fois : il existe au repos, au survol, au focus clavier, pressé, désactivé, en cours de chargement.
Les livrables changent de nature :
- les maquettes haute fidélité, pour ordinateur et mobile, nourries de vrais contenus ;
- la bibliothèque de composants, avec leurs états et leurs variantes ;
- les prototypes haute fidélité, qui simulent transitions et micro-interactions ;
- les spécifications d’intégration : tailles, marges, couleurs, comportement à chaque largeur d’écran.
À l’échelle d’une organisation, ces éléments forment un système de design : fondamentaux, composants codés, documentation d’usage. Le Système de design de l’État en offre un exemple public : d’après son dépôt officiel, géré par le Service d’information du Gouvernement, il réunit des composants HTML, CSS et JavaScript pour des interfaces publiques de qualité et accessibles, et son usage reste réservé aux sites de l’État. Les rôles d’une palette et les seuils de contraste sont détaillés dans notre article sur le choix des couleurs d’un site.
| Repère | UX design | UI design |
|---|---|---|
| Question posée | Le visiteur atteint-il son but, et comment le vit-il ? | Ce qu’il voit est-il lisible, cohérent, manipulable ? |
| Matière | Besoins, tâches, contexte d’usage | Composants, typographie, couleurs, espacements |
| Livrables | Personas, parcours, arborescence, wireframes | Maquettes, composants, prototypes haute fidélité |
| Défaut typique | Étape superflue, rubrique introuvable | Bouton peu visible, états oubliés, styles disparates |
Là où l’expérience et l’interface se chevauchent
La frontière entre les deux disciplines n’a rien d’étanche, et c’est dans cette zone que naissent les défauts les plus coûteux à corriger.
Les libellés en sont l’exemple type. Les mots d’un bouton relèvent du parcours, puisqu’ils annoncent ce qui va se passer, et de l’interface, puisqu’ils fixent une longueur et une place : « Recevoir mon devis » en dit plus qu’« Envoyer ». L’ordre de lecture décidé dans les wireframes se réalise ensuite par la taille, le contraste et l’espace, leviers décrits dans les principes de hiérarchie visuelle.
Deuxième terrain commun, les états d’erreur, d’attente et de vide : l’expérience décide de ce qui arrive quand une recherche ne donne rien, l’interface de la façon de le montrer.
L’ISO 9241-210 en tire deux principes : la conception traite l’expérience utilisateur dans son ensemble, et l’équipe réunit des compétences pluridisciplinaires. Un projet UI UX design découpé en deux temps étanches contredit les deux.
Deux cas concrets : une page d’accueil et un formulaire
Sur une page d’accueil
La structure complète d’une page d’accueil fait l’objet de notre guide dédié ; seule compte ici la répartition des décisions. Situation type : une école de musique dont le site reçoit surtout des parents. Le travail d’expérience part des demandes reçues au secrétariat, constate que les horaires et l’inscription reviennent sans cesse, et place ces deux accès dans le premier écran.
Le travail d’interface traduit cette priorité : deux accès nettement plus visibles que le reste, un planning lisible sur téléphone, où la grille hebdomadaire devient une liste par jour. Si les parents ne trouvent pas les horaires, le défaut vient du parcours ; s’ils les trouvent sans parvenir à les lire, il vient de l’interface.
Sur un formulaire de demande de devis
Côté expérience, les questions portent sur le fond : quels champs sont nécessaires, dans quel ordre, en une ou plusieurs étapes, et que se passe-t-il après l’envoi. Un message de confirmation qui annonce le délai de réponse fait partie du formulaire. Les WCAG 2.2, recommandations d’accessibilité du W3C, posent même une règle de parcours au niveau A : une information déjà fournie au cours d’une même démarche est remplie automatiquement ou proposée au choix, sauf exceptions.
Côté interface, les mêmes recommandations fixent des repères précis :
- chaque champ porte une étiquette ou une consigne quand une saisie est attendue (critère 3.3.2, niveau A) ;
- une erreur détectée est signalée et décrite en texte, pas uniquement par une bordure rouge (critère 3.3.1, niveau A) ;
- les cibles à activer mesurent au moins 24 pixels CSS de côté, sauf exceptions (critère 2.5.8, niveau AA).
Vérifier : tests utilisateurs et accessibilité
Une interface ne se valide pas en réunion. Deux familles de vérifications s’appliquent aux deux versants.
Le test utilisateur, une observation plutôt qu’un sondage
Le principe : confier une tâche réelle à une personne extérieure au projet, par exemple trouver le tarif d’un cours de piano, puis l’observer sans l’aider. Elle pense à voix haute ; l’animateur note les hésitations, les retours en arrière, les clics perdus. Ce que les participants font compte davantage que ce qu’ils disent préférer.
Le test se pratique tôt, sur un prototype papier, puis à chaque étape. Quelques séances suffisent souvent à révéler les blocages récurrents. La norme ISO 9241-210 en fait un principe : la conception est guidée et affinée par une évaluation centrée sur les utilisateurs, associés tout au long du projet.
L’accessibilité, un critère partagé
La même norme définit l’accessibilité comme la mesure dans laquelle un produit ou un service peut être utilisé par des personnes aux besoins, caractéristiques et capacités les plus variés. Les WCAG l’organisent autour de quatre principes : perceptible, utilisable, compréhensible et robuste. En France, la direction interministérielle du numérique publie le RGAA, dont la version 4.1.2 compte 106 critères de contrôle.
Les vérifications courantes mêlent les deux versants : parcourir un formulaire au clavier seul, agrandir le texte, écouter la page avec un lecteur d’écran, mesurer les contrastes. Un défaut révélé ainsi se corrige rarement dans un seul camp.
UX designer, UI designer, webdesigner, product designer
Les offres d’emploi mélangent volontiers ces intitulés, jusqu’au titre combiné « UI/UX designer ». Ils décrivent des périmètres, pas une hiérarchie, et une même personne en tient souvent plusieurs.
- Le titre d’UX designer recouvre la recherche, l’architecture de l’information, les parcours, les wireframes et l’animation des tests.
- Celui d’UI designer porte sur les maquettes, les composants, le système de design et le dialogue avec les développeurs.
- Le webdesigner, sur un projet de site, tient souvent les deux versants, plus l’identité visuelle et parfois l’intégration.
- Le product designer suit un produit numérique qui évolue en continu, application ou logiciel en ligne, et participe aux arbitrages à partir des données d’usage.
Les compétences qui fondent ces métiers, du sens graphique à l’ergonomie, sont décrites dans notre article sur le métier de webdesigner. Le socle commun : justifier un choix par un besoin observé.
Faire avancer expérience et interface dans le même projet
Une organisation qui fonctionne suit généralement cette boucle :
- comprendre : recherche, personas, contexte d’usage ;
- structurer : parcours, arborescence, wireframes ;
- éprouver la structure sur un prototype basse fidélité ;
- dessiner l’interface et ses composants ;
- tester le prototype haute fidélité, puis le site intégré ;
- mesurer l’usage réel et revenir à l’étape utile.
La boucle n’a rien de linéaire : l’ISO 9241-210 pose l’itération comme principe, et un test raté à la cinquième étape peut renvoyer au parcours. Documenter chaque décision d’expérience avec le constat qui la justifie évite que la phase d’interface la rouvre par goût. Associer l’interface dès les wireframes fait remonter tôt les contraintes, d’autant que les systèmes de composants se sont généralisés jusque dans les petits projets.
Prochaine étape : choisir la tâche qui compte le plus sur le site, une demande de devis ou une inscription, et la faire accomplir par trois personnes extérieures. Chaque hésitation se classe ensuite en parcours ou en interface, et la colonne la plus remplie indique par où reprendre le design UI UX.