Design UX, en e-commerce l'excellence n'est pas une option

Quand un client n'arrive pas au bout de sa commande, il ne se dit pas que « l'architecture de l'information manque de clarté ». Il se dit que le site ne marche pas.

Ce n'est pas une exagération. Dans l'enquête du Baymard Institute sur les raisons d'abandon de panier (hors simples curieux), 17 % des acheteurs déclarent être partis parce que « le site avait des erreurs ou avait planté ». Certaines étaient de vraies pannes. Beaucoup n'en étaient pas : un formulaire qui a effacé le numéro de carte après une faute de frappe, un message d'erreur affiché tout en haut de la page alors que le champ fautif se trouve tout en bas, une recherche qui ne trouve rien pour un produit que vous vendez bel et bien, une fenêtre modale impossible à fermer avec le pouce.

De votre côté de l'écran, c'est une décision de design. Du leur, c'est un bug. Et contrairement à un vrai bug, celui-ci ne remonte jamais dans vos outils de monitoring. Il ne se lit que dans une conversion qui s'érode en silence.

Avant d'aller plus loin : l'UX n'est pas l'UI

Une clarification s'impose, car les deux termes sont constamment confondus. L'UI, user interface, c'est ce que votre client voit : les couleurs, les boutons, la typographie, les espacements. L'UX, user experience, c'est ce qui lui arrive : est-ce qu'il trouve le produit, comprend la date de livraison, récupère d'une faute de frappe, et paie sans y penser. Une boutique peut avoir une superbe UI et une UX cassée : un checkout magnifique qui efface le numéro de carte reste un checkout cassé. Tout ce qui suit parle d'UX : pas de l'apparence de votre boutique, mais de son comportement quand un vrai client l'utilise, d'une seule main, pressé.

La meilleure erreur est celle qui n'arrive jamais

Les heuristiques d'utilisabilité de Jakob Nielsen ont trente ans et restent la grille de lecture la plus honnête du e-commerce. Deux d'entre elles pèsent plus lourd que les autres dès que de l'argent est en jeu :

• Empêcher l'erreur (heuristique n°5) : des contraintes, des valeurs par défaut, le bon clavier, une confirmation avant toute action destructrice.
• Si elle survient quand même, aider à s'en sortir (heuristique n°9) : un langage clair, le problème précisément identifié, une prochaine étape évidente.

Une bordure rouge sans texte échoue sur les deux tableaux. Un message Invalid input aussi. Et un checkout qui affiche « l'e-mail est obligatoire » à la milliseconde où l'on touche le champ revient, selon le NN/g, à corriger une copie avant que l'élève ait écrit le moindre mot.

Le benchmark checkout 2025 de Baymard devrait en finir avec l'idée que « les grands sites ont réglé la question » : 64 % des checkouts desktop et 63 % des checkouts mobiles des plus grandes boutiques américaines et européennes sont jugés médiocres, voire pires. Deux pour cent décrochent la mention « bon ». Aucun n'est parfait (Baymard).

À quoi ressemble une erreur vraiment utile

Prenons un code postal qui ne correspond pas à la ville saisie. La version paresseuse : une bannière rouge, « Adresse invalide ». La version utile : un message placé sous le champ, en français, qui propose une correction, « Ce code postal ne correspond pas à Lyon. Vouliez-vous dire 69001 (Lyon 1er) ? »

Ce n'est pas du raffinement cosmétique. C'est la règle d'efficacité du NN/g, complétée par le critère WCAG 3.3.3 (suggérer une correction lorsque le système la connaît). Concrètement :

• Affichez le message à côté du champ concerné, pas dans un bandeau à douze cents pixels de là.
• Combinez icône, bordure et texte. La couleur seule est invisible pour une part non négligeable de vos clients, et c'est un échec d'accessibilité assumé.
• Ne blamez personne. « Invalide », « illégal », « incorrect » donnent l'impression que le client a mal agi. C'est le système qui a refusé une saisie ; la phrase doit l'assumer.
• N'effacez jamais ce qui a déjà été saisi, y compris le numéro de carte après une erreur de CVV. Sinon, vous demandez au client de décider son achat une seconde fois.
• Validez à la sortie du champ (ou quand un code postal, un téléphone, un numéro de carte est complet), jamais pendant la frappe, jamais au premier clic.

Selon Baymard, 31 % des sites n'ont toujours aucune validation inline, et une partie des autres l'appliquent de manière si agressive que les testeurs ont cru avoir cassé la page. Trois détails font la différence : pas d'avertissement prématuré, l'erreur disparaît dès que la valeur devient correcte, et une petite coche verte sur les champs valides évite aux clients anxieux de relire tout le formulaire.

Si vous ne pouvez retravailler que cinq messages ce mois-ci, mesurez d'abord. Quelles erreurs de validation surviennent le plus souvent ? Lesquelles précèdent un abandon ? Commencez par celles-là. Baymard parle d'adaptive error messaging. Autrement dit : cessez de rédiger des messages pour des erreurs que personne ne rencontre.

Le paiement refusé est une espèce à part. Le client veut savoir s'il a été débité, si le stock lui est toujours réservé et ce qu'il peut tenter à la place. Un « Paiement échoué » suivi d'un bouton « Réessayer » qui tourne en boucle est le chemin le plus court entre une erreur d'UX et un chargeback.

Quand la boutique se tait, le client la croit plantée

La « visibilité de l'état du système » est l'heuristique n°1, et avant tout une règle de confiance. Un retour d'information prévisible est ce qui rend le prochain tap possible.

Quelques situations qui donnent l'impression d'une panne alors que le backend fonctionne très bien :

• Un « Ajouter au panier » sans badge, sans volet, sans notification : le client tape une deuxième fois et commande deux exemplaires.
• Un bouton « Payer » qui reste cliquable pendant que la banque réfléchit : le client tape deux fois, et vous créez une double autorisation.
• Un spinner sans timeout sur une redirection 3-D Secure. Au bout de quelques secondes, pour un pouce dans le tramway, c'est un gel.
• Un « Étape 2 sur 4 » qui fait surgir une création de compte ou un SMS imprévu.

Adaptez le signal à l'enjeu : une confirmation discrète pour un ajout au panier, un blocage uniquement quand l'utilisateur doit vraiment s'arrêter. Et quand la mise en page est connue, un skeleton screen vaudra toujours mieux qu'un spinner infini.

Votre menu est dans le mauvais coin de leur main

Steven Hoober a observé 1 333 personnes utiliser leur téléphone dans l'espace public. Presque la moitié le tenaient à une main ; la plupart des autres le calaient dans une paume tout en tapant avec le pouce. La prise change toutes les quelques secondes selon la tâche. Personne n'est assis à un bureau avec une souris.

Dans ces conditions, un menu hamburger en haut à gauche, une croix minuscule en haut à droite d'un popup plein écran ou un bouton principal masqué par un bandeau cookies ne sont pas une « version mobile » du site : ce sont des erreurs de portée. Les actions principales doivent se trouver là où le pouce se trouve déjà : navigation en bas d'écran, « Ajouter au panier » sticky et réellement atteignable, menu dans la zone du pouce plutôt que coincé contre la barre de statut.

L'équivalent desktop de cette idée, c'est la couleur d'accent. Une seule couleur doit signifier « voici l'action qui compte ». Si les filtres, les étiquettes, les liens secondaires et le bouton « Payer » partagent le même rouge, vos clients doivent lire l'interface au lieu de la reconnaître. Ce n'est plus de la charte graphique, c'est du camouflage.

Et depuis 2013, les écrans n'ont fait que s'allonger. Le haut de l'écran n'est pas devenu plus accessible.

Arrêtez de réinventer les champs de saisie

Le système d'exploitation sait déjà collecter un numéro de téléphone. type="tel" ouvre un pavé numérique, type="email" affiche l'arobase, et un sélecteur de date natif fera toujours mieux qu'un calendrier maison qui casse la saisie automatique. Bloquer le collage dans les champs de carte bancaire ne renforce pas votre conformité PCI : cela fabrique des fautes de frappe.

Même logique pour le nommage des champs. L'attribut HTML autocomplete est un contrat avec le navigateur : shipping street-address, shipping postal-code, email, tel. Renseigné correctement, il permet à Safari, Chrome et au gestionnaire de mots de passe de remplir l'adresse à la place du client. Le laisser vide, ou pire, imposer autocomplete="off" « pour la sécurité », revient à infliger une taxe de quarante secondes à chaque client qui revient. C'est d'ailleurs une exigence d'accessibilité (WCAG 1.3.5), pas une astuce de développeur.

Un cran au-dessus, la recherche d'adresse à la volée (la BAN ou La Poste en France, ou tout fournisseur sérieux) est la version aboutie de l'autocomplétion. Gardez simplement une saisie manuelle en secours pour les jours où l'API rame : un widget qui tourne indéfiniment, c'est encore « le site est cassé ».

Offrez une sortie de secours et un chemin pour revenir

Les gens tapent à côté en permanence. L'heuristique n°3 prévoit une sortie de secours clairement identifiable : annuler, cliquer en dehors, touche Échap, bouton de fermeture assez grand pour être visé.

La position du NN/g sur les modales est sans appel : réservez-les aux dégâts irréversibles ou aux informations sans lesquelles le parcours ne peut pas continuer. Jamais pour une newsletter, un upsell de cookies ou quoi que ce soit au milieu d'un checkout. Une modale dans le checkout est le moyen le plus sûr d'envoyer un client prêt à payer dans le labyrinthe du mot de passe oublié.

Sur mobile, surveillez aussi le défaut inverse : un doigt un peu large qui ferme par accident une fenêtre dont l'utilisateur avait besoin. Une confirmation destructive ne doit jamais se fermer au tap extérieur ; une modale sans enjeu doit pouvoir se fermer de trois façons (bouton, Échap, clic à l'extérieur). Si votre fenêtre « non modale » sur desktop devient un piège plein écran sur iPhone, vous n'avez pas un composant responsive. Vous avez une prise d'otage.

La reprise de parcours, c'est la même heuristique étirée dans le temps. Un panier doit survivre à la fermeture de l'onglet. Un checkout de douze champs ne doit pas se réinitialiser parce que le code postal a été refusé. Si le parcours est long, envoyez un magic link pour le reprendre. En e-commerce européen, le client interrompu en plein achat sur son téléphone n'est pas un cas limite : c'est le cas par défaut.

Quant à la commande en invité, ce n'est pas une option de confort : 18 % des acheteurs ont déjà abandonné parce qu'un compte était exigé, et 62 % des sites cachent encore le « Continuer en invité » sous un libellé « Nouveau client » (Baymard 2025). S'il faut le chercher, vous ne le proposez pas. Le compte, collectez-le après la commande, avec un magic link, pas comme un péage avant la vente.

Parlez comme quelqu'un qui attend un colis, pas comme un ERP

« Livraison sous 2 à 3 jours ouvrés » est une phrase écrite par la logistique. « Livré jeudi » est une phrase écrite pour un humain. Selon Baymard, près de la moitié des grandes boutiques laissent encore le client faire le calcul calendaire, jours fériés compris. Un compte à rebours (« commandez dans les 43 prochaines minutes pour être livré jeudi ») bat à plate couture un « commandez avant 11 h PST » que personne ne convertira depuis un fuseau horaire qui n'est pas le sien.

D'autres erreurs de vocabulaire, anodines en apparence, se comportent exactement comme des bugs :

• N'indiquer que les champs optionnels, ou que les obligatoires : 61 % des sites se trompent, et en test utilisateur, 32 % des participants oublient au moins un champ requis (souvent le téléphone) avant de se heurter au mur.
• Des règles de mot de passe dignes d'une banque centrale pour un compte de boutique : les règles trop strictes ont provoqué jusqu'à 19 % d'abandons chez des clients qui possédaient déjà un compte, et qui échouaient ensuite sur l'e-mail de réinitialisation. Six à huit caractères minimum et un magic link suffisent largement pour vendre des chaussures.
• Les fuites de back-office : SKU, 3PL, « fulfilment », « pré-autorisation », « challenge 3-D Secure ». Traduisez-les. « Nous vérifions votre carte maintenant, vous serez débité à l'expédition » est un message d'état. « RUM » n'en est pas un.

Le minimalisme est la même politesse appliquée à la structure. Baymard compte 23,48 éléments de formulaire sur le checkout américain moyen, contre un idéal de 12 à 14 (soit 7 à 8 vrais champs). Près d'un abandonnateur sur cinq juge le checkout trop long. La plupart des champs superflus n'ont jamais servi à expédier un colis.

S'ils ne le trouvent pas, vous ne le vendez pas

La recherche n'est pas un widget : pour un catalogue qu'on ne peut pas parcourir en quinze secondes, c'est la boutique. Une page « aucun résultat » qui se contente de hausser les épaules, c'est un rideau baissé, et environ la moitié des sites n'offrent toujours aucune porte de sortie. « Vérifiez l'orthographe » n'en est pas une : personne ne lit cette phrase. Des catégories proches, une requête élargie avec cinq aperçus produits, les articles récemment consultés, un numéro de téléphone, les meilleures ventes : voilà une sortie de secours.

Même logique pour une navigation bâtie sur vos noms d'entrepôt plutôt que sur les mots du client, et pour des recommandations aléatoires, ou légèrement déplacées. Le « récemment consulté » et le « souvent achetés ensemble » méritent leur place ; le « nous avons remarqué que vous regardiez des alliances », non.

Les listes, enfin, respectent le fait que le panier sert déjà de mémoire externe. Le NN/g a observé que les utilisateurs fuient tout ce qui s'appelle « Wishlist » (cela évoque une liste de mariage, donc du travail) et refusent tout ce qui exige un compte pour mettre un article de côté. « Enregistrer pour plus tard » : visible, sans connexion. Le bénéfice opérationnel est réel : une liste est une raison légitime d'écrire « ce produit sera bientôt en rupture », mais dans l'Union européenne, cet e-mail suppose toujours un consentement explicite. L'erreur d'UX et l'erreur RGPD se nichent souvent dans le même champ.

Dernière erreur, sans glamour : vos articles sont illisibles

Si vous publiez un blog, le mode lecture du navigateur est un test que votre markup passe ou échoue. De vrais titres hiérarchisés, un vrai titre de page, du texte qui reste du texte. Une page marketing composée d'images et de div échoue au mode lecture, aux technologies d'assistance, et aux lecteurs qui voulaient simplement garder l'article pour plus tard. C'est peu de chose à côté du checkout. C'est aussi une fuite de crédibilité.

Questions fréquentes

Auditez votre boutique comme un client : sur un téléphone, avec une faute de frappe

Ces erreurs-là, vous ne les verrez pas depuis le desktop du bureau, connecté en administrateur. Vous les verrez dans le tramway, en 4G, avec une lettre en trop dans le code postal et un bandeau cookies qui recouvre le bouton Payer.

Commencez par là, cette semaine : des messages d'erreur à côté des champs, des saisies qui conservent leurs valeurs, la commande en invité bien en évidence, les bons type et autocomplete sur chaque champ, une fermeture possible sur chaque fenêtre, une date de livraison à la place des « jours ouvrés », une page sans résultat qui propose une suite. Rien de tout cela n'exige un replatforming. L'essentiel tient même dans un seul sprint.

Les boutiques qui perdent le moins de clients ne sont pas celles qui ont le plus d'animations. Ce sont celles dont les erreurs ressemblent à des phrases, dont les boutons se trouvent là où le pouce est déjà, et dont les clients n'ont jamais à se demander si le site vient de planter.

Chez Saphes IT-Systems, nous auditons ce parcours exactement comme le vit un visiteur de passage : erreurs, états vides, recherche, checkout, jusqu'à la modale impossible à fermer que vous avez fini par ne plus voir, et nous corrigeons les défauts qui ont déjà des allures de bugs. Si vous voulez savoir lesquels de vos « choix de design » vos clients ont déjà rangés dans la catégorie des pannes, parlons-en.