UX et UI — ce que c’est vraiment, comment le juger, et d’où sort « 9 400 % de retour »

Deux lettres côte à côte dans chaque proposition, et presque toujours employées comme si elles voulaient dire la même chose. Ce n’est pas le cas, et la différence n’a rien d’académique : elle décide de ce que vous obtenez pour votre argent, et du moment du projet où il est encore permis de changer d’avis.

Ce texte est écrit pour celui qui commande, pas pour celui qui conçoit. Il contient aussi une section qu’on trouve rarement : d’où vient réellement le chiffre « chaque dollar investi en UX en rapporte cent », que répète la moitié du métier — y compris la version précédente de cet article.

UX et UI ne sont pas synonymes

La distinction la plus simple, et celle qui tient dans une discussion avec un prestataire :

L’UX, ce sont les décisions sur ce qui est montré, et dans quel ordre. Combien d’étapes séparent l’arrivée sur le site de l’envoi d’une demande. Ce qui est visible sans faire défiler. Quelles informations servent à décider et lesquelles ne font qu’occuper la place. Ce qui ne sera pas sur le site. Le produit du travail UX est une structure et une justification — pas une image.

L’UI, ce sont les décisions sur l’apparence et la réaction. Couleurs, typographie, espacements, états des boutons, comportement au survol, messages d’erreur. Le produit est une maquette graphique qu’on peut confier à l’intégration.

La conséquence pratique est unique et vaut la peine d’être connue avant de signer : l’UI se construit sur une UX validée, et non à sa place. Si une proposition affiche « conception UX/UI » à un seul prix et livre un seul fichier plein de couleurs, vous achetez de l’UI, et la couche UX a été soit sautée, soit faite par défaut. Où passe techniquement cette limite, et pourquoi le croquis est laid volontairement, nous le détaillons dans le texte sur les wireframes.

Et voici ce qui disparaît le plus souvent des propositions : l’UX n’est pas la couche esthétique. Un site peut être beau et inutilisable, comme il peut être quelconque et efficace. Si la discussion sur l’UX se résume à savoir si la nuance vous plaît, vous parlez d’UI.

Ce qu’est la conception centrée sur l’humain — selon la norme, pas selon l’agence

Il existe pour cela une norme internationale, et il vaut la peine de la connaître : elle vous donne un vocabulaire dans lequel on peut exiger du concret.

ISO 9241-210, « Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems », définit la conception centrée sur l’humain comme « an approach to systems design and development that aims to make interactive systems more usable by focusing on the use of the system and applying human factors/ergonomics and usability knowledge and techniques » — en français, dans notre propre rendu : une approche de la conception et du développement de systèmes visant à rendre les systèmes interactifs plus utilisables, en se concentrant sur l’usage qui en est fait et en appliquant les connaissances et les techniques de l’ergonomie et de l’utilisabilité. Nous citons la première édition, publique, du 15 mars 2010 ; l’édition en vigueur est celle de 2019 et elle est payante. Nous n’avons pas la version française officielle de la norme et ne prétendons donc pas en reproduire les termes.

La norme énumère six principes. Ci-dessous, chacun traduit en ce qu’il signifie pour votre budget et pour votre risque.

La conception repose sur une compréhension explicite des utilisateurs, des tâches et des environnements. Autrement dit : quelqu’un a établi qui vient ici et pourquoi, avant de dessiner le premier écran. Sans cela, vous recevez une mise en page ajustée aux habitudes de quelqu’un d’autre — en général au dernier projet de cette agence.

Les utilisateurs sont impliqués tout au long de la conception. C’est le principe le plus souvent sauté et le plus coûteux à sauter. Si personne ne teste la maquette sur des gens en cours de route, les erreurs sortiront après la mise en ligne — et la même correction coûte alors plusieurs fois plus. Chez nous ce facteur vaut environ 1:30, calculé sur nos propres tarifs ; le détail est dans le texte sur les wireframes.

La conception est pilotée et corrigée par une évaluation avec les utilisateurs. Pas par l’avis de l’équipe ni par celui de la direction. La différence est mesurable : un avis donne une préférence, une observation donne un comportement.

Le processus est itératif. C’est le principe qui disparaît le premier des contrats, parce qu’il ressemble à un coût. Valider une maquette à l’aveugle, sur la foi d’un seul écran et sans tour de corrections prévu, coûte moins cher au devis et plus cher à la réalisation — car les corrections auront lieu de toute façon, mais à l’étape où elles s’appellent reconstruction.

La conception couvre l’expérience entière. Pas seulement l’écran. Le message de confirmation, le parcours téléphonique, ce qui se passe après l’envoi du formulaire, et le fait que quelqu’un y réponde ou non.

L’équipe réunit plusieurs compétences. La norme dit explicitement que la conception centrée sur l’humain n’est pas l’affaire d’une seule personne. Si la proposition prévoit un concepteur unique faisant tout, de la recherche au code, vous savez ce que vous n’achetez pas.

Les dix heuristiques de Nielsen comme liste de contrôle pour celui qui commande

Le jeu de principes le plus utile de ce domaine a trente-six ans et fonctionne toujours. Jakob Nielsen l’a élaboré avec Rolf Molich en 1990, et en a resserré la version actuelle en 1994 — et c’est là le plus intéressant : la liste est née d’une analyse factorielle de 249 problèmes d’utilisabilité réels, choisie pour que le moins de principes possible explique le plus d’erreurs possible. Ce n’est pas l’opinion de quelqu’un sur la bonne conception.

Voici les dix, puis trois d’entre elles transformées en questions que vous pouvez poser en regardant votre propre site.

Prévention des erreurs (principe 5). Question de contrôle : le formulaire vérifie-t-il les données pendant la saisie, ou laisse-t-il cliquer sur « envoyer » pour montrer seulement ensuite ce qui ne va pas ? Et après une erreur, les champs conservent-ils ce qui était déjà saisi ?

Nous avons examiné notre propre formulaire de contact sous cet angle et il ne passe pas entièrement cette heuristique. Notre bibliothèque de formulaires est appelée sans indication du mode de validation, ce qui signifie par défaut « vérifier à l’envoi » — exactement le comportement décrit plus haut comme le moins bon. Nous conservons en revanche les valeurs saisies après une erreur, donc personne ne remplit deux fois. Nous le consignons ici parce qu’un article qui note les sites des autres sans examiner le sien vaut ce que vaut une publicité.

Visibilité de l’état du système (principe 1). Question de contrôle : après un clic sur « envoyer », l’utilisateur sait-il ce qui se passe ? Chez nous l’indicateur de chargement apparaît avec une seconde de retard — volontairement, pour qu’il ne clignote pas quand la réponse est rapide — mais c’est un compromis, pas une conformité, et nous le traitons comme tel.

Correspondance avec le monde réel (principe 2). Question de contrôle : l’interface parle-t-elle la langue de votre client ou celle du prestataire ? « Configurez votre instance », « choisissez une variante de SKU » et « panneau de gestion des entités » sont des phrases écrites par quelqu’un qui décrit son propre travail, pas votre vente.

Les sept autres sont tout aussi utiles et toutes se vérifient sans connaissance technique — c’est là leur valeur. Les heuristiques ne remplacent pas un test avec de vraies personnes ; elles permettent d’attraper la moitié des problèmes avant que ce test ait lieu.

Ce que la recherche sait de la façon dont les gens lisent une page

Deux résultats comptent plus que les autres, car tous deux indiquent leur échantillon et tous deux se traduisent directement en mise en page.

Les dix premières secondes décident si quelqu’un reste. Une étude de Microsoft Research a porté sur 205 873 pages, à raison de 10 000 visites chacune, soit plus de deux milliards de durées de consultation, et y a ajusté une loi de Weibull. Résultat : la visite moyenne dure moins d’une minute, la probabilité de partir est la plus forte dans les dix premières secondes et reste élevée les vingt suivantes. Au bout d’une trentaine de secondes, le rythme des départs baisse nettement — qui est resté une demi-minute reste en général plus longtemps.

Il vaut la peine de connaître le nombre qui se cache derrière, car il décide de la forme de toute la courbe : le paramètre de forme est ressorti inférieur à un sur 98,5 % des pages. Dans cette loi, une valeur inférieure à un signifie « vieillissement négatif » — plus quelqu’un reste sur la page, moins il est probable qu’il la quitte. Les auteurs ont nommé ce schéma « screen-and-glean » : d’abord un tri rapide, où le risque d’abandon est élevé, puis une lecture, où ce risque diminue.

La conséquence pour la conception est précise et ne revient pas à « faites joli » : le premier écran doit porter la réponse à la question de savoir pourquoi cette page existe et ce que le lecteur en retire. Pas l’annonce de la réponse, pas un slogan sur des solutions globales — la réponse.

Les gens ne lisent pas, ils balaient, et ils le font de façon répétable. Une étude oculométrique menée auprès de 232 personnes regardant des milliers de pages a montré un schéma en forme de F : un balayage horizontal en haut du contenu, un deuxième plus bas et plus court, et une descente verticale le long du bord gauche.

Les auteurs assortissent eux-mêmes ce résultat d’une réserve qu’il faut répéter, car elle disparaît des citations : il s’agit d’une « forme générale et approximative, et non d’un comportement uniforme au pixel près ». Il y a des E, des L inversés, et la mise en page elle-même peut changer le schéma — une photo de produit ou un titre long déplacent l’attention ailleurs.

Conclusion pratique des deux études réunies : la phrase la plus importante de la page doit être la première, pas la chute, et les informations qui emportent la décision ne peuvent pas se trouver dans la colonne de droite ni après le troisième défilement. Ce n’est pas affaire de goût et cela se vérifie sans étude — il suffit de masquer tout ce qui se trouve sous le premier écran et de demander à quelqu’un d’extérieur ce que fait cette entreprise.

D’où sort « 9 400 % de retour sur l’UX »

Si vous avez collecté des propositions, vous avez forcément vu ce chiffre ou l’un de ses cousins : « chaque dollar investi en UX en rapporte cent », « le retour sur investissement de l’UX est de 9 900 % ». La version précédente de cet article annonçait 9 400 %.

Nous avons suivi la chaîne de citations, et sa fin vaut la peine d’être connue.

Toutes les pistes mènent à un seul rapport : « The Six Steps For Justifying Better UX », d’Andrew Hogan et Deanna Laufer, publié par le cabinet d’études Forrester le 28 décembre 2016. Et c’est là que les problèmes commencent.

Le rapport coûte 1 495 dollars. Il n’est pas accessible publiquement, donc presque personne parmi ceux qui citent ce chiffre ne l’a vu à la source.

Le résumé public du rapport ne contient aucun chiffre de retour sur investissement. Nous avons vérifié — il dit que beaucoup d’entreprises attendent encore une preuve du retour sur investissement, et ne donne aucun indicateur.

Les citations tournent en rond. Chaque article renvoie à un autre article, celui-ci au suivant, et la chaîne ne se termine jamais sur des données. C’est la définition d’un chiffre sans fondement, quelle que soit la solidité du nom du cabinet en note de bas de page.

De plus, la version qui circule dit 9 900 %, et la nôtre disait 9 400 %. Nous reproduisions un chiffre que personne n’avait vu, et nous le déformions par-dessus le marché — c’est exactement le mécanisme qui maintient ces indicateurs en vie.

Ce qu’est le retour réel de l’UX, puisque ce n’est pas un multiplicateur. Ce n’est pas un nombre unique et cela ne se promet pas à l’avance, mais on peut nommer trois endroits où il apparaît :

L’économie de prévention. Une erreur trouvée sur un croquis coûte le déplacement d’un rectangle ; la même erreur trouvée après la mise en ligne coûte un composant reconstruit, des champs modifiés dans le système, des requêtes ajustées et des tests. C’est le calcul 1:30 sur nos tarifs.

Moins de support. Chaque question à laquelle le site ne répond pas revient sous forme d’appel ou de courriel. Ce coût n’apparaît pas dans le devis du projet et apparaît chaque mois, dans le temps de l’équipe.

Un taux de conversion de base plus élevé — mais mesuré chez soi, pas recopié de l’étude de cas d’un autre. Pourquoi les résultats des autres ne se transposent pas à votre site, et comment le calculer honnêtement, nous le détaillons dans le texte sur le taux de conversion.

Ce qui change quand vous vendez à des entreprises

La plupart des guides d’UX décrivent une boutique. Dans la vente B2B, trois choses fonctionnent autrement et méritent d’être nommées avant de commander une maquette pensée pour le commerce en ligne.

Plus d’une personne décide. Celui qui arrive cherche, mais celui qui approuve est quelqu’un d’autre — souvent après avoir reçu un lien. Le site doit donc se lire de deux façons : vite, par le chercheur, et ponctuellement, par celui qui valide, qui viendra trois minutes et voudra trouver le périmètre, les références et le moyen de contact.

La conversion est une conversation, pas un achat. L’objectif est plus précoce et moins engageant pour le visiteur, ce qui déplace tout le projet : au lieu d’enlever des frictions dans un panier, vous enlevez de l’incertitude avant un premier courriel. L’élément le plus efficace est souvent le plus simple — dire franchement ce qui se passe après l’envoi du formulaire et sous quel délai quelqu’un répond.

Le cycle est long, donc le site est lu plusieurs fois. La même personne revient une semaine plus tard pour comparer. Une mise en page qui fonctionne bien la première fois et ne laisse rien retrouver vite la troisième coûte précisément à ce moment-là — et c’est l’argument en faveur d’une navigation plutôt que d’une seule longue page.

Les trois découlent de la même chose que les études sur la durée de consultation : l’attention est courte et elle revient. Les dix premières secondes décident si quelqu’un reste aujourd’hui ; la possibilité de retrouver vite un point précis décide s’il revient accompagné.

Ce que cela coûte et ce que vous payez

Nous ne donnerons pas de fourchette, car toute fourchette serait soit notre tarif, soit une invention. Nous donnerons en revanche ce qui compose le prix, pour que vous sachiez lire la proposition d’un tiers.

Le nombre d’écrans uniques, pas de pages. Dix pages de services construites de la même façon, c’est un écran à concevoir et neuf à remplir. Une proposition qui les compte séparément décrit autre chose que ce qu’elle semble décrire.

La recherche est-elle comprise ? Entretiens avec des utilisateurs, test par tâches, analyse du site actuel — ce sont des postes distincts, et les premiers à sauter lors de la négociation du prix. Ils sautent parce qu’on ne les voit pas dans le fichier final.

Combien de tours de corrections. Deux tours au contrat et trois dans la réalité : c’est la cause la plus fréquente de litige sur le périmètre. Fixez le nombre, et fixez ce qu’est un tour.

Obtient-on un système ou un jeu d’images ? Une maquette livrée comme un ensemble cohérent de composants s’étend ; une maquette livrée comme cinq écrans indépendants réclame un concepteur à chaque nouvelle page. Cela décide des coûts des années durant, pas du prix d’aujourd’hui.

Ce que vous obtenez en propriété. Les fichiers sources ou un aperçu ? Une licence de polices ou seulement leur usage dans ce projet ? Cela peut faire la différence entre changer de prestataire et refaire la maquette à zéro.

Comment juger une proposition UX/UI

Cinq questions, toutes posables sans connaissance en conception.

« Que fera la personne qui arrive sur cette page ? » Si la réponse est « elle prendra connaissance de l’offre », le prestataire n’a pas d’objectif, seulement un périmètre.

« Comment savez-vous que cette mise en page fonctionnera ? » Une bonne réponse est « nous ne le savons pas, nous vérifierons » ou « par l’étude que nous mènerons en deuxième semaine ». Une mauvaise réponse est « nous avons de l’expérience ».

« Que se passe-t-il si notre texte est deux fois plus long ? » La question paraît anodine et décide si la maquette est un système ou une image.

« Quels éléments pourrons-nous modifier nous-mêmes ? » Le dernier moment où cette réponse est bon marché.

« Que ne faites-vous pas dans ce projet ? » Les phrases les plus importantes de toute proposition commencent par « ne comprend pas ». Leur absence ne signifie pas que tout est compris dans le prix.

Ce que ce texte ne tranche pas

Comment mener un test avec des utilisateurs. La méthode des cinq personnes, les tâches plutôt que les questions et ce qui en découle sont dans le texte sur les wireframes.

Comment mesurer l’efficacité du site. Le taux de conversion, son dénominateur et la raison pour laquelle les repères de marché ne sont pas un objectif ont leur propre texte.

L’accessibilité et les WCAG. Un domaine distinct, avec ses propres obligations légales, et non un sous-chapitre de l’UX, qui a son propre texte.

Ce qu’il faut fixer avant de concevoir. Objectifs, public et périmètre se décident dans le brief — séparément.

D’où viennent ces chiffres

• Les dix heuristiques d’utilisabilité — Jakob Nielsen et Rolf Molich, première publication en 1990, jeu actuel resserré en 1994 à partir d’une analyse factorielle de 249 problèmes d’utilisabilité : « 10 Usability Heuristics for User Interface Design », Nielsen Norman Group, page mise à jour le 30 janvier 2024.
• La définition et les six principes de la conception centrée sur l’humain — ISO 9241-210, « Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems ». Nous citons la première édition, publique, du 15 mars 2010 ; l’édition en vigueur est celle de 2019 et elle est payante, nous ne pouvons donc pas en reproduire les termes. Le rendu français de la définition est le nôtre et n’est pas la traduction officielle de la norme.
• Les dix premières secondes, le seuil des trente secondes et le paramètre de forme inférieur à un sur 98,5 % des pages — étude source : Chao Liu, Ryen W. White, Susan Dumais, « Understanding Web Browsing Behaviors through Weibull Analysis of Dwell Time », Microsoft Research, SIGIR 2010 ; 205 873 pages avec 10 000 observations de durée chacune. Présentation pour praticiens : Jakob Nielsen, « How Long Do Users Stay on Web Pages? », Nielsen Norman Group, 11 septembre 2011.
• La courbe de survie de la figure — calculée à partir de la formule de Weibull, et non dessinée à la main. La publication donne des distributions des deux paramètres, et non une paire unique ajustée à tout le web ; les valeurs k = 0,5 et λ = 35 s utilisées sur le graphique sont donc indicatives et proviennent des intervalles donnés par les auteurs : paramètre de forme inférieur à un sur 98,5 % des pages, et durée de consultation jusqu’à 70 secondes sur 80 % des pages. Le résultat de l’étude est la direction de la courbe, pas sa position exacte, et c’est ainsi que nous la légendons.
• Le schéma en F dans la lecture des pages — Jakob Nielsen, « F-Shaped Pattern For Reading Web Content », Nielsen Norman Group, 2006. Étude oculométrique auprès de 232 personnes. Nous transportons la réserve des auteurs avec le résultat : c’est une forme approximative, pas un comportement au pixel près.
• Le rapport 1:30 entre une correction sur le croquis et une correction dans le code — nos propres tarifs et notre propre calcul, détaillés dans le texte sur les wireframes. Ce n’est pas un repère de marché.
• La validation de notre formulaire et le retard de l’indicateur de chargement — vérifiés dans le code de ce service le 16 septembre 2026, et non déclarés.
• Le rapport auquel mènent les « 9 400 % de retour » — Andrew Hogan, Deanna Laufer, « The Six Steps For Justifying Better UX », Forrester, 28 décembre 2016, prix 1 495 dollars. Le résumé public ne contient aucun chiffre de retour sur investissement.
• Ce qui n’est pas ici : la version précédente de ce texte annonçait 9 400 % de retour sur l’UX, une hausse de conversion de 200 % grâce à une bonne interface, l’affirmation que 75 % des utilisateurs jugent la crédibilité d’une entreprise à l’aspect de son site, des hausses de 25 %, 30 % et 35 %, et les 2,7 milliards de dollars qu’Amazon aurait gagnés en refondant son paiement. Aucun de ces chiffres n’avait de source ; ils ont été supprimés, pas corrigés.