UX vs UI : quelle différence, et où investir pour convertir ?

Votre site est beau, tout le monde vous le dit, et il ne génère toujours pas de demandes. Le réflexe est de blâmer le design et de commander de nouvelles maquettes. Quelques mois et un budget plus tard, le site est encore plus beau et le formulaire reste vide, parce que le problème n'était pas là. Cet article explique ce que recouvrent l'UX et l'UI, comment identifier lequel des deux vous fait défaut à partir de vos propres chiffres, et ce qu'il faut exiger d'un prestataire avant de signer.

UX ou UI : quelle est la différence concrète ?

L'UI (interface utilisateur) désigne ce qui se voit : couleurs, typographies, boutons, animations. L'UX (expérience utilisateur) désigne ce qui se passe : le parcours, l'ordre des informations, le nombre d'étapes avant l'action attendue. L'UI habille une page, l'UX décide de ce qu'elle contient et dans quel ordre.

Décider qu'un bouton « Demander un devis » est cyan et arrondi, c'est de l'UI. Décider qu'il apparaît juste après le prix et le délai, et qu'il reste atteignable quand on fait défiler la page sur un téléphone, c'est de l'UX. Le premier choix se modifie en dix minutes, le second conditionne la structure de la page.

La dernière ligne explique pourquoi l'ordre des deux phases n'est pas négociable : une erreur d'UI se corrige dans une feuille de style, une erreur d'UX se paie en semaines de développement refait.

Pourquoi l'UX prime-t-elle sur l'UI pour convertir ?

Parce qu'un visiteur pardonne un design daté, mais pas un parcours qui l'oblige à chercher. Quand le budget impose un arbitrage, corriger le chemin produit un effet visible sur les demandes reçues, alors qu'un habillage neuf posé sur une structure confuse déplace le problème sans le résoudre.

Cela ne fait pas de l'UI un supplément décoratif. L'apparence générale d'un site est le critère que les internautes citent le plus souvent pour expliquer pourquoi ils font ou non confiance à une entreprise en ligne (source : Stanford Web Credibility Project, 2002). Le design décide si l'on reste, le parcours décide si l'on agit.

Quand le budget oblige à hiérarchiser, cet ordre fonctionne :

1. Ce qui empêche d'agir : formulaire cassé sur mobile, bouton introuvable, page qui ne s'affiche pas. Correction peu coûteuse, effet immédiat.
2. Ce qui ralentit : parcours trop long, informations données dans le mauvais ordre, arborescence illisible. C'est le chantier UX.
3. Ce qui déplaît : typographie datée, photos de banque d'images, couleurs incohérentes. C'est le chantier UI, et il donne son plein effet une fois la structure stabilisée.

L'erreur la plus courante consiste à commencer par le troisième point, parce que c'est le seul qui se voit en réunion.

Comment savoir si le problème vient de l'UX ou du design ?

Vos statistiques le disent avant n'importe quel avis esthétique. Un trafic correct avec plusieurs pages consultées et aucune demande envoyée signale un problème de parcours. Un départ au bout de quelques secondes dès la page d'accueil signale plutôt un problème de vitesse ou de crédibilité visuelle.

La dernière ligne mérite attention : tout ce qui ne convertit pas n'est pas un problème de site. Un mauvais titre dans les résultats de recherche ou une audience hors cible produisent les mêmes symptômes qu'un mauvais parcours, et notre article sur les causes d'un site qui ne génère aucun client sépare ces familles. Ces lectures supposent aussi que le suivi fonctionne : sans mesure des envois de formulaire, aucun diagnostic n'est possible.

Quelles erreurs UX coûtent le plus cher, et comment les repérer sans outil ?

Cinq erreurs reviennent systématiquement : une navigation qui oblige à deviner, une hiérarchie de contenu absente, un appel à l'action noyé, un formulaire qui demande trop et une page lente sur mobile. Chacune se repère avec un test gratuit, sans logiciel et en quelques minutes.

Une navigation qui oblige à deviner

Des intitulés comme « Solutions » ou « Notre approche » obligent à ouvrir chaque rubrique pour comprendre ce qu'elle contient. Chaque ouverture est un pari, et chaque pari raté rapproche du retour en arrière. Cinq à sept entrées nommées avec les mots de vos clients suppriment ce coût.

Le test : depuis la page d'accueil, allez jusqu'à l'envoi d'une demande en comptant les clics. Au-delà de trois, chaque étape est une occasion d'abandon.

Une hiérarchie de contenu absente

Des blocs de même taille, de même couleur et de même poids visuel obligent à tout lire pour trouver ce qui vous concerne. Personne ne le fera.

Le test : affichez votre page d'accueil cinq secondes devant quelqu'un qui ne connaît pas votre activité, refermez, puis demandez ce que vend cette entreprise et à qui. Une réponse hésitante désigne un problème de hiérarchie, pas de palette de couleurs.

Un appel à l'action noyé

Un bouton unique, répété aux moments où le visiteur dispose enfin des éléments pour décider, convertit mieux qu'une page couverte de sollicitations concurrentes. Quand tout est mis en avant, plus rien ne l'est.

Le test : relevez les libellés de vos boutons hors contexte. « En savoir plus » ne dit rien de ce qui suit le clic, contrairement à « Voir les tarifs ». Vérifiez ensuite qu'ils sont atteignables au pouce, d'une seule main.

Un formulaire qui demande trop

Chaque champ obligatoire est une raison d'abandonner, et les plus coûteux sont ceux dont le visiteur ne voit pas l'utilité : téléphone quand il attend une réponse par mail, effectif, budget estimé. Trois à cinq champs suffisent pour une première prise de contact, le reste se demande dans la réponse. En e-commerce, le même problème se joue à plus grande échelle dans le tunnel de commande : le Baymard Institute mesure un taux moyen d'abandon de panier proche de 70 % sur l'ensemble des études qu'il agrège.

Le test : remplissez votre propre formulaire sur votre téléphone, jusqu'à l'envoi, et notez chaque hésitation.

Une page lente, surtout sur mobile

C'est le seul poste dont l'effet sur la conversion a été mesuré à grande échelle : l'étude Deloitte réalisée pour Google en 2020 a établi qu'un gain de 0,1 seconde sur mobile faisait progresser les conversions de 8,4 % dans le commerce de détail. Google utilise par ailleurs les Core Web Vitals comme signal de classement, avec un affichage du contenu principal recommandé sous 2,5 secondes (source : Google Search Central). Une partie du problème se joue avant le design, dans l'hébergement et le poids des images.

Le test : chargez votre site en données mobiles plutôt qu'en wifi, sur un téléphone qui n'est pas le dernier modèle.

Un sixième test les révèle presque tous : demandez à une personne extérieure d'accomplir une tâche précise sur votre site et regardez sans intervenir. Nielsen Norman Group l'a formalisé dès 2000, cinq testeurs suffisent à faire ressortir l'essentiel des problèmes d'utilisabilité. Ces tests repèrent en revanche les frictions évidentes, pas les arbitrages fins : départager deux versions d'une même page demande du volume et une méthode, que détaille notre guide sur l'optimisation du taux de conversion.

À quoi servent les wireframes et que devez-vous y valider ?

Le wireframe est une maquette en niveaux de gris, sans couleurs ni photos définitives, qui fixe la structure d'une page avant le design. Le client y valide l'ordre des informations, la place de l'action attendue et ce qui reste visible sans faire défiler. Ni la typographie, ni les couleurs.

L'absence de couleur est volontaire : dès qu'un document contient une belle photo et une typographie travaillée, la discussion glisse vers les goûts de chacun et la structure n'est plus arbitrée. Le wireframe prolonge ici le zoning, qui a défini les grandes zones en amont.

Quatre points à valider, et rien d'autre :

• L'ordre des blocs. Ce qui apparaît en premier correspond-il à ce que votre client cherche en premier, ou à ce dont vous êtes le plus fier ?
• La place de l'action attendue. Le bouton principal est-il atteignable sans effort à chaque étape de la lecture ?
• Ce qui tient sans défilement sur un écran de téléphone. C'est l'arbitrage le plus dur, parce que l'espace y est le plus rare.
• Les contenus qui manquent encore. Un wireframe rempli de faux textes masque souvent le fait que personne n'a écrit les vrais, cause de retard la plus banale sur un projet web.

Faites relire ce document par les personnes qui répondent aux demandes entrantes, pas seulement par la direction : elles savent quelles questions reviennent avant l'achat, donc quelles informations doivent figurer avant le bouton. Vient ensuite la maquette haute fidélité, réalisée presque toujours dans Figma.

Que demander à un prestataire et comment lire sa proposition ?

Une proposition sérieuse distingue explicitement la phase UX de la phase UI, nomme ses livrables et prévoit un point de validation avant le design. Une proposition qui annonce seulement des maquettes et un nombre de pages laisse la structure à l'improvisation : vous découvrirez le parcours en même temps que le site.

Six questions à poser avant de signer :

• Quelle étape précède les maquettes, et qu'est-ce que je valide à ce moment-là ?
• Combien d'allers-retours sont inclus, et à partir de quand sont-ils facturés ?
• Qui rédige les contenus, et pour quelle date doivent-ils être livrés ?
• Le mobile est-il conçu en premier ou adapté à la fin ?
• Qui est propriétaire des maquettes et du code une fois le projet livré ?
• Comment saurons-nous que le nouveau site fait mieux que l'ancien, et qu'est-ce qui sera mesuré ?

La dernière départage les prestataires plus sûrement que le portfolio. Ensuite, quelques formulations de devis méritent une traduction :

Côté budget, mieux vaut connaître les ordres de grandeur du marché avant de comparer. En France, une refonte de site vitrine se situe le plus souvent entre 1 000 et 5 000 €, un e-commerce entre 5 000 et 15 000 €, et les agences travaillant pour de grands comptes facturent bien au-delà. Ces fourchettes décrivent le marché, pas nos tarifs : chez KreaRise, la création de site web comme la refonte de site démarrent à 1 500 €, un e-commerce à 3 000 €, phases UX et UI comprises. Pour comparer deux propositions ligne à ligne, notre guide sur la manière de lire un devis de refonte reprend la méthode.

Rencontrez enfin le prestataire au moins une fois avant de signer. Pour une entreprise d'Île-de-France, c'est faisable en une réunion, et notre agence web à Neuilly-Plaisance intervient sur tout l'est parisien.

Conclusion

Trois idées à retenir avant d'engager un budget.

1. L'UI se voit, l'UX se subit. Un visiteur perdu ne dira jamais que votre site est mal structuré. Il dira qu'il n'a pas trouvé, ou il ne dira rien.
2. Vos chiffres désignent le coupable. Du trafic sans demande pointe vers le parcours, un départ en quelques secondes vers la vitesse et la crédibilité, un bon classement sans clic vers aucun des deux.
3. L'ordre des travaux compte plus que leur montant. Corrigez d'abord ce qui empêche d'agir, ensuite ce qui ralentit, en dernier ce qui déplaît.

Vous voulez un avis expert ? Demandez votre devis gratuit. On analyse votre projet et on vous répond sous 48h. Sans engagement.

Le Conseil KreaRise : Avant d'engager le moindre budget design, chronométrez le parcours qui mène à votre formulaire de contact depuis votre page d'accueil, sur votre propre téléphone et en données mobiles plutôt qu'en wifi. Si vous dépassez trois clics ou une trentaine de secondes, aucun changement de couleur ne rattrapera cela : le problème est dans le chemin, pas dans l'habillage.