Astuces pour améliorer vos formulaires de paiement mobile

Si vous effectuez régulièrement des achats sur votre , il y a un élément déterminant que vous ne remarquez presque plus et qui vous fait pourtant choisir instinctivement le même marchand. Vous ne rentrez plus votre numéro de carte bancaire! Apple, Amazon mais aussi Vente Privée, Voyages Sncf ont choisi le stockage de vos numéros de carte bancaire afin de faciliter l’expérience utilisateur. Celà peut paraitre anodin mais selon l’institut Baymard le taux moyen d’abandon de panier est de 68%, la raison principale étant le formulaire de souscription. Entrer son numéro de carte de crédit est un point de friction majeur dans le parcours utilisateur, améliorer cette expérience ne serait ce que de quelques pourcentages vous permettra d’augmenter vos ventes. Voici quelques conseils pour améliorer vos formulaires de mobile.

De la simplicité

Ce principe est un des fondamentaux de l’expérience utilisateur mobile et doit être constamment gardés à l’esprit dans toute la conception. Vous devez épurer toutes informations non essentielles, pensez aux informations que vous demandez et supprimez toutes informations non obligatoires. Comme le disait Antoine de Saint Exupéry:

Il semble que la perfection soit atteinte non quand il n’y a plus rien à  ajouter, mais quand il n’y a plus rien à  retrancher.

Les quatre premiers chiffres d’une carte de crédit vous permette d’identifier le type de carte. Afin d’éviter à vos utilisateurs de choisir son type de carte, vous pouvez la détecter  automatiquement. Dans l’exemple ci-dessous, vous pouvez voir que l’icone MasterCard est automatiquement sélectionné après que l’utilisateur ait entré les deux premiers chiffres.

UXMobile-cartesave

 

Utiliser intelligemment les messages d’erreur

Les messages d’erreur sont aussi importants et doivent être travaillés afin de donner des indications précises sur le type d’erreur, rien de plus frustrant pour l’utilisateur de ne pas avoir d’indications. Celà permet à l’utilisateur de pourvoir corriger rapidement son erreur.

ErrorMessageCb

Utiliser des masques de saisies

Il existe une solution pour les formulaires de cartes de crédit, les masques de saisies permettent de limiter les entrées dans un champ basé sur les éléments que vous êtes en train de taper. Cela informe directement l’utilisateur si l’entrée ne correspond pas aux éléments requis lui permettant ainsi de corriger avant validation. De plus cela permet de concentrer plusieurs élements dans un même champ optimisant ainsi l’espace. Luke Wroblewski le détaille dans la vidéo ci-dessous:

Permettre le scan de carte bancaire

Depuis iOS8, Apple a publié une nouvelle fonctionnalité qui permet aux utilisateurs de scanner leurs cartes de crédit plutôt que de saisir le numéro au moment de remplir un achat sur leur  mobile. Voyages Sncf possède depuis quelques mois cette fonctionnalité.

VSC-Mobile-Payment

Et pour les autres systèmes d’exploitation, il y a plusieurs options disponibles pour intégrer le scan de la carte dans le processus de paiement de votre application.  Card.io vous permet d’utiliser  la fonction de numérisation sous Android pour effectuer des paiements par scan. Ce SDK est implémenté sur les applications comme Uber, Sephora, Task Rabbit.

CardioPaypal

Utiliser les animations

En utilisant correctement les animations vous pouvez vraiment améliorer l’expérience. L’objectif des animations est d’aider l’utilisateur à mieux comprendre ce qui se passe et comment fluidifier un parcours le plus efficacement possible.

animationtransition

En définitive, personne n’aime remplir des formulaires de cartes de crédit, mais celà constitue une étape obligatoire pour finaliser un achat. Toutes les améliorations que vous pouvez faire auront donc un impact direct non seulement sur l’amélioration de l’expérience utilisateur globale, mais aussi sur vos ventes. Gardez ces conseils à l’esprit pour réduire la friction du paiement mobile, et rendre ainsi plus facile pour vos utilisateurs d’obtenir ce qu’ils veulent, rapidement et facilement.

Share this post

Audrey Chatel

Audrey Chatel

Global Head of Marketing pour le Groupe Europ Assistance Diplômée du #MBAMCI Marketing & Commerce sur Internet. Auteure du livre #UX #Mobile : Les clés de la conception, du contenu et du design mobile

No comments

Add yours