Chapitre 8.19UX et UI

Deux sigles reviennent en boucle dès qu'on parle d'un écran, l'UX et l'UI. On les emploie souvent comme synonymes, parfois dans la même phrase, alors qu'ils désignent deux métiers différents, avec des méthodes différentes et des livrables différents.

Ce chapitre remet chacun à sa place, et surtout te donne de quoi travailler utilement avec les personnes qui exercent ces métiers.

L'UX, l'expérience vécue

L'UX, pour User Experience, désigne l'expérience globale de la personne qui utilise ton produit. Le parcours d'achat est-il fluide ? Trouve-t-elle ce qu'elle cherche ? Comprend-elle sans réfléchir comment revenir en arrière ? Sait-elle ce qui vient de se passer quand elle clique ?

L'UX ne se limite pas à ce qui s'affiche. Elle englobe le temps de chargement, la clarté d'un message d'erreur, le nombre d'étapes pour finaliser une commande, le contenu de l'email de confirmation, et jusqu'à la façon dont on résilie. Un site magnifique qui met huit secondes à s'afficher a une mauvaise UX, quoi qu'en dise la maquette.

Le terme vient d'ailleurs de bien plus loin que le web. Il a été popularisé dans les années 1990 par Don Norman, chercheur en sciences cognitives passé chez Apple, qui étudiait aussi bien des portes et des théières que des logiciels. Son idée centrale tient en une phrase, quand quelqu'un se trompe en utilisant un objet, c'est presque toujours l'objet qui est mal conçu.

L'UI, l'interface concrète

L'UI, pour User Interface, c'est l'interface elle-même. Les couleurs, les typographies, les boutons, les espacements, les icônes, les animations. Ce que l'utilisateur voit et touche.

Un bon travail d'UI ne consiste pas à faire joli, mais à rendre l'interface lisible et prévisible. Un bouton doit ressembler à un bouton, l'action principale doit sauter aux yeux, et deux éléments qui font la même chose doivent se ressembler d'un écran à l'autre.

En résumé, l'UX décide que le bouton d'achat doit être atteignable sans faire défiler la page et en un seul clic. L'UI décide que ce bouton est vert, arrondi, et porte le texte "Ajouter au panier".

Le design system

Sur un produit qui dure, l'UI finit par se formaliser dans un design system, un ensemble de composants réutilisables accompagnés de leurs règles d'usage. Boutons, champs de formulaire, cartes, fenêtres modales, messages d'alerte, chacun décliné dans ses différents états.

Ce n'est pas un caprice d'esthète, c'est un outil d'industrialisation. Sans lui, chaque nouvel écran réinvente son bouton, on se retrouve avec onze nuances de vert et quatre façons d'afficher une erreur, et chaque modification doit être répétée partout. Avec lui, une correction se fait une fois et se propage seule.

Comment on travaille, concrètement

Le travail de conception suit une progression assez stable, du plus flou au plus précis. Connaître ces étapes évite de demander la mauvaise chose au mauvais moment.

• La recherche : comprendre à qui l'on s'adresse et ce que ces gens font vraiment. Entretiens, observation, analyse des demandes reçues par le support, lecture des données d'usage.
• Le zonage : des schémas volontairement moches, en gris, qui posent la structure d'un écran sans parler de couleurs. C'est le moment où le débat porte sur le contenu et la hiérarchie, et il est très sain qu'il ne porte que sur ça.
• La maquette : l'écran tel qu'il sera, avec ses couleurs et sa typographie. L'outil de référence du métier est Figma, qui permet de construire ces maquettes et de les rendre cliquables.
• Le prototype : un enchaînement d'écrans qu'on peut parcourir comme un vrai produit, sans une ligne de code, pour faire tester un parcours avant de le construire.
• Le test utilisateur : on regarde quelqu'un se débrouiller avec le prototype, sans jamais l'aider. C'est l'étape la plus rentable de toutes, et la plus souvent sacrifiée.

Le test utilisateur, cinq personnes suffisent

Contrairement aux tests A/B, qui exigent des milliers de visiteurs, le test utilisateur se pratique sur une poignée de personnes. La règle communément admise, popularisée par Jakob Nielsen, veut qu'environ cinq utilisateurs suffisent à révéler l'essentiel des problèmes majeurs d'une interface.

Les deux méthodes ne s'opposent pas, elles répondent à des questions différentes. Le test A/B dit laquelle des deux versions gagne, sans jamais dire pourquoi. Le test utilisateur dit pourquoi, sans jamais prouver que c'est généralisable. On observe d'abord pour comprendre, on mesure ensuite pour trancher.

Le plus difficile dans un test utilisateur, c'est de se taire. Dès qu'on explique, on n'apprend plus rien. L'inconfort ressenti en regardant quelqu'un chercher pendant trois minutes un bouton qu'on trouvait évident vaut tous les rapports du monde.

Le tactile change les règles

Un détail que les maquettes oublient volontiers. Une souris pointe un pixel, un doigt couvre une surface d'environ un centimètre. Les zones cliquables doivent donc être nettement plus grandes sur mobile, et suffisamment espacées pour qu'on ne déclenche pas "Supprimer" en visant "Modifier".

Il n'y a pas non plus de survol sur un écran tactile. Toute information qui n'apparaît qu'au passage de la souris est purement et simplement inaccessible au doigt. Même remarque pour le bas de l'écran, atteignable au pouce, et le haut, qui demande de changer de main. C'est un point commun avec l' accessibilité, où les mêmes négligences pénalisent les mêmes personnes, et avec le responsive design, qui adapte la mise en page à la place disponible.

Les dark patterns, quand le design manipule

Tout ce travail n'est malheureusement pas toujours bienveillant. Les dark patterns, ou interfaces trompeuses, sont des choix de conception délibérés visant à pousser quelqu'un vers une action qu'il ne voulait pas faire.

• Le bouton caché : "Accepter tous les cookies" est gros, coloré, centré. "Refuser" est gris clair, écrit petit, relégué en bas.
• L'abonnement piège : deux clics pour s'inscrire, et pour résilier une page introuvable, trois confirmations et parfois un appel téléphonique.
• La fausse urgence : "Plus que 2 en stock" ou "3 personnes regardent ce produit" quand ces chiffres sont générés au hasard.
• La case pré-cochée : "Oui, je souhaite recevoir les offres de nos partenaires", déjà cochée, en espérant que tu passes à côté.
• La confirmation culpabilisante : le bouton de refus rédigé sous la forme "Non merci, je préfère payer plein tarif".
• Les frais qui apparaissent à la fin : un prix attractif pendant tout le parcours, et des frais obligatoires révélés à l'écran de paiement.

L'Union européenne s'est saisie du sujet. Le Digital Services Act interdit explicitement aux plateformes en ligne les interfaces conçues pour tromper ou manipuler les utilisateurs. Sur le volet consentement, le RGPD est encore plus ancien et plus net, un consentement doit être libre et donné par un acte positif, ce qui rend la case pré-cochée illégale depuis des années. L'écart entre le texte et la réalité des bandeaux que tu croises chaque jour te donnera une idée de la difficulté à faire appliquer tout ça.

Ces pratiques fonctionnent à court terme, c'est bien le problème. Elles font grimper un taux de conversion dans un tableau de bord, pendant que le taux de résiliation, les demandes au support et les avis négatifs montent ailleurs. C'est exactement le piège de l'indicateur choisi trop court décrit dans le chapitre sur les tests A/B.

Ce que ça change pour toi

Tu n'as pas à devenir designer. En revanche, la qualité de ce que tu recevras dépend beaucoup de la façon dont tu travailles avec ces personnes.

• Décris un problème, pas une solution : "les gens abandonnent au moment de choisir la livraison" ouvre le champ. "Mets une liste déroulante ici" le referme, et prive l'équipe de son métier.
• Fournis le vrai contenu : une maquette remplie de faux textes bien calibrés cache la moitié des problèmes. Les vrais noms de produits sont trop longs, les vraies descriptions sont vides, les vraies photos sont de travers.
• Demande les cas moches : l'écran vide du premier jour, la liste à trois cents lignes, l'erreur de paiement, le nom de famille à quarante caractères. Un design ne vaut que par ce qu'il prévoit d'imprévu.
• Accepte de faire tester tôt : corriger un parcours sur une maquette coûte une heure, le corriger après développement coûte des semaines.

De mon expérience, les meilleures décisions de conception ne viennent presque jamais de l'intuition ni du goût de la personne la mieux payée de la salle. Elles viennent de l'observation, et elles sont souvent beaucoup moins spectaculaires que ce qu'on avait imaginé en réunion.