UI vs UX : la vraie différence, vue depuis un projet de site

UI vs UX : la question tombe souvent au pire moment. En plein brief, quand deux devis ne décrivent pas le même travail. Ou six mois après une refonte, quand le site est superbe et que les demandes de contact ne suivent pas.

Le réflexe, c'est de chercher une définition. Vous en trouverez des dizaines. Beaucoup sont écrites pour des étudiants qui hésitent entre deux métiers. Elles expliquent qui fait quoi. Elles disent rarement ce que la différence change pour une marque qui investit dans son site.

C'est l'angle de ce guide. Ce qui sépare vraiment l'interface de l'expérience. Pourquoi l'ordre classique « UX puis UI » trompe tant de projets. Et comment savoir de quel côté votre site décroche, avant de payer quelqu'un pour le réparer. Si vous cherchez le versant purement expérience, notre guide de l'UX design appliqué aux sites premium le traite en profondeur. Ici, on regarde la frontière. Et surtout ce qui se passe dessus.

Quelle est la différence entre UI et UX ?

L'UX, ou expérience utilisateur, désigne tout ce que vit une personne pour atteindre son but avec votre marque. L'UI, ou interface utilisateur, désigne la partie qu'elle voit et manipule à l'écran pour y parvenir.

La nuance paraît académique. Elle ne l'est pas. Nielsen Norman Group, le cabinet fondé par Don Norman et Jakob Nielsen, pose la distinction dès 1998 dans The Definition of User Experience. Leur exemple reste le plus clair. Un site de critiques de films peut offrir une recherche parfaite. Si sa base ne contient que les sorties des grands studios, l'amateur de cinéma indépendant vit quand même une mauvaise expérience.

L'interface était irréprochable. L'expérience, ratée. Les deux ne se confondent donc pas, même quand la même personne les conçoit.

L'UX répond à « est-ce que ça marche pour moi ? »

L'expérience couvre le parcours complet. L'architecture de l'information, l'ordre des contenus, les réponses aux questions qui précèdent une décision. Elle déborde aussi de l'écran : le mail de confirmation, le délai de rappel. Et la cohérence entre ce que promet le site et ce que vit le client ensuite.

Sur un site de marque, la question UX est presque toujours la même. Le visiteur trouve-t-il, en peu de temps, la preuve qu'il est au bon endroit ?

Prenez un cabinet d'architecture. Un promoteur arrive sur le site avec une seule question : ont-ils déjà livré un projet comme le mien ? Si les réalisations ne se filtrent ni par type ni par échelle, la galerie la plus soignée du monde ne répond pas. C'est un échec d'expérience, pas d'esthétique.

L'UI répond à « est-ce que je comprends et est-ce que j'y crois ? »

L'interface, c'est la surface lisible et manipulable. Typographie, couleurs, contrastes, grille, composants. Mais aussi tout ce qu'on oublie dans les présentations : les états de survol, de focus, d'erreur, de chargement. Et le mouvement, qui dit au visiteur ce qui vient de se passer.

L'UI n'est pas de la décoration. C'est elle qui rend une hiérarchie visible. C'est elle qui fait qu'un bouton ressemble à un bouton. Et c'est elle qui installe, en quelques secondes, le niveau de gamme que le visiteur attribue à votre marque.

Ce que ni l'UI ni l'UX ne couvrent

Il existe une troisième couche, souvent avalée par les deux autres : l'identité et la direction artistique web. Elle décide de ce que la marque est, avant de décider comment elle s'affiche.

Le projet Apax illustre bien cette séparation. L'identité et le naming de cette agence d'architecture parisienne ont été repensés par le studio Graphéine. Metabole Studio a ensuite conçu le site qui prolonge cette nouvelle identité. Trois couches, trois responsabilités, un seul résultat perçu par le visiteur.

Pourquoi « l'UX d'abord, l'UI ensuite » trompe tant de projets

Beaucoup de guides présentent les deux disciplines comme une séquence. L'UX pose les fondations, l'UI vient peindre les murs. On cartographie, on dessine des wireframes en gris, puis on « habille ».

Pour une équipe produit qui fait évoluer un logiciel métier, l'ordre se défend. Pour un site de marque, il pose un problème de fond. La perception visuelle fait partie de l'expérience. Le visiteur décide s'il fait confiance avant d'avoir parcouru quoi que ce soit.

Concrètement, figer les wireframes avant que la direction artistique existe produit deux dérives. La première : une structure pensée pour des blocs neutres, qui craque dès qu'arrive une typographie de marque généreuse ou une image plein écran. La seconde : une UI qui se contente de remplir des cases, sans pouvoir corriger une hiérarchie déjà votée.

Ce que change le contexte de 2026

Le constat le plus récent va dans le même sens. Dans son State of UX 2026, publié en janvier, Nielsen Norman Group estime que l'UI devient moins différenciante. Les design systems, les tokens et les composants la rendent moins coûteuse à produire. Les outils d'IA permettent à presque tout le monde d'obtenir une interface correcte, au moins de loin.

La lecture qu'on en fait côté studio est simple. Une interface correcte n'est plus un avantage. Ce qui distingue une marque, c'est l'alignement entre ce que le visiteur perçoit et ce qu'il parvient à faire. Cet alignement ne se fabrique pas en séquence. Il se fabrique en boucle.

L'exemple du système de design de l'État

Un cas français bien documenté va dans ce sens, à une tout autre échelle. Le Service d'Information du Gouvernement développe depuis 2020 le Système de design de l'État, le DSFR. Le projet a démarré en novembre 2019 par un audit des pratiques UI et UX de 32 sites représentatifs. Les deux disciplines ont été examinées ensemble, pas l'une après l'autre.

Le résultat n'est pas une charte graphique d'un côté et un guide ergonomique de l'autre. Ce sont des composants qui embarquent les deux : un style, un comportement, des règles d'accessibilité. D'après la présentation officielle du DSFR (consultée en novembre 2026), l'État compte environ 20 000 noms de domaine. Les gains de temps apportés par l'outil y sont estimés à 40 %. Le gain vient précisément de là : chaque composant règle une question d'interface et une question d'usage en même temps.

Une marque premium n'a pas les contraintes de l'État. Elle a la même logique à appliquer, en version sur mesure. Notre décryptage de plusieurs exemples de design systems montre comment d'autres organisations font coexister cohérence visuelle et règles d'usage.

Ce qu'on fait à la place

En pratique, on travaille en boucles courtes. Le parcours et deux ou trois écrans clés en direction artistique finale avancent en parallèle. On les confronte au contenu réel, pas à du faux texte. Puis on ajuste les deux côtés à la fois.

Cette méthode coûte un peu plus d'énergie au départ. Elle évite surtout la phase la plus chère d'un projet. Celle où l'on découvre, en développement, que la structure validée ne supporte pas l'image de marque.

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

Regardez où le visiteur décroche. S'il ne voit pas, ne lit pas ou ne croit pas, c'est l'UI ; s'il ne trouve pas, n'avance pas ou abandonne, c'est l'UX.

Il reste une troisième colonne, celle qu'aucune définition ne mentionne. Certains défauts n'apparaissent qu'en navigation réelle, sur un vrai téléphone, avec un vrai réseau. Ils ne relèvent ni de la maquette ni du parcours. Ils relèvent de la couture entre les deux.

Voici la grille que nous proposons pour classer un problème avant de payer quelqu'un pour le corriger.

Les signaux d'un problème d'UI

• Du texte gris clair posé sur un fond clair, élégant en réunion et illisible au soleil.
• Des liens et des boutons qui ne se distinguent pas du texte courant.
• Une hiérarchie plate, où tout a le même poids et rien ne guide l'œil.
• Des écrans qui ne se ressemblent pas, comme s'ils venaient de trois projets différents.

Le premier signal est de loin le plus répandu. D'après WebAIM (The WebAIM Million, 2026), 83,9 % des pages d'accueil analysées présentaient du texte au contraste insuffisant, avec 34 occurrences en moyenne par page. C'est un défaut d'interface au sens strict, et pourtant ses effets sont des effets d'usage. Notre guide sur l'accessibilité d'un site web et le RGAA approfondit le sujet.

Les signaux d'un problème d'UX

Les symptômes sont d'une autre nature. Le visiteur ne trouve pas une information pourtant présente sur le site. Il revient en arrière plusieurs fois. Il commence un formulaire et le quitte. Il lit tout, et repart sans savoir quoi faire ensuite.

Le commerce en ligne fournit parmi les mesures les plus solides sur ce terrain. D'après Baymard Institute (50 Cart Abandonment Rate Statistics, 2026), 17 % des acheteurs américains ont déjà abandonné une commande jugée trop longue ou trop compliquée. Le tunnel moyen affiche 23,48 éléments de formulaire, quand un parcours idéal peut se limiter à 12 à 14.

Le même institut estime qu'un grand site marchand peut gagner 35,26 % de conversion en corrigeant seulement la conception de son tunnel. Votre site n'est peut-être pas marchand. Le principe se transpose pourtant à un formulaire de contact B2B qui demande le budget avant de demander le besoin.

Les signaux d'un problème de couture

C'est la colonne la moins intuitive. Une animation qui saccade sur mobile. Un bouton qui réagit avec un temps de retard. Une mise en page qui saute pendant le chargement. Un menu parfait sur écran large, inutilisable au pouce.

La maquette était juste. Le parcours aussi. Le défaut est apparu au moment où l'un est devenu l'autre, dans le navigateur. D'après le Web Almanac 2025 de HTTP Archive (chapitre Performance, 2025), seuls 48 % des sites mobiles valident les trois Core Web Vitals. Sur ordinateur, ils sont 56 %. Le même chapitre relève des animations non composées, source de décalages visuels, sur 40 % des pages mobiles.

Le test des trois colonnes, en trente minutes

Vous pouvez appliquer cette grille dès cette semaine, sans prestataire.

1. Choisissez une tâche qui compte pour votre activité, par exemple trouver un projet comparable puis vous contacter.
2. Confiez-la à trois personnes extérieures à l'entreprise, sur leur propre téléphone.
3. Observez sans aider, et notez chaque hésitation telle quelle.
4. Rangez chaque note dans une colonne : UI, UX ou couture.
5. Comptez. La colonne la plus remplie vous dit quel profil solliciter en premier.

Trois testeurs ne font pas une étude. Ils suffisent pourtant à éviter l'erreur la plus coûteuse : confier un problème de parcours à quelqu'un qui va repeindre les écrans.

La couture entre UI et UX, là où les sites premium se jouent

Sur un site ambitieux, la frontière entre interface et expérience n'est pas une ligne. C'est une zone. Elle contient les transitions, les états, les adaptations d'un format d'écran à l'autre, la réponse au moindre geste.

Une maquette statique ne montre presque rien de cette zone. Elle ne dit pas ce qui se passe quand le réseau est lent. Ni comment le focus clavier circule. Ni ce que devient une grille de six projets sur un écran de 375 pixels. Ces décisions se prennent, dans les faits, au moment du développement.

C'est pour cela que, dans un studio, le développeur est souvent le dernier designer du projet. Quand il n'a pas été associé aux choix d'interface, il les interprète. Quand il l'a été, il les prolonge.

Le cas Techunt : une marque, deux publics, un seul système

Techunt est un cabinet de recrutement spécialisé dans l'IA, le Web3 et la blockchain. Sur un marché saturé, son enjeu était de sortir du rôle de simple intermédiaire. Il fallait exister comme un acteur crédible auprès des profils et des entreprises les plus pointus.

La question UX était posée dès le départ par la nature du métier. Un cabinet de recrutement parle à deux publics, les candidats et les entreprises, qui n'attendent pas la même chose. Le site leur réserve donc des entrées distinctes, avec une page candidat et une page entreprise.

La question UI était tout aussi précise. Le studio a conçu une identité inspirée de la précision, avec une esthétique tech premium. Et le travail a été mené d'un seul tenant, de la stratégie de marque à l'UI design.

La fiche projet résume l'objectif en une idée : rendre le positionnement immédiatement lisible. Ce mot, lisible, dit tout du sujet. La crédibilité auprès de profils rares est un résultat d'expérience. Elle s'obtient pourtant en grande partie par des décisions d'interface.

Les 3 erreurs nées de la confusion entre UI et UX

Erreur 1 : commander « de l'UI/UX » sans dire quel problème on règle

Ce qu'on entend le plus souvent en premier brief, c'est une demande globale : « il nous faut de l'UI/UX ». Le réflexe est compréhensible, l'expression est partout. En réalité, le prestataire livre alors ce qu'il fait le mieux, qui n'est pas forcément ce dont le site a besoin. La demande doit nommer le problème, pas la discipline.

Le marché entretient ce flou. D'après L'Etudiant (Quelle différence entre UX designer et UI designer ?, 2026), les grandes structures cloisonnent généralement les deux rôles. Les petites structures et les agences de taille moyenne recherchent au contraire très souvent des profils polyvalents « UX/UI ». Le titre ne vous dit donc rien de la répartition réelle du travail.

Erreur 2 : valider une maquette comme on valide une expérience

On voit souvent ce schéma chez les marques en repositionnement. Les écrans sont présentés en réunion, sur un grand moniteur, et validés avec enthousiasme. Personne ne les a parcourus sur un téléphone, avec le pouce, dans une rue bruyante.

En réalité, la maquette validait une image, pas un usage. Les surprises arrivent après la mise en ligne, quand les corrections coûtent le plus cher. Une validation sérieuse se fait sur un prototype qui tourne dans un vrai navigateur.

Erreur 3 : soigner l'interface pour réparer un parcours

Un scénario revient régulièrement chez les entreprises de services. Les demandes de contact stagnent, alors on refait la page d'accueil. Nouvelle accroche, nouvelles couleurs, nouvelle image en plein écran.

Les chiffres ne bougent pas. Le problème était ailleurs : le visiteur ne trouvait aucune preuve qu'on avait déjà traité un cas comme le sien. Un défaut d'expérience ne se corrige pas par une couche de peinture, aussi belle soit-elle.

Qui doit porter l'UI et l'UX dans votre projet ?

Une seule personne ou une seule équipe doit répondre de la couture entre les deux. Même si l'UI et l'UX sont produites par des profils différents. Sans ce responsable, chacun livre sa partie juste, et le visiteur hérite des écarts.

Trois configurations et leurs angles morts

• Un designer UI freelance et un développeur. Les écrans sont soignés, mais personne n'a mandat pour remettre en cause le parcours.
• Un consultant UX et une agence graphique. Le parcours est solide sur le papier, mais l'interface arrive tard et sans droit de modifier la structure.
• Un studio intégré. Stratégie, direction artistique et développement avancent ensemble. Le risque se déplace : il faut vérifier que le studio écoute vraiment vos utilisateurs et pas seulement ses propres références.

Aucune configuration n'est mauvaise en soi. Chacune doit simplement désigner qui arbitre quand l'interface et le parcours tirent dans deux directions.

Trois leviers à activer dès le prochain brief

Écrire le brief en deux colonnes

D'un côté, ce que le visiteur doit réussir : trouver, comparer, se rassurer, contacter. De l'autre, ce qu'il doit percevoir : le niveau de gamme, la singularité, la rigueur. Un prestataire qui ne sait répondre qu'à une seule colonne se signale tout seul.

Exiger une validation dans le navigateur

Demandez à voir au moins un parcours clé sur un prototype fonctionnel, sur téléphone, avant la fin de la conception. C'est là que la couture devient visible, et qu'elle coûte encore peu à corriger.

Nommer un responsable de la couture

Ce peut être le directeur artistique, le lead développeur ou le chef de projet. L'essentiel est qu'il ait le pouvoir de trancher sur les états, les animations et les adaptations mobiles. Et qu'il soit présent du premier atelier à la mise en ligne.

Ne choisissez pas entre UI et UX, choisissez qui tient les deux

Opposer l'interface et l'expérience a du sens pour décrire des métiers. Pour construire un site de marque, c'est une fausse alternative. Le visiteur ne vit qu'un seul moment, et il juge votre marque sur l'ensemble.

Retenez la grille plutôt que les définitions. Ce qui ne se voit pas ou ne se croit pas relève de l'UI. Ce qui ne se trouve pas ou ne s'accomplit pas relève de l'UX. Ce qui casse à l'usage réel relève de la couture. C'est souvent là que se joue l'écart entre un site correct et un site qui porte votre ambition.

Vous en êtes à chiffrer votre projet ? Notre décryptage du prix d'un projet UI UX design aide à comparer les devis sur le bon périmètre.

Vos questions les plus fréquentes sur UI vs UX