L’UX design s’intéresse à l’expérience vécue, l’UI design à l’interface que l’on voit et manipule. Deux disciplines complémentaires, souvent confondues. Ce guide explique ce qui les distingue, comment elles se complètent et pourquoi un site efficace a besoin des deux.
L’UI design (User Interface Design, « conception de l’interface utilisateur ») s’occupe de ce que l’on voit et de ce que l’on touche : couleurs, typographies, boutons, icônes, espacements, états des éléments au survol ou à l’erreur. L’UX design (User Experience Design, « conception de l’expérience utilisateur ») s’occupe de ce que l’on vit : la clarté des parcours, la facilité à atteindre son objectif, ce que l’on comprend et ressent avant, pendant et après l’usage.
Un exemple hors du web : le tableau de bord d’une voiture. Les cadrans, les boutons et les pictogrammes relèvent de l’UI. Le fait de trouver instinctivement les essuie-glaces, de lire sa vitesse d’un coup d’œil et de ne jamais hésiter sur une commande relève de l’UX. Le premier se regarde, le second se ressent.
Les deux notions ne s’opposent donc pas : l’UI est un des outils de l’UX. La norme ISO 9241-210 rattache d’ailleurs l’expérience utilisateur aux perceptions et aux réactions d’une personne face à un produit, un système ou un service, bien au-delà de son apparence. Pour poser les bases de cette dernière, la page Comprendre l’UX design en détaille la définition, les piliers et le processus.
Deux regards sur un même produit : l’un part des personnes, l’autre part de l’écran.
L’UX design étudie les besoins des utilisateurs, organise les contenus et construit des parcours qui leur permettent d’accomplir une tâche sans effort inutile. Il se joue aussi dans le choix des mots, la vitesse d’affichage et l’accessibilité. Sa question : est-ce utile, compréhensible et simple à utiliser ?
L’UI design définit l’apparence et le comportement visuel des écrans : palette, typographie, grille, composants, icônes, animations, états des boutons et des champs. Il garantit la lisibilité et la cohérence. Sa question : est-ce lisible, cohérent et agréable à manipuler ?
Dans l’usage courant, on parle souvent d’« UI/UX » ou d’« UX/UI » pour désigner l’ensemble du travail de conception.
Pour distinguer les deux disciplines, on peut les comparer sur six critères. Aucun n’est étanche : ce sont des dominantes, pas des frontières.
UX : aider la personne à atteindre son but. UI : rendre chaque écran clair, cohérent et attrayant.
UX : pourquoi l’utilisateur est là, que cherche-t-il ? UI : comment présenter l’information pour qu’elle se lise et se manipule bien.
UX : l’ensemble du parcours, de la découverte du produit au souvenir qu’il laisse. UI : les écrans, leurs composants et leur cohérence visuelle.
UX : arborescence, parcours, wireframes, prototypes, comptes rendus de tests. UI : maquettes détaillées, charte graphique, design system.
UX : taux de réussite d’une tâche, abandon, temps d’accomplissement. UI : lisibilité, contrastes, cohérence, retours sur l’aspect visuel.
UX : intervient dès la compréhension du besoin et tout au long du projet. UI : prend le relais une fois la structure posée, puis évolue avec les tests.
Rien de tel qu’un cas simple pour sentir la nuance. Prenons un formulaire de contact sur un site vitrine, l’un des éléments où se joue souvent la prise de contact avec un client.
Faites l’essai : activez ou désactivez chaque couche pour voir ce qu’elle change sur un même formulaire.
Un même symptôme, deux causes possibles
Un bouton que personne ne clique peut être mal visible (un défaut d’UI), mais aussi mal placé dans le parcours ou promettre autre chose que ce qui suit (un défaut d’UX). Pour le savoir, il faut observer de vraies personnes l’utiliser.
Un outil de maquettage comme Figma permet de couvrir les deux : on y construit les wireframes comme les maquettes finales. C’est la démarche, plus que l’outil, qui distingue les deux disciplines.
Quatre combinaisons, un seul cas gagnant.
Le parcours est limpide et l’interface agréable. L’utilisateur atteint son but sans y penser, et l’identité visuelle renforce la confiance.
On trouve ce que l’on cherche, mais l’aspect daté ou incohérent fait douter du sérieux du site.
L’écran impressionne, puis l’on se perd dans la navigation ou l’on ne comprend pas quoi faire. L’échec d’expérience reste entier.
Illisible et confus, il perd ses visiteurs avant qu’ils aient pu agir. Aucune amélioration visuelle ne suffira sans repenser la structure.
Premier échange offert. Réponse sous 24h. Devis clair avant tout engagement.
Discutons de votre projet ↗Dans la plupart des projets, l’UX ouvre la marche et l’UI prend le relais, mais les deux se rejoignent à la fin.
Entretiens, observation et analyse des usages : on identifie qui sont les utilisateurs et ce qu’ils cherchent à accomplir.
Arborescence, intitulés et parcours : on organise les contenus avant de penser à leur apparence.
Les wireframes placent les éléments et les interactions, sans couleur ni typographie, pour valider la logique des écrans.
Couleurs, typographies, composants, icônes : l’UI donne à la structure son identité visuelle et sa cohérence.
Un prototype testé par de vraies personnes révèle les blocages de parcours comme les problèmes de lisibilité, puis on corrige.
Des allers-retours constants
Ce déroulé n’est pas figé : un test peut remettre en cause une structure autant qu’une couleur. C’est cette double exigence qui guide mes services de conception web et mes réalisations.
Mü-Être est une marque de bien-être et de développement personnel. L’audit de son site a relevé trois défauts : une navigation confuse, aucune hiérarchie de l’information et des choix typographiques peu lisibles. Les deux premiers relèvent surtout de l’UX, le troisième de l’UI. La refonte a mobilisé les deux disciplines, avec un critère commun : alléger la charge mentale du visiteur.
Avant / Après — Page de contact
Objectif : trouver la page de contact sans effort.
Avant / Après — Articles de blog
Sections aérées, contrastes renforcés, interlignage ajusté.
Ce que le projet montre
L’UX a fixé ce que le visiteur devait trouver et dans quel ordre ; l’UI a rendu ce parcours lisible. L’un sans l’autre n’aurait pas suffi. Le détail complet figure dans l’étude de cas Mü-Être.
Idée reçue
Les deux sont liées mais distinctes. L’UX concerne l’expérience dans son ensemble ; l’UI n’en est qu’une couche, la couche visible et manipulable.
Idée reçue
L’UI sert la compréhension : hiérarchie visuelle, contrastes, taille des zones cliquables, retours d’état. Une bonne interface guide le regard et prévient les erreurs, bien au-delà de l’esthétique.
Idée reçue
L’UX n’est pas un style graphique, mais elle s’appuie sur le visuel pour exister : un parcours bien pensé reste invisible s’il est mal présenté. D’où l’intérêt de concevoir les deux ensemble.
Idée reçue
Ce sont deux compétences que l’on regroupe souvent sous le titre d’UX/UI designer, notamment en freelance ou dans les petites équipes. Dans les grandes structures, elles sont fréquemment confiées à des profils distincts.
Il étudie les utilisateurs, structure l’information, conçoit les wireframes et pilote les tests. Il cherche à rendre le produit utile et simple à utiliser.
Il crée le langage visuel : maquettes, composants, design system. Il veille à la lisibilité, à la cohérence et à l’adaptation aux différents écrans.
Il couvre la conception du parcours et celle de l’interface. C’est le profil le plus courant pour un site vitrine, une landing page ou un projet de taille moyenne.
Souvent proche du précédent, ce rôle ajoute une dimension stratégique : il relie les besoins des utilisateurs aux objectifs du produit et de l’entreprise.
Confier un projet à quelqu’un qui ne pense qu’à l’interface, c’est risquer un beau site que l’on ne comprend pas. Confier un projet à quelqu’un qui ne pense qu’au parcours, c’est risquer un site logique mais peu engageant. Un site réussi demande les deux : une expérience pensée pour vos visiteurs et une interface cohérente avec votre image.
C’est aussi un enjeu de visibilité. Les moteurs de recherche tiennent compte de signaux d’expérience de page, dont les Core Web Vitals, et un contenu lisible, bien structuré et adapté au mobile aide les visiteurs à rester et à agir. L’approche des principes du web design détaille ces leviers. Si vous hésitez sur l’ordre dans lequel vous en occuper, l’article UI ou UX : par quoi commencer pour son site web ? propose un diagnostic rapide. Pour un projet précis, découvrez mes services ou contactez-moi.
Non. L’UX (expérience utilisateur) désigne ce que vit une personne en utilisant un produit : parcours, clarté, facilité à atteindre son objectif. L’UI (interface utilisateur) désigne ce qu’elle voit et manipule : couleurs, typographies, boutons, icônes, espacements. L’UI fait partie de l’UX, mais ne la résume pas.
L’UX design détermine comment un produit doit fonctionner pour répondre aux besoins des utilisateurs ; l’UI design donne à ce fonctionnement une forme visible, cohérente et agréable à manipuler.
En général l’UX : on comprend d’abord les besoins, on structure les contenus et les parcours, puis on dessine des wireframes. L’UI intervient ensuite pour concevoir le rendu visuel. Les deux se rejoignent lors des tests, qui permettent d’ajuster la structure comme l’apparence.
On peut produire de belles maquettes sans démarche UX, mais le résultat risque d’être inefficace : un écran élégant peut rester difficile à comprendre ou à utiliser. À l’inverse, une bonne UX a toujours besoin d’une interface lisible pour se concrétiser sur un site ou une application.
Pas forcément. De nombreuses offres et formations associent les deux sous l’intitulé UX/UI designer, et dans les petites structures ou en freelance, une même personne couvre souvent les deux. Dans les grandes équipes, les rôles sont plus spécialisés : recherche et conception de parcours d’un côté, système visuel et composants de l’autre.
Un outil de maquettage comme Figma sert aux deux disciplines : wireframes et prototypes côté UX, maquettes détaillées et design system côté UI. S’y ajoutent des outils de recherche et de test utilisateur (entretiens, tests de prototype, cartes de chaleur) et des outils d’analyse web pour mesurer l’usage réel.
Indirectement, oui. Google utilise des signaux d’expérience de page, dont les Core Web Vitals (rapidité, stabilité d’affichage, réactivité), et un contenu lisible, bien structuré et adapté au mobile aide les visiteurs à rester et à agir. Le design ne remplace pas un bon contenu, mais il en conditionne la lisibilité.
Par les fondamentaux de l’UX : comprendre les utilisateurs, structurer l’information, tester un prototype. Côté UI, travaillez la hiérarchie visuelle, la typographie, la couleur et les composants. Refaire l’interface d’un produit existant, puis la tester auprès de quelques personnes, est un bon exercice.
Maintenant que la frontière entre UI et UX est claire, la suite logique est de comprendre comment l’expérience se construit, puis de s’appuyer sur des repères concrets. Les pages Comprendre l’UX design et Principes du web design posent les bases ; les lois de l’UX aident ensuite à justifier chaque choix d’interface, de la quantité d’options affichées à la taille d’un bouton. Pour appliquer la distinction UI/UX à votre propre site, lisez aussi l’article de blog UI ou UX : par quoi commencer pour son site web ?.
À propos de l’auteur
Lenny Gadroy, designer UI/UX et développeur front-end freelance (Lennouille). Découvrez mon parcours et mes réalisations. Dernière mise à jour : .
Premier échange offert. Réponse sous 24h. Devis clair avant tout engagement.
Discutons de votre projet ↗