Blog Création de sites Ergonomie

Expliquez les champs de vos formulaires de paiement (92% sites ne le font pas)

Alexis Rylko

Alexis Rylko

Consultant SEO & Directeur technique SEO chez iProspect France

Ce billet est la traduction de l’article «Add Descriptions To Checkout Form Labels (92% Get It Wrong)» qui fait partie d’une série «most read par tous les webmarketeurs» de Baymard Institute.

Le fameux institut de recherche y partage les résultats de son énorme étude de l’ergonomie des formulaires de paiement passée en 2011 et d’une analyse comparative des 100 plus grosses boutiques e-commerce de l’année 2012.

En étudiant l’ergonomie des pages de paiement et de leurs versions mobiles, les analystes sont arrivés à la conclusion que la majorité absolue des utilisateurs ont du mal à comprendre la destination de certains champs de saisie.

Des fois, cette incapacité aboutit même au refus de faire un achat. Mais dans des cas moins critiques, le résultat est le mauvais format de saisie des données, parfois prémédité (quand l’utilisateur tape « non » et attend pour voir si le champ est validé), mais le plus souvent par hasard (interprétation erronée du nom d’un champ).

Si le nom d’un champ n’a pas de description complémentaire et l’utilisateur éprouve des difficultés, celui-ci irait choisir une des 4 actions possibles: essayer et réessayer plusieurs variantes, chercher la réponse dans « l’aide », s’adresser au service de support ou refuser de faire un achat en quittant le site.

La solution du problème est simple et elle figure dans le titre de l’article: ajoutez des descriptions aux champs de saisie sur votre page de paiement.

On pourrait penser que c’est élémentaire, mais d’après l’étude des 100 plus grosses boutiques e-commerce américaines, 92% de sites utilisent dans les champs de leurs formulaires des descriptions incorrectes. Autrement dit, très rares sont les sites qui accompagnent le visiteur tout le long de son parcours d’achat de formules précises et claires.

Le site d’Amazon ne fournit pas d’explications comment doit être un mot de passe. Ainsi les utilisateurs sont-ils obligés de supposer s’il y a la différence entre majuscules et minuscules, s’ils peuvent utiliser des chiffres etc.

On trouve des descriptions incorrectes un peu partout: sur les sites qui n’expliquent pas leurs règles de composition de mot de passe (voir l’exemple d’Amazon), comme sur ceux qui ne disent pas comment votre e-mail sera utilisé après. Sans oublier les sites qui ne se donnent pas de la peine pour déchiffrer ce que signifie «le code CVV2» ou aussi ceux qui ne donnent pas d’exemple du bon format de numéro de téléphone.

Dans cet article nous allons vous présenter les 15 «obstacles courantes» dans un parcours d’achat, que vous pouvez utiliser comme une check-list pour assurer la mise en place des bonnes descriptions de vos champs de saisie et aider ainsi vos clients.

Comprendre le problème (+ 15 «obstacles» pour l’utilisateur)

L’absence de descriptions pour les champs facultatifs ne mènera certainement pas au refus d’achat: tous les utilisateurs n’en ont pas besoin. Or, si le champ est important pour l’internaute, des descriptions absentes le vouent à une lutte pénible avec la forme accompagnée d’erreurs permanentes de validation, adresses à la page d’aide et au service de support. (Et quant aux champs obligatoires, les instructions peuvent assurer le remplissage correct du formulaire là où l’utilisateur en leur absence serait coincé).

Les descriptions des champs de saisie doivent donner les réponses aux questions les plus fréquemment posées, et notamment:

  1. Qu’est-ce qu’on me demande d’entrer?
  2. Dans quel format dois-je entrer l’information demandée?
  3. Où trouver cette information?
  4. Pourquoi avez-vous besoin de ces données?

1. Qu’est-ce qu’on me demande d’entrer?

Si l’utilisateur ne comprend pas le nom du champ de saisie ou doute de sa valeur, une description détaillée pourrait bien l’aider. Les obstacles les plus courants auxquels il se heurte sont: jargon technique, abbreviations et termes propres à un site concret ou à un domaine d’activité spécifique.

  • Code de sécurité de la carte de crédit. Tous les sites le nomment à leur manière, en recourant parfois aux abbreviations genre CVV2. A part les habitués des achats en ligne, personne ne comprendra le nom de ce champ, si l’emplacement du code sur la carte n’est pas précisé à côté.
  • Adresse 1 et adresse 2 — il n’est pas évident quelle partie de l’adresse convient à tel ou tel champ. Par exemple, où devrais-je entrer le numéro de l’appartement?
  • Termes d’un domaine spécifique — une erreur est de croire que les acheteurs maîtrisent la terminologie propre à votre secteur d’activité. Par exemple, pour commander un billet d’avion aux États-Unis, on peut vous demander un certain «Redress number». Les étrangers ou les gens qui prennent l’avion rarement risquent de ne pas en être au courant. (Redress Number  — numéro d’identification délivré au passager par le DHS (Department of Homeland Security) à la suite d’un refus antérieurement erroné de vol. Il permet de passer à l’enregistrement et l’embarquement sans rétention réitérée). D’autres exemples de termes spécialisés : «Banque émettrice» (Issuing bank), «Numéro de l’ordre d’achat» (Purchase Order#).
  • Abbreviations genre «M.I.» ou «QTY» peuvent embarrasser tout utilisateur surtout celui qui n’a pas l’anglais comme langue maternelle. La même chose si on vous demande de préciser le nom, par exemple de l’aéroport. L’internaute peut hésiter: devrait-il entrer le nom complet ou bien le sigle officiel.

2. Dans quel format dois-je entrer l’information demandée?

Faute de règles et d’exemples, les utilisateurs vont se heurter régulièrement aux erreurs de validation. Beaucoup de problèmes surgissent lors de la saisie des données n’ayant pas le seul standard de format. Par exemple, selon le contexte, les numéros de téléphone peuvent contenir des séparateurs et signes différents. Voyons quelques exemples :

  • Numéro de téléphone. Quel format utiliser : «(415)315-9567»,«415-315-9567», «415 315 9567» ou bien «4153159567»? Devrait-on entrer le code du pays? Chaque site doit accepter toutes les variantes possibles de saisie, mais en tant qu’exemple vous pouvez citer au moins une variante correcte.
  • Mot de passe — Quelles sont les exigences à respecter pour un mot de passe? Quel et le nombre de caractères minimum et maximum? Est-ce que tous les symboles sont autorisés? Le mot de passe, doit-il être une combinaison de lettres et de chiffres? Y-a-t il une différence entre les minuscules et majuscules?
  • Montant monétaire — En fonction du pays et du style de comptabilité admis, les montants monétaires peuvent inclure des séparateurs par dix ou par milliers. Un séparateur peut prendre la forme d’un point, d’une virgule ou d’un espace.
  • Numéro de la carte de crédit — Faut-il ajouter des espaces entre les chiffres comme c’est fait sur la carte? C’est étonnant, mais de nombreux sites ne valident pas les numéros avec des espaces, quoique justement ainsi ils soient présentés sur la carte de crédit.
  • Dates — En fonction du pays, les jours et les mois peuvent changer d’ordre (JJ-MM-AA ou MM-JJ-AA). De même, certains systèmes d’impression affichent la date dans un ordre inversé (AA-MM-JJ). Un ordre incorrect de saisie de la date peut être la cause des erreurs et des mauvais délais de livraison  (Nous vous recommandons d’utiliser les noms des mois au lieu de chiffres pour éviter toute ambiguïté. Quant à l’année, vous pouvez utiliser quatre chiffres ou la commencer par un signe d’apostrophe pour une clarté absolue.)

3. Où trouver cette information?

Souvent l’acheteur doit saisir des données qui sont imprimées sur une entité matérielle, comme une carte de crédit ou une lettre reçue par la poste. Dans ces cas-là, suggérer au client exactement où trouver ces données permet d’accélérer significativement le processus et de réduire le nombre d’entrées erronées. Parmi les exemples les plus courants on peut citer :

  • Code de sécurité de la carte de crédit  Les cartes de crédit ont des chiffres imprimés sur les deux faces, ce qui peut rendre difficile la tâche de recherche du code de sécurité, sauf si vous savez exactement ce qu’il faut chercher et où ceci se trouve. Pour rendre notre vie encore plus belle, des fabricants différents varient la longueur et l’emplacement du code de sécurité en fonction du type de carte.
  • Code promo  Si le client a reçu un coupon ou une carte-cadeau (ou un objet similaire), vous pouvez l’aider en indicant exactement où le code promo peut être retrouvé sur la carte.
  • Code d’identification  Beaucoup de boutiques utilisent des différents types d’identificateurs pour lier les achats off-line aux conversions en ligne (si le client vient acheter une marchandise après l’avoir trouvée sur votre site web). Ces identificateurs sont généralement imprimés sur les factures de services et les reçus en incluant les identifiants du compte, numéros de factures et codes sériels.

4. Pourquoi avez-vous besoin de ces données?

Même si le client sait quels renseignements lui sont demandés, dans quel format les entrer et où les trouver, il peut toujours se demander pourquoi vous en avez besoin. Prenons par exemple le champ de saisie de l’adresse e-mail: on comprend sans aucune ambiguïté ce qui est à saisir et comment, mais on peut toujours se poser la question comment vous allez utiliser son email après. N’allez-vous pas le bombarder ensuite de publicité? Ou bien le partager avec des tiers? Une description peut atténuer ces problèmes de confidentialité. Nos tests d’ergonomie ont montré que les utilisateurs sont prêts à entrer calmement tous les renseignements si on leur explique pourquoi ceux-ci sont nécessaires. D’autres exemples :

  • Date de naissance – Dans certains cas, pour assurer le respect des lois et des règlements, le site a le droit de demander la date de naissance du client. Cependant, elle est souvent considéré comme une partie très personnelle de l’information et en fonction de votre secteur d’activité, cela peut sembler impoli. Donc, au lieu de demander simplement la date de naissance, nous vous recommandons d’expliquer décemment comment vous allez l’utiliser et stocker.
  • Numéro de téléphone – Aujourd’hui les clients reçoivent un grand nombre d’appels automatiques et de spam. Donc le client va penser deux fois avant d’entrer son numéro de téléphone si vous n’avez pas expliqué pourquoi il est nécessaire. Si vous n’avez besoin du numéro de téléphone qu’à des fins de commande et de livraison, une petite description peut atténuer les problèmes de confidentialité du client.
  • Sauvegarde des données de la carte de crédit — Certains sites proposent de sauvegarder les données de la carte de crédit lors de l’inscription (parfois c’est une option facultative). Et ça c’est le bon moment pour initier l’utilisateur à vos conditions de sauvegarde des données personnelles. Si le site n’enregistre pas ces données, il serait judicieux d’en faire part aussi: beaucoup de sites les sauvegardent « silencieusement » et les utilisateurs ne peuvent l’apprendre que d’après un message sur le site (N.B. La majorité des utilisateurs saisissant leurs données persos sont réellement inquiétés par cette question).

3 façons d’afficher vos descriptions

Le contexte de votre description est crucial: il doit être au bon endroit et au bon moment. Mais en fonction du type de description nécessaire et du design de votre site, des différentes façons d’afficher ces descriptions peuvent être adoptées.

Il existe au moins trois façons courantes d’affichage de vos descriptions:

  1. description «inline»;
  2. info-bulles;
  3. descriptions dynamiques.

1. Description «inline»

Description «inline» est la meilleure façon de fournir des instructions simples et de montrer le bon format de saisie des données. Ces descriptions sont généralement placés près du nom du champ ou bien sous le champ de saisie et sont visibles en permanence à l’utilisateur. Ainsi, l’aide est toujours là où on en a besoin.


Pour que la forme n’ait pas l’air encombrant et surchargé, il est recommandé de rendre les descriptions moins accentuées (par exemple, en utilisant la couleur grise de la police). En outre, les instructions doivent être nettes et laconiques.

2. Info-bulles

Les info-bulles sont une très bonne solution pour cacher des descriptions détaillées jusqu’à ce qu’ils soient nécessaires à l’utilisateur. Les info-bulles prennent souvent la forme d’une icône de point d’interrogation ou un d’un lien «savoir plus» et peuvent généralement être activées par un clic de souris ou un passage du curseur dessus (n’oubliez pas de fournir une solution appropriée pour les appareils tactiles n’ayant pas de curseur).

Les info-bulles sont un choix idéal lorsque vous devez expliquer en détails comment les renseignements saisies seront utilisés, pourquoi vous en avez besoin, et ou le client peut trouver l’information demandée.

3. Descriptions dynamiques

Si vous souhaitez garder propre le design de votre formulaire, au lieu d’utiliser des descriptions «inline», vous pouvez recourir à une approche dynamique et n’afficher la description que si l’utilisateur se met à entrer le texte dans le champ correspondant.

Twitter nous en montre un bon exemple. Sur la page d’inscription les exigences du mot de passe n’apparaissent que quand le champ de son saisie est actif.

Le formatage du numéro de téléphone sur le site de Kohl’s s’effectue automatiquement au fur et à mesure que l’utilisateur fait une entrée. Ainsi, toute possibilité d’une erreur est réduite à zéro.

Faites attention que les formats de numéros de téléphone peuvent varier en fonction du pays. Donc, dans chaque cas particulier guidez-vous par votre public ciblé et les standards de saisie locaux.

Les descriptions courtes et les exemples peuvent prendre la forme de texte-modèle à l’interieur des champs. Leur seul défaut est la disparition une fois l’utilisateur clique sur le champ. Cette approche n’est à utiliser que pour les champs de second rang, sinon il est facile de tomber dans le piège d’une simplicité apparente.

Conclusion

Dans cet article nous avons vu beaucoup d’exemples de noms de champs de saisie capables de tromper tout acheteur en ligne. Nous avons énuméré les 15 «obstacles» les plus courantes dans un parcours d’achat de l’utilisateur qui remplit le formulaire de paiement et les methodes de leur élimination au moyen des aides textuelles. Et enfin, nous avons pris connaissance des 3 façons courantes d’implementation de descriptions sur votre site.

Les descriptions des champs de formulaires ne sont certainement pas la chose la plus passionnante dans le monde, mais on ne doit jamais sous-estimer leur importance: ces textes ultra-courts d’aide contextuelle peuvent éclaircir l’ambiguïté, se rassurer que le client ne se sente pas coincé, et sauver votre service de support client des attaques incessantes des mêmes questions.

En demandant correctement les informations nécessaires, en montrant dans quel format ceux-ci doivent être entrées, en expliquant où l’utilisateur peut les retrouver et pourquoi vous en avez besoin, ces descriptions peuvent répondre à toutes les questions du client au bon endroit et au bon moment.

Auteur: Jamie Appleseed.

Encore une fois le lien vers l’original: http://baymard.com/blog/checkout-form-field-descriptions

Alexis Rylko

Article de :

Alexis Rylko

Consultant SEO depuis 2009 & Directeur technique SEO chez iProspect France, formateur SEO, conférencier, éditeur de sites & développeur d’outils SEO.
🏆 Jeune personnalité Search de l'année 2022 (SEMY Awards)
🏆 Prix de la "Meilleure campagne SEO 2023" (SEMY Awards).

13 réflexions au sujet de “Expliquez les champs de vos formulaires de paiement (92% sites ne le font pas)”

  1. Le nombre de fois ou je tombe sur un formulaire sans precisions. mais les precisions sont en fait presentent. Oui apres la validation, on voit un message qui dit la cause de l’erreur…

    Répondre
  2. Il est de plsu en plus nécessaire de mettre un maximum d’informations autour des données demandées à nos utilisateurs.
    Soit pour qu’ils comprennent mieux l’utilisation du service qu’on s’apprête à leur rendre, soit parce qu’ils sont devenus méfiants.
    Y aurait il des données d’améliorations de taux de conversions et/ou de remplissage de formulaires si on indique des compléments d’informations?

    Répondre
  3. Tout le monde déteste remplir le même formulaire à plusieurs reprises, et on ça fait du bien d’être assisté afin qu’on ait pas à faire d’erreur. En plus, c’est facile à programmer, et à intégrer dans un site web, je crois que dans les prochaines années cela deviendrait une norme.

    Répondre
  4. Le pire c’est quand les précisions sont apportées après avoir validé, il faut souvent recommencer le remplissage. La bonne technique pour faire fuir le client !

    Répondre
  5. Tout le monde déteste remplir le même formulaire à plusieurs reprises, et on ça fait du bien d’être assisté afin qu’on ait pas à faire d’erreur

    Répondre
  6. Il faut aussi penser à donner de bonnes explications ! J’ai déjà vu des formulaires où l’explication faisait 5 lignes et incompréhensible… Bref, y’a encore du boulot pour certains…

    Répondre
  7. Bonsoir,
    Très bon article, il faudrait effectivement que les formulaires s’améliorent afin de gagner en crédibilité et en facilitée auprès de client souvent perdu et impatient
    bonne soirée
    anne

    Répondre
  8. En tout cas, plus il y a d’information pour aider nos visiteurs mieux le visiteur des sites internet ne sera perdu. Il s’agit simplement d’avoir un peu de bon à mon avis.

    Répondre
  9. Plus il y a d’information AFFICHEE, moins la plupart des gens les lisent…

    Je pense qu’il faut tout de même rester concis, et n’afficher toutes les infos complémentaires que dans des « info-bulles », popup ou autres, afin de ne pas surcharger visuellement le formulaire…

    Répondre
  10. Bonjour
    bon alors moi je pense que quand on à l’habitude cela ne pose pas trop de problème par contre il est vrai que certains formulaires son assez hard. Parfois je tombe sur des clients qui n’ont aucune notion informatique et la ce n’est pas de tarte !
    Christ

    Répondre
  11. Un article qui tombe à point!!! Il y a quelques jours j’ai essayé de payer sur un site d’électro et il y a avait un formulaire d’inscription/paiement. Le formulaire était tellement mal fait : aucune explication, manque de précision etc qu’à chaque fois que je le validais j’avais un message d’erreur. Au bout de la 4ème tentative, j’ai abandonné.

    Je pense que beaucoup de sites devrait s’inspirer de votre article qui est fort réussi.

    Répondre
  12. Rien de plus enervant que de recommancer a remplir le formulaire . La cerise sur le gateau ce sont les captcha illisible a inscrire qui une fois sur 2 ne fonctioone pas .

    Répondre

Répondre à Dreyer Annuler la réponse