Le point culminant du commerce électronique et du SaaS est le formulaire de paiement par carte.
Si vous vendez quelque chose en ligne, vous savez que ce n’est pas la chose la plus facile à faire. Vous devez trouver un client potentiel, présenter votre produit sous un bon jour, le conduire à travers un processus plein de formulaires et enfin… collecter son argent. À chaque étape, vous risquez de perdre soudainement votre client. C’est douloureux.
Beaucoup de choses peuvent arriver. La capacité d’attention humaine est extrêmement limitée et vulnérable aux distractions. Tout le processus est facile à compliquer et difficile à concevoir. La dernière étape du processus – le formulaire de paiement par carte de crédit – est particulièrement difficile. Les gens ne prendront pas le risque de placer leur numéro de carte de crédit sous une forme mal conçue ou déroutante. Le risque de perdre de l’argent sera trop important.
Minimiser le sentiment de risque et éviter la confusion, voilà ce que vous visez lorsque vous concevez un formulaire de carte de crédit. C’est votre tâche ultime de conception de UX.
Ne serait-il pas triste de perdre un client à la dernière étape du processus de vente ? Vous avez bien fait tout le reste et la dernière petite étape de votre tunnel de conversion a mal tourné. Le paiement n’a pas été effectué et la seule chose que vous pouvez faire c’est de fondre en larmes devant votre lead partant à la concurrence.
Nous connaissons ce sentiment
UXPin a longtemps compté sur PayPal comme seule option de paiement. La vitesse de développement et l’absence de bureaucratie étaient si tentantes que nous ne pouvions pas y résister. Il s’est avéré que c’était une décision terrible. Nous perdions constamment environ 20 % de nos clients à la toute dernière étape du processus. Les raisons de cette situation étaient évidentes :
- Le manque d’options de paiement (bien que PayPal soit extrêmement populaire aux États-Unis, de nombreuses personnes ont refusé de l’utiliser lors du paiement d’un abonnement à notre UX Design App).
- Un processus de redirection vers PayPal déroutant et un design terrible du côté de PayPal.
- Cela nous a obligés à reconcevoir tout le processus de paiement. Le résultat a été stupéfiant. Il y a encore des possibilités d’amélioration, mais l’augmentation des recettes a été immédiate et suffisamment élevée pour justifier tous les coûts.
Le formulaire de paiement par carte de crédit est un point culminant de la vente en ligne. Vous voulez faire les choses correctement et je vais vous montrer comment.
Aider les gens à réussir
J’ai de bonnes nouvelles pour vous : Si votre client potentiel est arrivé au point où il doit saisir son numéro de carte de crédit, il veut vraiment payer. C’est exact – sans conditions. Quelqu’un veut vous donner de l’argent ! Que vous le preniez ou non, tout dépend de votre conception.
Aiderez-vous vos utilisateurs à réussir leur achat, ou plutôt leur rendrez-vous la tâche très difficile ? C’est à vous de décider.
Si vous demandez des tonnes d’informations facultatives, risquant ainsi de vous distraire, si vous avez des étiquettes peu claires, ou si vous n’indiquez pas quel type de carte de crédit vous acceptez, votre appel à l’action est obscur et le transfert de données n’est pas sûr… ne soyez pas surpris si de nombreuses personnes quittent le processus sans avoir effectué le paiement.
Vous ne les aidez pas. Vous créez des obstacles supplémentaires.
« Toute question que vous posez aux gens dans un formulaire Web exige qu’ils l’analysent, formulent une réponse, puis entrent leur réponse dans le montant que vous avez indiqué sur le formulaire. Être vigilant sur chaque question que vous posez vous permet de supprimer les questions qui ne sont pas absolument nécessaires, ou qui peuvent être posées à un meilleur moment ou à un meilleur endroit, ou qui peuvent être déduites automatiquement. Et moins vous posez de questions, meilleures sont les chances que les personnes remplissent vos formulaires rapidement et facilement ».
Luke Wroblewski dans son grand livre « Web Forms : Filling The Blanks »
En gardant cela à l’esprit, jetez un coup d’œil au processus de paiement Amazon et au formulaire de paiement lui-même. Amazon sait que la saisie d’un numéro de carte de crédit chaque fois que vous souhaitez faire un achat est un obstacle, c’est pourquoi ils vous demandent d' »ajouter votre carte » au compte, afin que vous puissiez effectuer un achat en un seul clic.
Ils ont également réduit au minimum les informations nécessaires aux seuls champs « Numéro de carte », « Nom sur la carte » et « Date d’expiration ». Dans la plupart des cas, ils ne demandent même pas le tristement célèbre code CVV (bien que la manière dont ils parviennent à effectuer la transaction sans le CVV soit quelque peu mystérieuse).
Amazon s’efforce d’aider ses clients à effectuer la transaction le plus rapidement possible.
Faites le travail à leur place
Simplifier le formulaire en réduisant le nombre de champs n’est pas la seule chose que vous pouvez faire pour parvenir à la conception ultime de l’expérience utilisateur. Élargissez votre aide en faisant une partie du travail pour vos clients.
Dans son formulaire de paiement par carte de crédit, Apple détecte le type de carte de crédit que vous utilisez et vous facilite la tâche, car vous n’avez pas à choisir votre type dans une liste traditionnelle. La réactivité du formulaire est également importante car elle aide les gens à concentrer leur attention. Lorsque vous commencez à taper votre numéro de carte de crédit, l’icône de droite reste colorée, tandis que l’autre s’efface en gris.
Vous devez également noter qu’Apple offre la possibilité de payer avec deux cartes de débit/crédit. C’est un service client exceptionnel et rare. Si vous vendez du matériel coûteux – vous devriez avoir cette option en place !
Techniquement, c’est assez simple. Les numéros de cartes de crédit sont créés de manière cohérente. Les cartes American Express commencent par 34 ou 37. Les numéros des cartes Mastercard commencent par 51-55. Les cartes Visa commencent par 4, et ainsi de suite. Ces informations peuvent être utilisées pour détecter le type de carte de crédit que quelqu’un utilise, simplement en regardant son numéro de carte de crédit.
Le capitaine Obvious contre-attaque
Pour que votre formulaire soit discret, vous devez le rendre évident. Si vous avez des étiquettes de champ de formulaire sans aucune explication, certains de vos clients pourraient se sentir confus. Il se peut qu’ils ne comprennent pas le code CVV ou la raison pour laquelle vous leur demandez leur nom (et s’ils utilisent leur carte d’entreprise pour effectuer un achat ?).
Soulagez la douleur en ajoutant de courtes invites et des exemples à côté des étiquettes.
Jetez un coup d’œil au formulaire simple créé par l’équipe Threadless. Son superbe design se cache dans les détails.
Examinons les champs du formulaire :
- Nom (tel qu’il apparaît sur votre carte) – ne laisse aucun doute sur ce que vous demandez à être tapé dans le formulaire.
- Numéro de la carte (sans tirets ni espaces) – donne des informations sur le format requis. Bien sûr, il serait préférable que le formulaire lui-même accepte n’importe quel format de données fournies, mais c’est tout de même beaucoup mieux que de laisser les gens échouer et de les effrayer avec des messages d’erreur.
- Code de sécurité (3 au dos, Amex 4 au recto) – l’image montre clairement où vous êtes censé chercher le code de sécurité. C’est également le premier formulaire de paiement par carte de crédit qui indique clairement que sur les cartes American Express, le code de sécurité se trouve au recto et non au verso de la carte et qu’il est composé de 4 et non de 3 chiffres.
- Pouvez-vous voir comment l’équipe Threadless a délibérément facilité l’utilisation du formulaire ? Ils ont essayé d’éviter toute confusion chez les clients, ce qui peut entraîner un taux de conversion plus élevé.
L’astuce est que vous voulez être aussi évident que vous devez l’être. Tous vos clients n’auront pas besoin d’une aide importante. Vous pourriez envisager de cacher toute aide supplémentaire sous une icône en forme de point d’interrogation. Trop d’invites et d’explications risquent de créer une surcharge cognitive, ce qui est toujours risqué.
Faites en sorte qu’ils se sentent en sécurité
Lorsque les gens cherchent à obtenir leur carte de crédit, vous voulez qu’ils se sentent en sécurité. Si vous ne parvenez pas à leur offrir un environnement sûr, votre formulaire de paiement par carte de crédit sera un désastre. À moins que vous n’ayez une grande réputation, comme Apple et Amazon, vous voulez indiquer que vous prenez grand soin de la sécurité de vos clients.
Jetez un coup d’œil au design d’UXPin.
« Nous signalons à nos clients que nous avons investi dans le protocole de cryptage SSL 128 bits pour sécuriser leurs données sensibles. Nous voulons qu’ils se sentent aussi en sécurité que possible. Nous avons également apporté un soin particulier à la conception visuelle globale. » UXPin.
La conception visuelle revêt une importance extrême lorsqu’il s’agit de donner un sentiment de sécurité. Si vous ressemblez à un site de fraude, vous serez traité comme un site de fraude et presque personne ne trouvera le courage de vous confier son numéro de carte de crédit.
Assurez-vous qu’ils connaissent le prix
L’erreur la plus stupide que vous puissiez faire est probablement de forcer vos futurs clients à faire des allers-retours à votre service pour vérifier combien d’argent ils vous enverront en tapant leur numéro de carte de crédit. Informez toujours vos utilisateurs du montant que vous allez leur facturer.
L’application Buffer le fait de manière très efficace.
La mémoire tampon vous permet de savoir que vous êtes sur le point de vous abonner au service et vous donne également la possibilité de payer à l’avance pendant un an.
Ici, on peut voir que Buffer joue la carte de la simplicité et du minimalisme et ne cherche pas à réaliser absolument une vente.
Tutoriel étape par étape
Utilisons les connaissances que nous avons rassemblées ci-dessus et passons au processus de conception d’un formulaire de paiement par carte de crédit parfait, voulez-vous ?
J’utilise UXPin – The UX Design App pour créer rapidement cette interface utilisateur, mais pour recréer chaque étape, vous pouvez utiliser l’arme de votre choix.
Structure de base
J’aime toujours commencer en gardant à l’esprit la structure de base de l’interface. Les cases nues représentent les éléments de contenu général et l’espace qui sera rempli par les éléments de l’interface. Cela me permet de rester vraiment concentré.
Titre et appel à l’action
Dans l’étape suivante, je forme un titre et un appel à l’action. Ces deux éléments sont très importants et ne doivent pas être sous-estimés. Dans le titre, je cherche quelque chose d’émotionnel, mais pas trop accrocheur. Après tout, nous voulons que nos utilisateurs avancent en douceur.
Regardez le sous-titre : « Nous acceptons les cartes Visa, Mastercard, American Express. Si votre carte ne figure pas sur la liste, faites-le nous savoir ». Avec cette déclaration – j’informe mes clients sur les cartes de crédit acceptées, mais en même temps, j’offre un soutien bien nécessaire.
Si vos clients utilisent des cartes de crédit qui ne sont pas prises en charge, vous devez vraiment le savoir.
Un appel à l’action doit être précis. N’essayez pas de faire des phrases générales comme « Continuez », « OK », « Terminé » – ce genre de phrases ne crée pas de contexte pour l’ensemble du processus et peut semer la confusion chez vos clients. Elles ne parviendront pas non plus à créer un sentiment d’urgence et… enfin, juste un appel à l’action.
Indicateurs de sécurité
Quelques paragraphes ci-dessus, nous avons discuté de l’importance de la sécurité et du prix dans le formulaire de la carte de crédit. Mettons cela en pratique !
Jetez un coup d’œil aux précautions prises pour que le processus de paiement se déroule sans problème :
- En haut, informer les clients sur la sécurité technique offerte par le protocole SSL. Cela forme un cadre positif autour de l’ensemble du formulaire.
- Maintenant, il faut s’assurer que rien ne préoccupe les clients au moment de l’achat. Cela nécessite d’informer non seulement du prix, mais aussi de la possibilité d’un remboursement.
Champs du formulaire
Ensuite, je place les champs importants du formulaire. Je suppose qu’en raison d’un mécanisme transactionnel en arrière-plan, il n’y a pas besoin de connaître le nom du client pour procéder au paiement, mais par contre il y a besoin du code CVV. C’est un modèle populaire.
J’ai décidé de placer une icône de « verrouillage » supplémentaire dans le champ du formulaire, pour indiquer que toutes les données sont en sécurité.
En mettant « / » entre deux sélections de la date d’expiration, je m’adresse au modèle mental créé par les cartes de crédit. C’est le format de données utilisé sur la plupart des cartes de crédit dans le monde.
Labels et Prompts
Enfin, je place les étiquettes et toutes les invites importantes. J’ai décidé d’utiliser le mécanisme d’auto-détection d’un numéro de carte de crédit. Je veux que mon formulaire réponde rapidement aux entrées des utilisateurs, c’est pourquoi j’ai conçu un emplacement pour une icône de carte de crédit à droite du champ « Numéro de carte de crédit ».
Le code de sécurité est toujours un champ délicat, je l’ai donc sécurisé par une invite textuelle « Les 3 derniers chiffres au dos ». Amex : 4 au recto », ainsi que des icônes indiquant où trouver le code
