Checkout : les champs de formulaire qui font fuir vos clients

Sept paniers sur dix sont abandonnés avant le paiement, et 18 % des acheteurs expliquent leur départ par une page de paiement "trop longue ou trop compliquée" (Baymard). Ce ne sont pas vos étapes qui donnent cette impression : ce sont vos champs (les cases à remplir du formulaire). Voici le mode d'emploi, case par case, pour alléger votre tunnel de commande et reprendre des ventes. Si vous voulez d'abord chiffrer l'enjeu côté pilotage, notre guide ROAS, MER et marge remet ces pertes en perspective business.

Le vrai problème : l'effort perçu, pas le nombre d'étapes

Baymard (un institut de recherche reconnu sur l'expérience d'achat en ligne) a tranché un vieux débat : le nombre d'étapes de votre page de paiement compte peu, c'est le nombre de champs à remplir qui dégrade l'expérience (Baymard, juin 2024). Le checkout moyen fait 5,1 étapes et 11,3 champs, alors que la plupart des sites n'ont besoin que de 7 à 8 champs réels pour encaisser une commande. Le reste, c'est de la friction (tout ce qui ralentit ou agace le client en route vers le paiement).

Le coût n'a rien de théorique : Expedia a dégagé 12 millions de dollars de profit annuel supplémentaire en supprimant une seule case facultative, "Société". Les clients la confondaient avec le nom de leur banque, ce qui faisait échouer la vérification de l'adresse liée à la carte et bloquait le paiement (cas documenté par le VP d'Expedia). Pour estimer ce qu'un point de conversion en plus rapporte chez vous, passez vos chiffres dans notre calculateur de ROAS et de rentabilité.

Les champs qui tuent : téléphone, deuxième adresse, double nom

Le téléphone obligatoire est le tueur numéro un. Dans l'étude Baymard menée sur 1 026 acheteurs, 14 % déclarent qu'ils ne donneraient jamais leur numéro à une boutique en ligne (Baymard, màj juillet 2025). Face à une case obligatoire sans la moindre raison affichée, les personnes testées saisissent un faux numéro ou quittent carrément la commande. Et pourtant, 39 % des sites le réclament sans un mot d'explication.

La deuxième ligne d'adresse (le champ "complément d'adresse", pour le bâtiment, l'étage ou le digicode) coince aussi quand elle est affichée d'emblée : 30 % des participants s'arrêtent dessus et se demandent s'ils n'ont pas mal rempli la première ligne. Le nom coupé en deux cases pose le même souci : 42 % des gens tapent leur nom complet dans la case "Prénom" au moins une fois, contre 4 % d'hésitation seulement avec une case unique "Nom complet". 89 % des sites gardent malgré tout deux cases. Quand vous demandez d'autres infos, soignez aussi les libellés de vos boutons et appels à l'action : un mot ambigu suffit à faire douter.

Les champs "par curiosité" finissent le travail : 27 % des acheteurs rechignent à donner leur date de naissance, 14 % leur civilité (Monsieur, Madame). Quant au champ code promo affiché en clair, Baymard a vu des testeurs quitter le site pour aller chercher un code sur Google, sans garantie qu'ils reviennent. Cachez-le derrière un simple lien "J'ai un code promo".

Les corrections qui paient : masquer, pré-remplir, valider en direct

Règle 1 : facturation identique à la livraison par défaut, avec les cases masquées (pas seulement pré-remplies). 24 % des sites affichent encore les deux blocs d'adresse d'office (Baymard), soit une série de champs entièrement redondante que le client doit traverser pour rien.

Règle 2 : l'adresse qui se complète toute seule (l'autocomplete : une seule case où le client tape le début de son adresse et choisit la bonne dans une liste de suggestions). Cette case unique remplace quatre à cinq champs et supprime les fautes de frappe. 55 % des sites ne la proposent toujours pas (Baymard).

Règle 3 : la vérification au fil de la saisie (la validation "inline" : chaque case est contrôlée dès que le client la quitte, plutôt que de tout signaler d'un coup au clic final). L'étude fondatrice mesurait +22 % de réussite et -42 % de temps de remplissage (A List Apart, sur un petit échantillon, donc à prendre comme une indication), et Baymard confirme la tendance à grande échelle : 31 % des sites ne contrôlent rien en direct. Pensez aussi à placer les libellés au-dessus des cases, jamais en texte gris à l'intérieur (le "placeholder", qui disparaît dès qu'on tape et oblige à deviner ce qu'on remplissait).

Règle 4 : repoussez la création de compte à après la confirmation de commande, où elle se résume à choisir un mot de passe. 84 % des sites imposent encore ce choix en plein milieu du paiement (Baymard).

Mobile : le mauvais clavier est un champ de plus

Sur mobile, chaque erreur coûte double : il faut repositionner le curseur, effacer, retaper sur un petit écran. La correction la moins chère en optimisation de conversion (le travail qui consiste à transformer plus de visiteurs en acheteurs), c'est d'afficher le bon clavier au bon moment. type="email" fait apparaître l'arobase, inputmode="numeric" ouvre le pavé de chiffres pour la carte et le code postal, autocomplete laisse le navigateur (Chrome, Safari) proposer le remplissage automatique des coordonnées déjà connues. Aucune refonte à prévoir : ce sont quelques réglages dans le code de la page. Le mobile, c'est aussi une affaire de vitesse, et notre article site lent et ventes perdues chiffre l'impact d'une page qui rame.

Ajoutez la carte scannable par l'appareil photo (disponible d'origine sur iPhone et Android, activée d'office sur le checkout Shopify) : le client cadre sa carte au lieu de saisir 16 chiffres à la main.

L'ordre des étapes : l'email d'abord, toujours

Demandez l'email en tout premier. La raison est purement mécanique : dès que l'email est saisi, Shopify enregistre un "panier abandonné" que vous pouvez relancer automatiquement par email (Shopify). Un client qui s'en va au champ 7 reste joignable si vous aviez son email au champ 1.

Le formulaire idéal suit donc cet ordre : email, nom complet, adresse qui se complète toute seule, téléphone facultatif et justifié, puis le paiement. Si la mise en place de ce tunnel allégé vous bloque, on peut prendre en main la construction de votre page de paiement de bout en bout. Ce que vous faites ensuite du panier abandonné (la relance, le rythme des emails) est détaillé dans notre article sur l'abandon de panier, et la première relance s'inscrit dans une bonne séquence email de bienvenue. Si le souci vient plutôt du paramétrage de votre boutique, notre guide des réglages Shopify passe en revue chaque case à cocher.

Divergences signalées : l'ancienne mesure Baymard parlait de 23,5 "éléments" de formulaire, la mesure 2024 retient 11,3 champs au sens strict. Les deux chiffres ne se contredisent pas : ils ne comptent simplement pas la même chose (libellés et interfaces inclus dans un cas, cases à remplir seules dans l'autre).