Quand on parle de création de site internet, les termes UX et UI reviennent très souvent. Ils sont parfois utilisés ensemble, parfois comme s’ils désignaient exactement la même chose.
Pourtant, ils ne répondent pas tout à fait aux mêmes questions.
L’UX design s’intéresse à l’expérience vécue par l’utilisateur : comprend-il facilement où il se trouve ? Trouve-t-il rapidement ce qu’il cherche ? Sait-il quelle action effectuer ensuite ? Son parcours est-il simple, logique et rassurant ?
L’UI design donne une forme visuelle à cette expérience : couleurs, typographies, boutons, espaces, images, composants, interactions… C’est ce qui permet à l’interface d’avoir une identité tout en restant compréhensible.
Dans mon travail de designer UX/UI, je préfère donc ne pas opposer les deux. L’UX construit le parcours. L’UI lui donne une forme et une identité. Et un site réellement réussi a besoin des deux.
UX et UI : quelle différence ?
Pour faire simple, l’UX et l’UI travaillent sur deux dimensions complémentaires d’une même interface.
| UX design | UI design |
|---|---|
| Expérience utilisateur | Interface utilisateur |
| Comprendre les besoins | Traduire visuellement la solution |
| Organiser les informations | Choisir les couleurs et typographies |
| Construire les parcours | Créer les composants graphiques |
| Créer des wireframes | Créer des maquettes détaillées |
| Simplifier les actions | Créer une hiérarchie visuelle |
| Réduire les incompréhensions | Donner une identité à l’interface |
Cette distinction est volontairement simplifiée. Dans un projet réel, la frontière est beaucoup moins nette.
Une couleur, par exemple, est un choix UI. Mais si elle permet à l’utilisateur d’identifier immédiatement l’action principale de la page, elle contribue aussi à l’expérience utilisateur.
C’est pour cela que je préfère considérer l’UX et l’UI comme deux dimensions qui doivent fonctionner ensemble.
Le Nielsen Norman Group, l’une des références historiques dans le domaine, donne d’ailleurs une définition très large de l’expérience utilisateur : elle concerne l’ensemble des interactions de l’utilisateur avec une entreprise, ses services et ses produits.
Qu’est-ce que l’UX design ?
UX signifie User Experience, ou expérience utilisateur.
Sur un site web, travailler l’UX consiste à se demander comment une personne va comprendre, parcourir et utiliser l’interface.
Les premières questions sont souvent très simples :
- Pourquoi l’utilisateur arrive-t-il sur cette page ?
- Que vient-il chercher ?
- Quelle information doit-il trouver en premier ?
- Quelle action doit-il pouvoir effectuer ?
- Quels éléments pourraient créer une hésitation ?
- Le vocabulaire utilisé est-il compréhensible ?
- Le parcours reste-t-il logique sur mobile ?
L’objectif n’est pas de forcer l’utilisateur à suivre le parcours imaginé par le designer.
C’est plutôt l’inverse : l’interface doit essayer de s’adapter à la manière dont l’utilisateur comprend naturellement l’information.
Mon point de vue : je ne commence pas une maquette en me demandant quelle couleur de bouton serait la plus jolie. Je commence par chercher à comprendre pourquoi ce bouton existe, à qui il s’adresse et ce qui doit se passer lorsqu’on clique dessus.
Cette logique rejoint les principes de la conception centrée sur l’humain définis dans la norme ISO 9241-210 : comprendre les utilisateurs, leurs besoins et leur contexte d’usage doit faire partie du processus de conception.
L’UX commence avant la maquette
Lorsque je travaille sur une nouvelle interface, ouvrir Figma n’est pas forcément ma première étape.
Avant de dessiner quoi que ce soit, il faut comprendre le projet.
- Quelle est l’activité de l’entreprise ?
- Quel est son positionnement ?
- À qui s’adresse le site ?
- Quelles sont les attentes principales des utilisateurs ?
- Quels contenus existent déjà ?
- Quels sont les objectifs du site ?
- Quelles actions sont réellement prioritaires ?
Un site vitrine professionnel destiné à rassurer des collectivités ne se structure pas comme un site e-commerce destiné à permettre un achat rapide.
De la même manière, un utilisateur qui cherche simplement un numéro de téléphone n’a pas les mêmes besoins qu’une personne qui compare plusieurs prestations avant de demander un devis.
Le design doit s’adapter à ces usages, pas l’inverse.
La hiérarchie de l’information est déjà de l’UX
L’une des parties du travail UX qui m’intéresse particulièrement concerne la hiérarchie de l’information.
Une page peut contenir toutes les bonnes informations et malgré tout être difficile à utiliser.
Pourquoi ? Parce que tout est présenté au même niveau.
Un titre principal, une introduction, une preuve, un tarif, une information secondaire et un bouton de contact n’ont pas la même importance.
L’utilisateur doit pouvoir le comprendre en parcourant rapidement la page.
Cela commence même avant la conception de la page. L’organisation globale du site joue un rôle essentiel. TooNetCreation l’explique notamment dans son article consacré à l’impact de l’arborescence sur le SEO et l’expérience utilisateur.
Une bonne UX ne concerne donc pas uniquement une page isolée : elle dépend aussi de la logique qui relie toutes les pages entre elles.
Qu’est-ce que l’UI design ?
UI signifie User Interface, ou interface utilisateur.
Si l’UX permet de réfléchir au fonctionnement du parcours, l’UI donne une forme concrète à cette réflexion.
Le travail UI concerne notamment :
- les couleurs ;
- les typographies ;
- les tailles de texte ;
- les boutons ;
- les icônes ;
- les images ;
- les espacements ;
- les alignements ;
- les cartes et composants ;
- les états au survol ;
- les animations et micro-interactions ;
- la cohérence visuelle entre les différentes pages.
L’UI est donc beaucoup plus que le fait de « rendre le site joli ».
Elle doit également traduire l’identité visuelle de l’entreprise et permettre à la marque d’être identifiable sans rendre le site plus difficile à utiliser.
C’est cet équilibre entre esthétique, identité et utilisation qui rend le travail intéressant.
La couleur ne sert pas uniquement à décorer
Prenons un exemple très simple : la couleur.
Elle participe naturellement à l’identité graphique d’une marque. Mais dans une interface, elle peut aussi avoir une fonction.
Une couleur d’accent peut servir à :
- attirer le regard vers une action prioritaire ;
- différencier un élément interactif ;
- mettre en évidence une information ;
- créer différents niveaux de lecture ;
- signaler une validation, une erreur ou un changement d’état.
Si cette même couleur est utilisée partout, elle perd justement sa capacité à guider le regard.
C’est pour cela que j’aime travailler avec des palettes structurées : une couleur principale, éventuellement une couleur d’accent, puis suffisamment de nuances neutres pour laisser respirer les contenus.
Le choix des couleurs doit également tenir compte des contrastes et de la lisibilité. C’est l’un des points où UI, UX et accessibilité se rejoignent directement.
Pourquoi les espacements et les alignements changent-ils autant une interface ?
Les espacements sont un bon exemple de détail que l’utilisateur ne remarque pas forcément consciemment.
Personne ne va normalement consulter une page en se disant :
« Cette marge entre ces deux blocs est particulièrement réussie. »
En revanche, on ressent très rapidement qu’une interface manque de maîtrise lorsque :
- les espaces changent constamment ;
- les textes ne sont pas correctement alignés ;
- certains blocs semblent trop serrés ;
- d’autres paraissent complètement déconnectés ;
- les différents composants n’utilisent pas les mêmes règles.
Un bon UI design crée un rythme.
Les contenus appartenant à un même groupe sont rapprochés. Les sections différentes sont séparées. Les titres, textes, images et boutons suivent des règles cohérentes.
Ce sont souvent ces détails presque invisibles qui donnent à une interface son impression de qualité.
Peut-on avoir une bonne UI et une mauvaise UX ?
Oui. C’est même relativement courant.
Imaginez un site extrêmement soigné :
- belles photographies ;
- typographie élégante ;
- animations travaillées ;
- palette parfaitement cohérente ;
- effets au survol sophistiqués.
Mais lorsque vous arrivez sur la page d’accueil, vous ne comprenez pas exactement ce que propose l’entreprise.
Le menu utilise des intitulés originaux mais peu explicites. Le bouton principal se confond avec le reste de l’interface. Les informations importantes se trouvent après plusieurs écrans et certaines animations ralentissent votre progression.
Sur smartphone, quelques interactions deviennent même pénibles.
Visuellement, le site peut être impressionnant.
En matière d’expérience utilisateur, il ne fonctionne pourtant pas correctement.
C’est également pourquoi une refonte graphique ne devrait pas être limitée à un simple changement d’apparence.
Et peut-on avoir une bonne UX avec une mauvaise UI ?
Oui, là encore.
Le parcours peut être parfaitement logique. Les informations peuvent être faciles à trouver et les fonctionnalités efficaces.
Mais l’interface peut sembler vieillissante, manquer de cohérence ou ne pas transmettre correctement l’image de l’entreprise.
Un utilisateur ne juge pas uniquement la facilité avec laquelle il trouve une information.
Il se construit également une perception de la marque à travers :
- la qualité des visuels ;
- la cohérence des couleurs ;
- la typographie ;
- la qualité des composants ;
- la finition générale de l’interface.
Une UX efficace ne dispense donc pas de travailler l’UI.
UX et UI doivent se renforcer mutuellement.
UX/UI : un exemple concret avec une page de service
Prenons une page destinée à présenter une prestation.
Le travail UX
Je vais d’abord essayer d’identifier les questions principales de l’utilisateur :
- Est-ce que cette prestation correspond à mon besoin ?
- Qu’est-ce qui est réellement proposé ?
- Comment se déroule l’accompagnement ?
- Pourquoi faire confiance à cette entreprise ?
- Existe-t-il des exemples de réalisations ?
- Quel budget faut-il prévoir ?
- Comment obtenir davantage d’informations ?
À partir de ces questions, on peut commencer à construire la structure de la page.
Le travail UI
Il faut ensuite rendre cette hiérarchie visible.
Je peux par exemple :
- renforcer le contraste du titre principal ;
- créer des blocs permettant de scanner rapidement les bénéfices ;
- utiliser différents niveaux typographiques ;
- donner suffisamment d’espace aux sections ;
- faire ressortir l’action principale ;
- utiliser les couleurs de la marque sans surcharger l’interface.
La structure vient guider le design et le design rend la structure perceptible.
Le wireframe : le moment où l’UX devient visible
Le wireframe est particulièrement utile pour matérialiser la réflexion avant de travailler le rendu graphique final.
Il s’agit d’une représentation simplifiée d’une page ou d’une interface.
On s’intéresse principalement :
- à l’emplacement des contenus ;
- à leur ordre ;
- aux blocs fonctionnels ;
- aux principales actions ;
- aux relations entre les différentes parties de la page.
Le wireframe permet donc de poser une question essentielle :
« Est-ce que cette page fonctionne avant même de commencer à travailler son identité graphique ? »
Figma décrit d’ailleurs le wireframe comme une sorte de squelette de l’interface permettant de visualiser les pages, les composants et les fonctionnalités essentielles avant de consacrer du temps aux finitions graphiques.
Pour approfondir cette étape, la documentation de Figma consacrée au wireframing donne une bonne présentation des différents niveaux de fidélité et de leur utilité.
Du wireframe à la maquette UI
Une fois la structure suffisamment claire, je peux travailler plus précisément sur l’interface.
C’est à ce moment que l’identité visuelle prend davantage de place :
- choix typographiques ;
- palette de couleurs ;
- traitement des images ;
- styles des boutons ;
- icônes ;
- formes des composants ;
- états interactifs ;
- animations ;
- déclinaisons sur les différentes tailles d’écran.
J’utilise principalement Figma pour concevoir les wireframes, les maquettes et les prototypes.
L’intérêt est aussi de pouvoir faire évoluer rapidement une proposition et de faciliter les échanges avec les personnes qui vont ensuite intégrer ou développer l’interface.
Une animation n’améliore pas automatiquement l’expérience utilisateur
Les animations et micro-interactions sont un autre bon exemple de la relation entre UX et UI.
Une animation peut être utile lorsqu’elle :
- montre qu’une action a bien été prise en compte ;
- accompagne une transition ;
- attire l’attention sur une information importante ;
- aide à comprendre un changement d’état ;
- rend une interaction plus naturelle.
Mais elle devient beaucoup moins pertinente lorsqu’elle ralentit le parcours ou détourne constamment l’attention.
Je préfère donc toujours me demander :
« Qu’est-ce que cette animation apporte réellement à l’utilisateur ? »
Si la seule réponse est « elle est jolie », ce n’est pas forcément suffisant.
7 erreurs UX/UI que je rencontre régulièrement
1. Commencer directement par le graphisme
Choisir les couleurs et réaliser une belle maquette avant d’avoir défini les contenus, les utilisateurs et les priorités conduit souvent à refaire une partie du travail.
2. Donner la même importance à tout
Lorsque tous les titres sont énormes, tous les blocs colorés et tous les boutons très visibles, plus rien ne ressort réellement.
3. Concevoir uniquement pour soi
Le fonctionnement d’une interface paraît forcément plus évident à la personne qui l’a conçue.
Cela ne signifie pas qu’il le sera pour quelqu’un qui la découvre pour la première fois.
4. Chercher absolument l’originalité
Créer quelque chose de différent peut être très intéressant.
Mais certains codes existent parce que les utilisateurs les connaissent déjà.
Un bouton doit rester identifiable comme un bouton. Un menu doit pouvoir être reconnu comme un système de navigation.
5. Négliger la version mobile
Une interface mobile ne doit pas simplement être une maquette desktop que l’on aurait compressée.
Les priorités, les dimensions, les espaces et certaines interactions doivent être adaptées.
6. Accumuler les animations
Un site n’a pas besoin de réagir à chaque mouvement de souris.
Trop d’effets créent du bruit visuel au lieu d’améliorer l’expérience.
7. Confondre simplicité et absence de personnalité
Une interface peut être claire sans être générique.
La simplicité consiste surtout à supprimer les difficultés inutiles. Elle n’interdit ni la créativité, ni les partis pris graphiques, ni une identité forte.
UX/UI et accessibilité : des réflexions qui doivent se rencontrer
Une interface facile à comprendre doit également tenir compte de la diversité des personnes qui vont l’utiliser.
Contrastes suffisants, taille et lisibilité des textes, états visibles des composants, navigation compréhensible ou encore cohérence des interactions participent à la qualité générale de l’expérience.
Le W3C et ses Web Content Accessibility Guidelines (WCAG) constituent la principale référence internationale concernant l’accessibilité des contenus web.
Chez TooNetCreation, le sujet est également développé dans l’article « Accessibilité web et design : non, un site accessible n’est pas forcément moche ».
Je partage complètement cette logique : l’accessibilité ne doit pas être une correction graphique effectuée à la fin du projet.
Elle gagne à être prise en compte dès la conception.
UX/UI et SEO ont aussi intérêt à travailler ensemble
Le design ne travaille pas seul.
Une bonne interface doit pouvoir accueillir les contenus dont l’utilisateur et l’entreprise ont réellement besoin.
La structure éditoriale, l’arborescence, les intentions de recherche et la hiérarchisation des pages ont donc un impact direct sur le travail de conception.
Créer une maquette complète puis réfléchir seulement ensuite au référencement naturel peut créer plusieurs problèmes.
On découvre parfois beaucoup trop tard :
- qu’une page doit accueillir davantage de contenus ;
- que plusieurs sections supplémentaires sont nécessaires ;
- que l’arborescence doit évoluer ;
- que certains niveaux de titres doivent être restructurés ;
- ou qu’une page imaginée graphiquement ne répond pas réellement à l’intention de l’utilisateur.
À l’inverse, ajouter des contenus uniquement pour répondre à des enjeux SEO sans réfléchir à leur présentation peut produire des pages complètes mais difficiles à parcourir.
Le meilleur résultat apparaît lorsque contenu, SEO, UX et UI dialoguent dès le début du projet.
Ma méthode pour construire une interface UX/UI
Chaque projet est différent, mais mon processus suit généralement la même logique.
- Comprendre le contexte : activité, objectifs, cible et contraintes.
- Identifier les besoins : que viennent réellement chercher les utilisateurs ?
- Analyser l’existant : contenus, concurrence, interfaces existantes et codes du secteur.
- Rechercher des inspirations : comprendre différentes approches sans simplement les reproduire.
- Structurer les informations : hiérarchie, parcours et actions prioritaires.
- Créer les wireframes : tester l’organisation avant de finaliser le design.
- Construire l’UI : couleurs, typographies, composants et identité visuelle.
- Prototyper : matérialiser les interactions et vérifier le fonctionnement de l’interface.
- Adapter : desktop, tablette, mobile et contraintes techniques réelles.
C’est cette approche que nous développons chez TooNetCreation dans notre accompagnement en conception UX/UI et expérience utilisateur.
L’objectif n’est pas d’appliquer la même recette graphique à tous les projets.
Il faut trouver le point d’équilibre entre l’identité du client, les besoins des utilisateurs et les contraintes du projet.
Comment savoir si votre site a un problème d’UX ou d’UI ?
Vous pouvez commencer par observer quelques symptômes simples.
Votre UX mérite probablement d’être retravaillée si :
- vos clients vous demandent régulièrement où trouver une information pourtant présente sur le site ;
- la navigation comporte trop de niveaux ;
- les intitulés de menu sont difficiles à comprendre ;
- les actions prioritaires sont peu visibles ;
- certains formulaires provoquent beaucoup d’abandons ;
- le fonctionnement sur mobile est compliqué ;
- vous devez expliquer à vos utilisateurs comment utiliser certaines parties du site.
Votre UI mérite probablement d’être retravaillée si :
- le site donne une image vieillissante de l’entreprise ;
- les pages semblent appartenir à des univers différents ;
- les couleurs sont utilisées sans véritable logique ;
- les espacements et alignements sont irréguliers ;
- les boutons changent de style selon les pages ;
- l’identité visuelle de votre entreprise est difficile à reconnaître.
Dans beaucoup de projets de refonte, les deux problématiques se mélangent.
C’est précisément pour cela qu’une analyse UX/UI doit aller plus loin qu’un simple avis du type « le site fait vieux » ou « il faudrait moderniser le design ».
Faut-il choisir entre UX et UI ?
Non.
Un projet web ne devrait pas avoir à choisir entre une expérience facile à utiliser et une interface attractive.
L’objectif est précisément de réunir les deux.
L’UX aide l’utilisateur à comprendre.
L’UI matérialise cette compréhension et transmet l’identité de la marque.
Lorsque les deux fonctionnent ensemble, l’utilisateur n’a pas besoin de réfléchir au fonctionnement du site. Il peut se concentrer sur son véritable objectif : comprendre une offre, trouver une information, comparer, réserver, acheter ou prendre contact.
Pour moi, le meilleur design n’est pas celui qui cherche à se faire remarquer à tout prix. C’est celui qui accompagne naturellement l’utilisateur tout en lui laissant une impression cohérente de la marque.
Si vous créez ou refondez votre site, la bonne question n’est donc pas :
« Devons-nous travailler l’UX ou l’UI ? »
Elle est plutôt :
« Comment créer une interface qui ressemble à notre entreprise tout en étant naturellement compréhensible pour les personnes qui vont réellement l’utiliser ? »
FAQ : UX design et UI design
Quelle est la différence entre UX et UI ?
L’UX concerne l’expérience globale vécue par l’utilisateur : compréhension, parcours, organisation et facilité d’utilisation. L’UI concerne la manière dont cette expérience est traduite visuellement à travers les couleurs, typographies, boutons, composants, espacements et interactions.
Qu’est-ce qu’un UX/UI designer ?
Un designer UX/UI intervient sur la conception du parcours utilisateur et sur la conception visuelle de l’interface. Selon la taille et la nature du projet, ces différentes missions peuvent être réalisées par une même personne ou réparties entre plusieurs spécialistes.
Qu’est-ce qu’un wireframe ?
Un wireframe est une représentation simplifiée d’une page ou d’une interface. Il permet de réfléchir à la structure, à la hiérarchie des informations et aux principales fonctionnalités avant de travailler le design graphique détaillé.
À quoi sert Figma en UX/UI design ?
Figma permet notamment de créer des wireframes, des maquettes d’interfaces, des composants et des prototypes interactifs. Il facilite également la collaboration entre les différentes personnes impliquées dans la conception et le développement d’un projet web.
L’UX design sert-il uniquement à rendre un site plus joli ?
Non. L’UX cherche principalement à rendre l’expérience plus claire, logique et adaptée aux besoins des utilisateurs. La dimension visuelle relève davantage de l’UI design, même si les deux disciplines sont étroitement liées.
Une bonne UX peut-elle améliorer les conversions ?
Une expérience plus simple peut réduire certaines hésitations et certains abandons en permettant à l’utilisateur de comprendre plus facilement l’offre et les actions disponibles. Il faut toutefois éviter de réduire l’UX à la conversion : son objectif reste avant tout de proposer une expérience adaptée aux besoins des utilisateurs.
Faut-il travailler l’UX avant l’UI ?
Il est généralement pertinent de clarifier les besoins, les parcours et la structure avant de finaliser le design graphique. En pratique, UX et UI évoluent cependant ensemble : certains choix visuels peuvent faire émerger de nouvelles questions d’usage, et inversement.
Sources et ressources pour aller plus loin
Quelques références permettent d’approfondir les notions abordées dans cet article :
- Nielsen Norman Group – The Definition of User Experience : une référence historique pour comprendre le périmètre de l’expérience utilisateur.
- ISO 9241-210:2019 : principes de conception centrée sur l’humain pour les systèmes interactifs.
- W3C – Web Content Accessibility Guidelines (WCAG) 2.2 : recommandations internationales concernant l’accessibilité des contenus web.
- Figma – Qu’est-ce que le wireframing ? : présentation du rôle des wireframes dans le processus de conception UX/UI.
