Différence entre UX et UI design : explication simple avec exemples concrets

Vous lancez un site web ou une application, et tout le monde autour de vous parle d’UX et d’UI. Les deux sigles reviennent sans arrêt, souvent collés l’un à l’autre sous la forme “UX/UI”, au point qu’on finit par croire qu’il s’agit de la même chose. Ce n’est pas le cas. Voir orange.fr pour leur point de vue.

Plutôt que de vous servir une nouvelle définition théorique, nous allons prendre un seul et même projet et regarder, étape par étape, ce que fait l’UX puis ce que fait l’UI. Deux exemples que tout le monde connaît : une page produit e-commerce et un formulaire de contact. À la fin, vous saurez aussi reconnaître si votre site souffre d’un problème d’UX ou d’un problème d’UI, ce qui change complètement le budget et les personnes à mobiliser.

La différence entre UX et UI en une phrase

L’UX (User Experience) définit comment le site fonctionne et ce que l’utilisateur ressent en l’utilisant. L’UI (User Interface) définit à quoi il ressemble et comment il s’affiche à l’écran.

Une image simple pour ne plus jamais confondre : imaginez une voiture.

L’UX, c’est la position du volant, la logique des pédales, la facilité à trouver les warnings en urgence, le confort du siège sur 500 km.
L’UI, c’est la couleur de la carrosserie, la forme du compteur, la typographie du tableau de bord, la texture du cuir.

Une voiture magnifique dont on ne trouve pas la marche arrière a un problème d’UX. Une voiture parfaitement pensée mais au tableau de bord illisible en plein soleil a un problème d’UI. Les deux se ressentent, mais ils ne se corrigent pas de la même façon.

UX design : la logique et le parcours

L’UX designer travaille avant tout sur le parcours et sur la structure. Son travail commence bien avant qu’une seule couleur ne soit choisie. Concrètement, il s’occupe de :

comprendre les utilisateurs (interviews, analyse des données, retours du service client) ;
définir les parcours : par où entre l’utilisateur, que cherche-t-il, quelle est la prochaine action logique ;
hiérarchiser l’information : qu’est-ce qui doit être vu en premier, en deuxième, en dernier ;
produire des wireframes (maquettes fil de fer en gris et noir, sans design) ;
tester avec de vrais utilisateurs et corriger les points de friction.

Le livrable typique d’un UX designer ressemble à un plan d’architecte : des rectangles gris, des flèches, des annotations. C’est moche, et c’est normal. À ce stade, la question n’est pas “est-ce que c’est joli” mais “est-ce que ça marche”.

UI design : la forme et le rendu visuel

L’UI designer prend ce plan et lui donne un visage. Il travaille sur :

la palette de couleurs et les contrastes ;
la typographie, les tailles, les espacements ;
les boutons, icônes, champs de formulaire et leurs différents états (survol, clic, désactivé, erreur) ;
les images, illustrations et micro-animations ;
le design system : la bibliothèque de composants réutilisables qui garantit la cohérence sur tout le site.

L’UI n’est pas de la décoration. Un bouton d’achat au mauvais contraste, une typographie trop petite sur mobile ou un champ de formulaire qui ne ressemble pas à un champ de formulaire font chuter les conversions aussi sûrement qu’un mauvais parcours.

Tableau comparatif : UX vs UI

Critère	UX design	UI design
Signification	User Experience (expérience utilisateur)	User Interface (interface utilisateur)
Question posée	Est-ce que l’utilisateur atteint son objectif facilement ?	Est-ce clair, lisible et cohérent à l’écran ?
Se ressent ou se voit	Se ressent	Se voit
Moment du projet	En amont, avant le design	Après la validation de la structure
Livrables	Personas, arborescence, parcours, wireframes, tests utilisateurs	Maquettes haute fidélité, design system, prototypes cliquables
Outils courants	Figma (wireframes), Maze, Hotjar, Google Analytics, Miro	Figma, Adobe Illustrator, Framer, Webflow
Symptôme quand c’est raté	“Je ne trouve pas ce que je cherche”	“C’est illisible / ça fait pas sérieux”

Exemple 1 : une page produit e-commerce, étape par étape

Prenons une boutique en ligne qui vend des chaussures de randonnée. Voici comment le même écran est traité par l’UX puis par l’UI.

Ce que décide l’UX designer

Il identifie la question bloquante : dans le cas de chaussures de randonnée, l’objection numéro 1 est la taille. Il décide donc que le guide des tailles doit être accessible directement à côté du sélecteur, pas dans le pied de page.
Il définit l’ordre des blocs : photos, prix, disponibilité, sélecteur de taille, bouton d’ajout au panier, délai et frais de livraison, avis clients, puis seulement ensuite la description technique.
Il anticipe les cas particuliers : que se passe-t-il si la taille est en rupture ? Il prévoit une alerte de réapprovisionnement plutôt qu’un bouton grisé sans explication.
Il traite le mobile en priorité : sur un écran de smartphone, le bouton d’ajout au panier reste collé en bas de l’écran quand l’utilisateur fait défiler la fiche.
Il supprime les frictions : pas de création de compte obligatoire avant le panier, frais de port annoncés avant le tunnel de commande.

À ce stade, la page ressemble à un empilement de rectangles gris. Et pourtant, l’essentiel des futures conversions se joue ici.

Ce que décide l’UI designer

Le bouton “Ajouter au panier” reçoit la couleur la plus contrastée de toute la palette, et cette couleur n’est utilisée nulle part ailleurs sur la page.
Le prix est composé dans une taille et une graisse qui le rendent lisible en un dixième de seconde, avec le prix barré en gris clair s’il y a une promotion.
Les tailles indisponibles sont affichées barrées et non simplement en gris pâle, pour éviter toute ambiguïté.
Les avis clients utilisent des étoiles dorées et une hiérarchie typographique claire entre la note, le titre et le commentaire.
La galerie photo respecte un format constant, avec une zone de zoom et des vignettes alignées sur la grille.

Ce qui se passe quand l’un des deux manque

Bonne UI, mauvaise UX : la page est superbe, mais le guide des tailles est introuvable et les frais de port n’apparaissent qu’à la dernière étape. Résultat : un taux d’abandon de panier élevé et beaucoup de retours produits.
Bonne UX, mauvaise UI : tout est au bon endroit, mais le bouton d’achat est gris comme le reste de la page et le prix se noie dans le texte. Résultat : l’utilisateur hésite, l’action principale ne saute pas aux yeux.

Exemple 2 : le formulaire de contact

C’est l’élément le plus banal d’un site, et le plus révélateur de la différence entre UX et UI.

Le travail UX sur un formulaire

Réduire le nombre de champs : chaque champ supplémentaire fait baisser le taux de complétion. Faut-il vraiment le numéro de téléphone, le nom de la société et le budget dès le premier contact ?
Ordonner les champs du plus simple au plus engageant : d’abord le prénom, ensuite l’e-mail, enfin le message.
Décider du moment de la validation : signaler une adresse e-mail invalide dès la sortie du champ, et non après l’envoi.
Prévoir l’après-envoi : une page de confirmation qui indique sous quel délai une réponse arrivera, plutôt qu’un simple “Message envoyé”.
Conserver les données saisies en cas d’erreur, pour ne pas obliger l’utilisateur à tout retaper.

Le travail UI sur le même formulaire

Les champs ressemblent à des champs : bordure visible, fond légèrement contrasté, hauteur suffisante pour le doigt sur mobile (au moins 44 px).
Les libellés sont au-dessus des champs et restent visibles pendant la saisie, au lieu de disparaître comme les placeholders gris.
Les messages d’erreur sont en rouge, accompagnés d’une icône, et positionnés juste sous le champ concerné.
Le champ actif se distingue par une bordure colorée et un léger halo.
Le bouton d’envoi affiche un état de chargement pour éviter les doubles soumissions.

Un formulaire de 12 champs magnifiquement designé convertira moins bien qu’un formulaire de 3 champs au design correct. L’UX pose les fondations, l’UI les rend agréables et compréhensibles.

Où interviennent l’UX et l’UI dans un projet web

Sur un projet de refonte ou de création, l’ordre est presque toujours le même :

Cadrage et recherche (UX) : objectifs business, cibles, analyse de l’existant et de la concurrence.
Arborescence et parcours (UX) : quelles pages, comment elles s’articulent, quel chemin pour chaque type de visiteur.
Wireframes (UX) : la structure de chaque écran clé, en noir et blanc.
Direction artistique (UI) : univers visuel, palette, typographies, style d’images.
Maquettes haute fidélité (UI) : les écrans finaux, desktop et mobile.
Design system (UI) : composants réutilisables pour les développeurs et les évolutions futures.
Intégration et développement.
Tests et itérations (UX) : mesure du comportement réel, corrections.

Erreur classique chez les entrepreneurs : commencer à l’étape 4 en demandant “une belle maquette” à un graphiste. Le site sort joli, puis les problèmes de conversion apparaissent, et il faut tout reprendre depuis l’étape 1 avec un budget déjà consommé. Sur chaque projet, une équipe photo et design soigne exactement ce genre de détail.

Comment savoir si votre site a un problème d’UX ou d’UI

C’est la partie la plus utile de cet article. Les symptômes ne sont pas les mêmes, et les diagnostics non plus.

Les signaux d’un problème d’UX

Les utilisateurs abandonnent en cours de parcours : panier rempli mais commande non finalisée, formulaire commencé mais non envoyé.
Votre service client reçoit toujours les mêmes questions (“où voit-on les tarifs ?”, “comment je modifie ma commande ?”). Chaque question récurrente est une information manquante ou mal placée.
Le taux de rebond est élevé sur des pages pertinentes, c’est-à-dire que les visiteurs arrivent au bon endroit mais repartent.
Les enregistrements de sessions montrent des allers-retours, des scrolls frénétiques, des clics sur des éléments non cliquables.
Le moteur de recherche interne est massivement utilisé : signe que la navigation ne fonctionne pas.
Le parcours mobile nécessite des zooms, des dézooms, ou fait perdre l’utilisateur entre deux étapes.

Les signaux d’un problème d’UI

On vous dit que le site “fait daté” ou “ne fait pas assez sérieux” alors qu’il fonctionne bien.
Contrastes insuffisants : texte gris clair sur fond blanc, illisible en extérieur ou pour une partie de vos visiteurs.
Incohérence visuelle : trois nuances de bleu pour les boutons, quatre tailles de titres différentes, des marges aléatoires d’une page à l’autre.
Les boutons ne se distinguent pas du texte ou des liens.
Les images sont de qualité inégale : formats différents, résolutions faibles, banques d’images génériques mélangées à des photos maison.
Sur mobile, les éléments cliquables sont trop petits ou trop proches les uns des autres.

Et si les deux sont en cause ?

C’est le cas le plus fréquent. Un bon réflexe : traitez toujours l’UX en premier. Corriger une hiérarchie de contenu ou un tunnel de commande sur un design existant apporte généralement des gains rapides. Repeindre une interface dont le parcours est cassé ne fait que rendre le problème plus élégant.

UX/UI designer : un métier ou deux ?

Dans les grandes structures, ce sont deux profils distincts, parfois accompagnés d’un UX researcher et d’un UX writer. Dans les PME, les startups et les agences, une même personne porte souvent les deux casquettes sous l’intitulé UX/UI designer. Ce n’est pas un problème en soi, à condition qu’elle traite les deux phases séparément et ne saute pas directement à la maquette finale.

Côté rémunération en France, un profil UX/UI designer junior se situe généralement entre 30 000 et 38 000 euros bruts par an selon la ville et le type de structure, avec des écarts sensibles entre Paris et les régions. Un profil confirmé dépasse couramment les 45 000 euros. En freelance, les taux journaliers s’échelonnent le plus souvent de 300 à 700 euros selon l’expérience et le secteur.

Ce qu’il faut retenir

L’UX, c’est ce que l’on ressent. L’UI, c’est ce que l’on voit.
L’UX intervient en amont (structure, parcours, wireframes), l’UI en aval (couleurs, typographie, composants).
Sur une page produit, l’UX décide de l’ordre des blocs, l’UI rend le bouton d’achat évident.
Sur un formulaire, l’UX supprime les champs inutiles, l’UI rend les erreurs compréhensibles.
Un problème d’abandon en cours de parcours est un problème d’UX. Un problème de lisibilité ou de crédibilité visuelle est un problème d’UI.
Les deux sont indissociables : une bonne UX sans UI n’inspire pas confiance, une belle UI sans UX ne convertit pas.

FAQ : différence entre UX et UI

Qu’est-ce qu’un designer UX et UI ?

C’est un professionnel qui conçoit des produits numériques en couvrant deux dimensions : l’expérience utilisateur (parcours, structure, ergonomie, tests) et l’interface utilisateur (couleurs, typographie, composants visuels). Dans les petites structures, une seule personne assume les deux rôles ; dans les grandes équipes, ils sont séparés.

C’est quoi l’UI exactement ?

UI signifie User Interface, soit interface utilisateur. C’est la partie visible et manipulable d’un produit numérique : boutons, champs, icônes, menus, couleurs, typographies, animations. L’UI est la couche visuelle qui rend l’expérience conçue en UX concrète à l’écran. ideveloppement.fr a publié quelque chose d’utile là-dessus.

C’est quoi l’UX exactement ?

UX signifie User Experience, soit expérience utilisateur. Elle regroupe tout ce que vit une personne en utilisant un site ou une application : facilité à trouver l’information, fluidité du parcours, clarté des étapes, absence de frustration. L’UX se travaille avec de la recherche, des wireframes et des tests utilisateurs.

Peut-on avoir une bonne UX sans UI design ?

Techniquement oui, mais dans les faits non. Un site parfaitement pensé mais visuellement négligé perd en crédibilité, et le manque de hiérarchie visuelle finit par nuire à la compréhension. L’UI fait partie de l’expérience perçue.

Par quoi commencer sur un nouveau projet web ?

Toujours par l’UX : définir les objectifs, les cibles, les parcours et l’arborescence, puis produire des wireframes. Le design visuel arrive une fois la structure validée. Cet ordre évite les refontes coûteuses six mois après la mise en ligne.

L’UX design concerne-t-il uniquement les sites web ?

Non. L’UX s’applique à tout produit ou service avec lequel un utilisateur interagit : application mobile, logiciel métier, borne interactive, outil interne, et même un parcours d’achat en magasin. Le web n’est qu’un terrain d’application parmi d’autres. openclassrooms.com défend le même point avec plus de données.

Comment mesurer concrètement la qualité de l’UX d’un site ?

En combinant les données quantitatives (taux de conversion, taux d’abandon par étape, temps passé, taux d’erreur sur les formulaires) et les données qualitatives (tests utilisateurs sur 5 à 8 personnes, enregistrements de sessions, retours du service client). Cinq tests utilisateurs suffisent généralement à faire remonter la majorité des problèmes majeurs.

Vous hésitez sur le diagnostic à poser pour votre propre site ? Commencez par lister les trois questions que vos clients vous posent le plus souvent : elles pointent presque toujours vers un problème d’UX précis, et donc vers un chantier prioritaire.