Un formulaire de carte de crédit est un moment très difficile dans le [processus de paiement] en ligne (https://stripe.com/resources/more/ecommerce-checkout-best-practices). Le formulaire demande aux clients de faire une pause, de retirer un objet physique et de faire confiance à une entreprise avec des informations financières sensibles, tout en essayant de ne pas faire d’erreurs lorsqu'ils saisissent une longue chaîne de chiffres sur leur ordinateur ou leur appareil mobile. Cela fait de la conception de l'interface utilisateur (UI) de paiement par carte de crédit l'une des parties les plus importantes du processus d'achat. Étant donné que les transactions par carte de crédit mondiales devraient passer de 16,06 billions de dollars en 2023 à 20 000 milliards de dollars d'ici 2029, il est essentiel que les entreprises fassent les choses correctement.

Ci-dessous, nous expliquerons comment concevoir un formulaire de carte qui soit rapide, clair et fiable.

Que contient cet article?

• Quels sont les éléments clés d'une interface utilisateur de paiement par carte de crédit?
  
• Comment rendre les formulaires de carte de crédit faciles, rapides et fonctionnels?
  
• Comment devriez-vous gérer les messages d'erreur et la validation des entrées pour les cartes de crédit?
  

Quels sont les éléments clés d’une interface utilisateur de paiement par carte de crédit?

Un formulaire de carte bien conçu ne comprend que ce qui est nécessaire pour effectuer un paiement. Voici ce que chaque interface utilisateur de paiement par carte de crédit devrait inclure et pourquoi chaque élément est important :

• Champ de numéro de carte : Acceptez tous les principaux types de cartes et détectez automatiquement la marque en tant que type d’utilisateur, en fonction des premiers chiffres. Affichez le logo de la carte pertinente parce que de petits éléments visuels familiers tels que l’icône Visa ou Canadian Express peuvent aider à rassurer les utilisateurs quant à leur acceptation du type de carte.

• _Date d’expiration : _ L’entrée doit être au format MM/AA. Insérez automatiquement la barre oblique après les deux premiers chiffres. Ignorez les menus déroulants mois/année, car ils ralentissent le processus. Les indices de formatage (p. ex., un espace réservé portant la mention « MM/AA ») peuvent réduire les erreurs.

• Code de sécurité ou valeur de vérification de la carte (CVV) : Étiquetez le code en langage clair (« Code de sécurité ») au lieu de vous fier à des acronymes. Ajoutez une icône d’aide subtile qui indique où trouver le code sur la carte. Ceci est particulièrement utile pour les utilisateurs dont le code n’est pas à l’endroit habituel à l’arrière.

• Nom du titulaire de la carte : Utilisez une étiquette telle que « Nom sur la carte » et n’imposez pas de formatage trop strict. Certaines équipes mettent automatiquement ce champ en majuscule.

• Code postal de facturation : Ne demandez pas l’adresse de facturation complète sauf si vous en avez besoin. Incluez un champ de code postal uniquement s’il est nécessaire pour les vérifications du service de vérification d’adresse (AVS). Gardez la mise en forme suffisamment large pour prendre en charge différents types de codes postaux internationaux.

• Bouton Pay : Rendez-le évident. Utilisez une étiquette audacieuse et tournée vers l’action, comme « Payer maintenant » ou « Valider la commande ». Ajoutez une icône de verrouillage sur le bouton pour signaler que la page est sécurisée.

Comment rendre les formulaires de carte de crédit faciles, rapides et fonctionnels?

Un bon formulaire de carte anticipe ce que l'utilisateur essaie de faire et facilite la tâche au fur et à mesure. De la mise en forme des entrées à la préservation du contexte, tels sont les principes qui sous-tendent un écran de paiement qui fonctionne.

• Se limiter aux informations clés : Ignorez tout champ qui n’est pas strictement nécessaire. Si vous n’avez pas besoin de l’adresse de facturation complète, ne la demandez pas. Si vous avez collecté l’adresse de livraison, offrez une case à cocher « Facturation identique à l’expédition » (faire une pré-vérification).

• Tirer le meilleur parti du remplissage automatique et des fonctions intelligentes : Les navigateurs et les appareils peuvent faire une partie des tâches lourdes. Avec un mobile, prendre en charge la numérisation de cartes par caméra dans la mesure du possible. Concevez vos champs de manière à ce qu'ils fonctionnent avec le remplissage automatique intégré pour améliorer la vitesse sans modifier l’interface utilisateur. Utilisez des outils tels que Link by Stripe pour permettre aux clients réguliers de sélectionner les informations de leur carte sauvegardée. S'ils ont déjà utilisé le formulaire, souvenez-vous de leurs préférences. Les valeurs par défaut intelligentes donnent de l’élan au flux de paiement.

• Le formulaire doit guider l’utilisateur au moment où il tapez :__ Le formatage des entrées est une question de facilité d’utilisation et de prévention des erreurs. Regroupez automatiquement le numéro de carte en morceaux lisibles (p. ex.1111 2222 3333 4444) pour que l’utilisateur puisse vérifier en un coup d'œil. Prise en charge de la mise en forme spécifique des cartes: les cartes Canadian Express, par exemple, suivent un modèle 4-6-5, et l’interface utilisateur devrait s’adapter. Exécutez une vérification Luhn pendant que l’utilisateur est en train de taper pour détecter les erreurs évidentes avant d’appuyer sur « Soumettre ».

• _Minimiser l'effort entre les champs : _ Les transitions entre les champs doivent être invisibles. Faites avancer automatiquement le curseur lorsqu’un champ est rempli, par exemple, de MM à AA à la date d’expiration. Insérez automatiquement les séparateurs, tels que la barre oblique en MM/AA. Cela supprime un autre point d’hésitation ou d’erreur.

• _Ajouter des signaux de confiance subtils : _ Vous voulez que les utilisateurs se sentent en sécurité en saisissant leurs informations de paiement. Ajoutez des indices visuels subtils tels qu’une icône de cadenas ou une courte ligne de copie indiquant que le paiement est sécurisé. Assurez-vous que l’interface utilisateur ressemble au reste de votre site. Un style hors marque peut créer des doutes. Évitez de rediriger des utilisateurs sans contexte. Si une redirection est nécessaire pour une vérification de la fraude, expliquez-en avant qu’elle ne se produise.

• Concevez en pensant aux mobiles dès le départ : La plupart des gens préfèrent maintenant les téléphones mobiles pour faire des achats en ligne. Votre formulaire doit être conçu pour les pouces. Utilisez des types de saisie numérique pour les champs numériques afin que le clavier approprié s’affiche sur le mobile. Gardez la mise en page simple : une seule colonne, pas de fenêtres contextuelles, pas de liste déroulante difficile à toucher. Évitez les widgets tels que les sélecteurs de date de calendrier pour les champs d’expiration qui ne fonctionnent pas bien sur les petits écrans.

Au mieux, un formulaire de carte de crédit passe à l’arrière-plan. Les utilisateurs ne devraient pas se demander quel format vous attendez, quelle est la prochaine étape ou s'ils ont commis une erreur. Si quelque chose ne va pas, corrigez-les rapidement. Si tout se passe bien, ne les ralentissez pas. éléments Stripe contient des indices de formatage, une validation en temps réel et une conception de réponse intégrés dans chaque champ, mais les mêmes principes s’appliquent quels que soient les outils que vous utilisez.

Comment devriez-vous gérer les messages d’erreur et la validation des entrées pour les cartes de crédit?

Même les formulaires de paiement les mieux conçus rencontreront des erreurs, telles que des fautes de frappe, des cartes expirées ou des chiffres manquants. La façon dont votre interface utilisateur gère ces moments est un élément clé de conversion. Voici comment bien le faire :

Valider les entrées en temps réel

La détection précoce des problèmes évidents aide les utilisateurs à résoudre les problèmes avant qu’ils ne les soumettent. Appliquer des règles, comme l’expiration doit être une date future valide et le CVV doit comporter 3 ou 4 chiffres.

Le moment est important. Exécutez des vérifications de base au fur et à mesure que l’utilisateur tape (comme l’algorithme de Luhn pour le numéro de carte), mais ne lancez pas d’erreurs à mi-frappe. Attendez qu’un champ soit rempli, puis validez.

Rendre les messages d'erreur spécifiques et utiles

Les messages génériques tels que « Entrée non valide » ne sont pas utiles. Soyez précis. « Le numéro de carte est incomplet » ou « la date d’expiration semble être antérieure » donne à l’utilisateur quelque chose sur lequel il peut agir.

Adapter le message au problème : s’agit-il de formatage, de données manquantes ou de quelque chose qui a été refusé par le processeur de paiement?

Indiquez toujours à l’utilisateur comment résoudre le problème ou quoi essayer ensuite.

Afficher les erreurs au bon endroit

Le placement fait une différence dans la rapidité avec laquelle un utilisateur peut récupérer. Mettez le champ en surbrillance visuellement : affichez les messages dans, à côté ou en dessous du champ à l’origine du problème.

Si une carte est refusée, vous pouvez afficher ce message d'erreur au-dessus du bouton d'envoi ou en haut, mais associez-le également à tout commentaire pertinent au niveau du champ.

Conserver les données de l’utilisateur dans la mesure du possible

Peu de choses sont plus frustrantes pour un client que d’avoir à saisir à nouveau toutes les informations de sa carte à cause d’une petite erreur. À moins que cela ne soit absolument nécessaire, n’effacez pas les champs de la carte après une tentative infructueuse. Si vous devez effacer des données sensibles, indiquez pourquoi (« Pour des raisons de sécurité, le numéro de carte a été effacé »).

Mieux encore, évitez les erreurs avant que l’utilisateur ne soumette afin de ne pas risquer de perdre ses données en premier lieu.

Offrir une voie à suivre

Un message d’erreur ne doit jamais laisser l’utilisateur bloqué. Suggérez les étapes suivantes : « Essayez de saisir à nouveau votre numéro de carte » ou « Utilisez une autre carte si celle-ci continue d’être refusée ».

Si le problème est le plus probable du côté bancaire, dites-le : « Votre banque a refusé ces frais. Aucun paiement n’a été effectué ».

Autofocus sur le premier champ contenant une erreur afin que l’utilisateur puisse le corriger rapidement.

Équilibrer clarté et sécurité

Il y a un compromis entre être utile et donner trop de détails, surtout si vous avez affaire à des testeurs de cartes ou à des environnements à forte fraude. Au besoin, vous pouvez regrouper les erreurs (p. ex., « Les détails de la carte n’ont pas pu être vérifiés ») pour éviter d’aviser les mauvais acteurs. Connaissez votre profil de risque et ajustez votre stratégie d'erreur en conséquence.

Fournir des commentaires après la soumission

Lorsque les utilisateurs cliquent sur « Payer », ne les laissez pas se demander ce qui se passe. Désactivez le bouton, affichez un spinner ou passez l’étiquette sur « Traitement... » pendant que le paiement est en cours.

• En cas de succès, affichez une page de paiement, un reçu ou une bannière de succès.

• En cas d’échec, réagissez rapidement en leur disant ce qui s'est passé et ce qu’il faut faire à ce sujet.

Utiliser la validation pour renforcer la confiance. Vous dites à l’utilisateur : « Nous nous occupons de tout ça. Si quelque chose ne va pas, vous saurez exactement quoi et pourquoi ». Cette assurance peut aider les gens à avancer, même lorsque les choses ne se passent pas comme prévu.