Cinq obstacles présents sur presque tous les sites

Au bout d’un certain nombre d’audits, des motifs se dégagent. Ces cinq-là apparaissent sur des sites de toutes tailles, dans tous les marchés et toutes les langues où nous travaillons. Aucun n’est exotique, aucun n’exige de reconstruire quoi que ce soit.

Ce ne sont pas non plus nos intuitions. Chacun est documenté par la recherche publiée en utilisabilité, et nous indiquons les sources en fin d’article. Ce que nos audits apportent, ce n’est pas la découverte du problème, c’est de savoir lequel est sur votre site, et à quelle étape.

1. Un bouton nommé d’après le mécanisme, pas le résultat

Valider. Envoyer. Confirmer. Continuer. Chacun décrit ce que fait le logiciel. Aucun ne décrit ce que le visiteur obtient. Les testeurs s’arrêtent devant ces boutons et disent toujours la même chose : qu’est-ce qui se passe si je clique, et est-ce que je peux revenir ?

Le phénomène porte un nom dans la littérature, l’hésitation au clic, et il est observé depuis les premières campagnes de test de Baymard, où trois participants sur dix se méprenaient sur un bouton simplement libellé Continuer. Continuer mes achats, ou continuer vers le paiement ? Quinze ans plus tard, les recommandations n’ont pas changé : le bouton principal doit annoncer l’écran suivant, pas l’opération technique.

Le correctif. Nommez le bouton d’après son résultat. Aller au paiement. Voir le récapitulatif. Envoyer ma demande. L’hésitation disparaît, et elle disparaît d’autant plus utilement que le visiteur approche du paiement, le moment où elle coûte le plus cher.

Cas voisin, à vérifier en même temps : les boutons Appliquer placés à côté d’un champ, pour un code promo ou un calcul de livraison. Les tests montrent que les visiteurs les confondent avec le bouton principal, et que ni un style différent ni un autre libellé ne règlent le problème. La seule solution qui fonctionne est de supprimer le bouton et d’enregistrer la saisie automatiquement.

2. Un message d’erreur qui accuse sans expliquer

Saisie invalide. Quelle saisie, et invalide comment ? Un visiteur qui ne voit pas ce qui cloche recommencera à l’identique, puis partira.

C’est l’une des dix heuristiques de Nielsen (1994), et probablement la plus violée de toutes : un message d’erreur doit être formulé en langage clair, désigner précisément le problème et suggérer une sortie. Saisie invalide échoue sur les trois points.

Le correctif. Dire ce qui était attendu. Le code postal doit compter cinq chiffres ne coûte rien et met fin à la boucle. Trois règles vont avec.

• Placez le message au niveau du champ concerné, pas en haut de page. Sur mobile, un bandeau d’erreur en tête d’un formulaire long est purement et simplement invisible.
• Validez à la sortie du champ, pas seulement à la soumission. Le visiteur corrige pendant qu’il a le contexte en tête.
• Ne videz jamais les champs déjà remplis. Une erreur qui efface le formulaire ne se pardonne pas.

3. Un champ obligatoire sans raison affichée

Tout champ auquel le visiteur ne s’attendait pas éveille la méfiance, et la méfiance au moment de payer coûte cher.

Le champ téléphone est le cas d’école, et il est chiffré.

Il ne s’agit pas d’une aversion au champ lui-même. Ceux qui n’abandonnent pas saisissent souvent un numéro fictif, ce qui vous coûte deux fois : la donnée est fausse et la confiance est entamée.

Le correctif, par ordre de préférence.

1. Supprimez le champ si le service client peut fonctionner par courriel.
2. Rendez-le explicitement facultatif si vous ne l’utilisez qu’occasionnellement.
3. Sinon, justifiez-le à côté du champ : pour les questions du livreur uniquement. Une ligne de texte transforme une intrusion en service.

Et pendant que vous y êtes, comptez vos champs. Baymard mesure une moyenne de 14,88 champs de saisie sur un tunnel de commande classique, là où sept suffisent dans une implémentation optimisée. Chaque champ retiré est un obstacle retiré, sans arbitrage.

4. Un prix qui n’est définitif qu’au dernier écran

Traité en détail dans notre article sur les paniers abandonnés, et pourtant toujours en tête des motifs d’abandon sur lesquels vous pouvez agir.

Cette précision compte, et beaucoup d’articles la sautent. Le motif le plus fréquent, toutes causes confondues, est « je regardais seulement », soit plus de quatre abandons sur dix, et il n’y a rien à corriger là-dedans.

En France et dans l’Union européenne, la question ne porte pas sur la TVA, puisque les prix affichés au consommateur sont TTC par obligation légale. Elle porte sur tout le reste : frais de port, frais de préparation, supplément pour un mode de livraison présélectionné, majoration selon le moyen de paiement.

Le correctif. Quel que soit le total réel, le visiteur devrait le rencontrer avant d’investir dix minutes à l’atteindre. Le montant complet, frais inclus, doit être visible avant qu’on demande des coordonnées bancaires. Si vous ne pouvez pas donner un total exact parce que la livraison varie selon l’adresse, donnez une estimation et dites comment elle est calculée. Une fourchette annoncée tôt fait moins de dégâts qu’une surprise annoncée tard.

5. Un clavier mobile qui recouvre le champ en cours de saisie

Celui-ci est invisible depuis un poste de travail. Sur un téléphone, le clavier occupe la moitié de l’écran, et sur certaines mises en page le champ qu’il vient d’ouvrir se retrouve derrière lui. Le visiteur tape à l’aveugle, ne voit pas le message d’erreur qui s’affiche au-dessus, et abandonne.

Ce n’est ni rare ni théorique. Baymard décrit exactement ce scénario sur l’étape de choix du compte, où l’option de commande sans inscription, placée en bas de page, disparaît entièrement derrière le clavier dès que le visiteur touche le champ courriel. Le visiteur en conclut qu’il faut créer un compte, et repart.

Deux causes techniques, presque toujours : une barre d’action collée en bas de l’écran en position: fixed qui ne tient pas compte du clavier, et une mise en page calculée sur la hauteur totale de la fenêtre plutôt que sur la zone réellement visible. L’API visualViewport et la propriété scroll-padding règlent l’essentiel.

Un mot sur les normes, pour être exact. Le critère d’accessibilité qui traite du sujet (WCAG 2.2, critère 2.4.11 Focus Not Obscured, niveau AA) vise le contenu ajouté par le site, comme les bandeaux collants, les fenêtres de témoins ou les widgets de discussion, et non le clavier système lui-même. Mais dans la pratique c’est presque toujours la combinaison des deux qui masque le champ, et un site conforme au 2.4.11 est déjà largement immunisé.

C’est un problème d’affichage, pas de conception, et il se trouve en dix secondes par quiconque tient réellement un téléphone.

Ce que dit cette liste

Aucun de ces points n’appelle une nouvelle identité visuelle, une nouvelle agence ou une nouvelle plateforme. Aucun ne demande plus d’une demi-journée de travail. Ils appellent seulement quelqu’un pour les remarquer, ce qui est plus difficile qu’il n’y paraît quand on a construit le site soi-même et qu’on sait déjà où tout se trouve.

Vous ne pouvez pas relire votre propre interface avec des yeux neufs, pour la même raison qu’on ne relit pas ses propres fautes de frappe : vous lisez ce que vous vouliez écrire.

C’est toute la valeur d’un inconnu. Il ne sait pas, et il vous montre donc ce que ne pas savoir vous coûte.

Sources

Toutes les données chiffrées ci-dessus proviennent du Baymard Institute ou d’une référence professionnelle et normative. Aucun agrégateur de statistiques, aucun blog de prestataire. Baymard est un organisme de recherche indépendant spécialisé dans l’utilisabilité du commerce en ligne, fondé en 2009 ; ses conclusions reposent sur des tests d’utilisabilité modérés en tête-à-tête et sur une base de référence de sites évalués manuellement.

Recherche primaire en utilisabilité e-commerce

• UI: Getting the Details Right. L’ambiguïté du libellé Continue, et les trois participants sur dix.
• Checkout UX: Avoid "Apply" Buttons. Le cas voisin des boutons collés à un champ.
• Explain Why the "Phone Field" Is Required. 14 % d’abandon sans explication, 39 % des sites n’en fournissent pas.
• Ecommerce Checkout UX Guide. Les 14,88 champs mesurés, contre sept dans une implémentation optimisée.
• Reasons for Cart Abandonment. La part « je regardais seulement » et le reste corrigeable.
• How to Reduce Cart Abandonment. Frais additionnels 39 %, livraison lente 21 %, création de compte obligatoire 19 %.
• Make "Guest Checkout" Prominent. L’option invité masquée par le clavier mobile.

Références professionnelles et normatives

• Nielsen, J., 10 Usability Heuristics for User Interface Design, Nielsen Norman Group, 1994, révisé en 2020. Heuristique n° 9, aider à reconnaître et corriger les erreurs.
• W3C, Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum), WCAG 2.2.

Chiffres vérifiés en août 2026. Les pourcentages de motifs d’abandon proviennent d’enquêtes quantitatives menées auprès d’acheteurs américains, calculés après exclusion des répondants déclarant « je regardais seulement ». Ils sont à lire comme des ordres de grandeur sectoriels, non comme des valeurs applicables telles quelles à un site donné.