Le processus de paiement mobile coûte-t-il les ventes de votre site Web ?

Où Hootsuite, Apple et The New York Times se sont-ils trompés? Examinons ces expériences de paiement mobile et voyons comment votre propre processus de paiement peut éviter les pièges et optimiser les ventes mobiles.

Le rapport Ecommerce Quarterly Benchmarks de Monetate nous indique que peu de choses ont changé dans la façon dont les consommateurs utilisent leurs appareils pour

Puisque nous ne pouvons pas utiliser les données de 2020 pour refléter fidèlement le comportement normal des consommateurs, jetons un coup d'œil à ce qui s'est passé au quatrième trimestre 2019:

Selon cela, les acheteurs mobiles sont plus susceptibles de remplir leur panier que ceux sur ordinateur. Cela dit, les acheteurs sur mobile ne convertissent pas autant que ceux sur ordinateur :

En fait, deux fois plus les conversions ont lieu sur ordinateur de bureau que sur mobile. Pour aggraver les choses, les acheteurs de bureau dépensent également plus :

C'est vraiment dommage. Les consommateurs ont ces appareils très pratiques qu'ils utilisent pour charger leur panier. Pourtant, ils ne se sentent pas assez en confiance pour faire des achats quand ils sont dessus.

Alors, que se passe-t-il ? Ceux qui n'appuieront pas sur la gâchette sur mobile ont deux choix. Soit ils abandonnent complètement l'achat, soit ils trouvent un ordinateur de bureau (ou une tablette) pour terminer l'achat. Ce n'est pas le résultat idéal, c'est le moins qu'on puisse dire.

Aujourd'hui, j'aimerais essayer de résoudre les problèmes liés au processus de paiement mobile. Il y a tellement de sites Web qui certains de cela et d'autres qui manquent complètement la cible. Voyons quelques exemples et essayons de préciser ce dont vos visiteurs mobiles ont besoin pour effectuer une conversion en toute confiance sur leurs smartphones.

Réparation du processus de paiement de Hootsuite

Hootsuite est un logiciel de gestion de médias sociaux freemium. Bien que les nouveaux utilisateurs bénéficient d'un essai gratuit pour commencer, ils doivent encore passer par le processus de paiement standard.

Création de compte

Voici le premier écran que les nouveaux utilisateurs de Hootsuite voient lorsqu'ils démarrent le processus d'inscription:

C'est bien. Il supprime la configuration de base du compte avant de s'attaquer à la facturation.

Maintenant, remarquez comment les étiquettes et les espaces réservés sont gérés? Les étiquettes sont bien réalisées. Ils se trouvent à l'extérieur et directement au-dessus des champs correspondants. Cependant, ces espaces réservés doivent disparaître.

Selon NNG les espaces réservés à l'intérieur des champs de formulaire n'appartiennent à cet emplacement que s'ils fournissent des informations supplémentaires sur la façon de remplir le champ (par exemple, «(xxx) xxx-xxxx» dans le champ Téléphone). Même dans ce cas, les informations pertinentes devraient toujours rester en dehors du champ parce que:

• Les champs avec du texte (même s'il est gris clair et en italique) peuvent être mal interprétés comme un champ déjà rempli.
• Ils sont plus susceptibles d'obtenir manqués lorsqu'ils contiennent déjà du contenu.
• C'est mauvais pour l'accessibilité. Dans ce cas, le lecteur d'écran lirait les étiquettes de champ deux fois, car les espaces réservés sont des doublons.

Breadcrumbs

Regardez à nouveau la capture d'écran ci-dessus. La liste des étapes est un bon début (Étape 1 : créez votre compte ; Étape 2 : saisissez vos informations de facturation). Cependant, il serait beaucoup plus utile s'il y avait quatre étapes ici et qu'elles restaient en haut de l'écran en tant que fil d'Ariane de suivi de la progression :

• Créez votre compte
• Choisissez votre forfait
• Entrez vos informations de facturation[19659033] Révision

Voici pourquoi je suggère ceci:

Une fois que les utilisateurs ont créé leur compte, ils voient cette note sur leur essai gratuit en haut de la page de facturation:

Ce n'est pas le bon endroit pour ce message. Lorsque les utilisateurs essaient de passer par un formulaire, laissez-les simplement le faire et en finir. Vous devez afficher tous les récapitulatifs d'achat (y compris à propos de l'essai gratuit) sur la page finale de révision / récapitulatif en guise de vérification finale.

De plus, en plaçant ce message ici, suivi de la sélection du plan, puis de la section de facturation, vous obtenez la page est un peu trop longue.

Toujours diviser vos formulaires en sections logiques et tenir les utilisateurs informés de leurs progrès tout au long à tout moment. Plus vous simplifiez chacune des étapes, plus il leur sera facile de la franchir.

Remplir les formulaires

Tout cela mis à part, Hootsuite a fait du bon travail avec la configuration technique de ses formulaires.

Pour commencer, voyons comment les claviers changent lorsque les utilisateurs naviguent dans les champs. Les champs alphabétiques affichent le clavier alphabétique tandis que les champs numériques tels que "Numéro de carte de crédit" affichent le pavé numérique:

Le formulaire fournit toujours des sélections pré-écrites lorsque cela est judicieux, comme lorsque vous sélectionnez Mois ou Année:

De cette façon, les utilisateurs de Hootsuite ne sont pas Il n'est pas nécessaire de taper chaque valeur. Ils n'ont qu'à faire défiler pour trouver la bonne réponse. Avec le placement de la barre de défilement dans la zone du pouce, cela leur permet également de se déplacer rapidement dans la liste.

Gestion des erreurs

Un autre domaine dans lequel le formulaire de Hootsuite excelle est la façon dont les erreurs sont affichées:

Lorsque les utilisateurs ne remplissent pas correctement un champ, ils sont immédiatement invités à le corriger et on leur dit ce qu'ils doivent faire , comme dans l'exemple du mot de passe faible ci-dessus. Cela leur évite la frustration de découvrir qu'il y a une erreur après avoir soumis le formulaire.

Il y a un autre exemple de cela plus tard, lorsque les utilisateurs saisissent leurs informations de facturation:

Lorsque les utilisateurs naviguent dans les champs et que le curseur atterrit sur «Code postal», un message d'erreur apparaît. Ce n'est pas la meilleure façon de le gérer puisque l'utilisateur n'a même pas encore rempli le champ. Cependant, il est toujours agréable de voir à quel point le formulaire est immédiatement réactif.

Je recommanderais de corriger le moment du message d’erreur ainsi que la cohérence avec la façon dont il s’affiche. Utilisez le message d'erreur contextuel (comme l'exemple de mot de passe) ou affichez-le en ligne avec le champ (comme celui du code postal).

Réparation du processus de paiement d'Apple

Heureusement, Apple les clients ne sont pas obligés de visiter leurs magasins toujours occupés pour acheter leurs produits. Ils peuvent le faire dans le confort et la commodité de leurs appareils.

En ce qui concerne la qualité du processus de paiement sur les smartphones, il a ses avantages et ses inconvénients.

Page d'examen de la commande

Une fois qu'un client a fini de personnaliser son produit. et le place dans leur «sac» (la version Apple d'un panier), ils peuvent commencer le processus de paiement.

Apple affiche une page «Vérifier la commande», bien qu'il ne s'agisse en réalité que d'une façade pour pousser ses autres produits sur les clients: [19659003]

Le module complémentaire «Ajouter AppleCare + pour iMac» s'affiche en ligne avec les détails standard d'une commande Apple. Bien que le prix soit affiché à côté du module complémentaire, la façon dont il est intégré à la page est définitivement un motif sombre car il est destiné à tromper ceux qui ne font pas attention à des détails comme celui-ci.

Juste après les informations sur la livraison ou retrait, les clients trouvent le bouton "Payer" (ou l'option alternative s'ils veulent payer au fil du temps plutôt qu'en une seule somme).

Comme ces deux options ne s'adaptent pas entièrement à l'écran du mobile, les utilisateurs peuvent se sentir obligés de continuer à faire défiler pour voir s'il existe d'autres options. Au lieu de cela, ils trouvent plus de ventes incitatives Apple:

Le paiement n'est pas le moment de vendre incitatif vos produits. Et en rendant la page deux fois plus longue que nécessaire, vous risquez de frustrer vos clients une fois qu'ils se rendront compte que les seules informations dont ils avaient besoin se trouvaient dans les deux premiers rouleaux de la page.

Ils ont déjà décidé de le faire. acheter chez vous. Ne le poussez pas.

Breadcrumbs

La ​​première étape officielle de Checkout est une page qui permet aux utilisateurs de se connecter avec leur identifiant Apple ou de payer en tant qu'invité. C'est une page de connexion typique:

Une des bonnes choses à propos de cette page est que, si l'acheteur arrive ici sur un iPhone, le site Web d'Apple le détecte et ouvre une fenêtre contextuelle qui demande :

« Voulez-vous vous connecter à store.apple.com avec votre identifiant Apple ? »[19659082] Pour les clients Apple existants, cela est utile car cela permet une connexion en un clic. Votre site Web n'est peut-être pas en mesure de tirer parti de ce type de connexion activée par la téléphonie, mais vous pouvez fournir d'autres options de connexion en un clic via des services tels que Facebook ou Google.

Concentrons-nous maintenant sur le gros problème ici: les clients ont aucune idée de ce qui est à venir dans le processus de paiement. S'ils l'ont assez vécu, ils le feront, mais ce n'est pas le cas pour les nouveaux arrivants.

Les miettes de pain n'apparaissent jamais lors du paiement. Au lieu de cela, l'étape suivante du processus remplace l'en-tête du site Web Apple par un en-tête collant «Checkout» chaque fois que l'acheteur fait défiler la page:

Cela laisse les utilisateurs sans moyen fiable de se retirer du processus de paiement sans revenir à la page d'accueil Apple et recommencer. Cela ne leur donne aucune indication sur ce qui va arriver. Tout ce qu'ils voient, c'est combien ils sont sur le point de dépenser pour les produits Apple.

Compte tenu de la longueur de chacune des pages, demandant souvent plusieurs informations à la fois, cet en-tête devrait vraiment être remplacé par quelque chose de plus utile.

Notes d'expédition

Il y a beaucoup de choses à craindre lorsque vous achetez quelque chose en ligne, depuis un appareil mobile ou un ordinateur de bureau. Confidentialité et sécurité, d'une part. La transparence en ce qui concerne les délais et les coûts d'expédition en est une autre. Et maintenant, il y a des problèmes de non-contact, grâce au COVID-19.

C'est quelque chose qu'Apple gère bien:

Le meilleur moment pour afficher à un client tout avis lié à l'expédition ou au ramassage est lorsqu'il y réfléchit. Et, dans le cas d'Apple, cela est parfaitement chronométré.

Bien qu'il y ait trois autres pages dans le processus de paiement Apple – 1) la saisie des coordonnées, 2) la saisie des informations de facturation et 3) la révision de la commande – elles ne valent pas la peine d'être revisitées. ici. Il y a beaucoup de chevauchement entre les formulaires de paiement de Hootsuite et d'Apple, alors n'hésitez pas à utiliser les leçons que nous avons tirées de Hootsuite comme référence.

Réparation du processus de paiement The New York Times'

y compris The New York Times 'processus de paiement des abonnements ici car il est presque parfait, et je veux que vous voyiez à quel point un paiement simplifié peut être indolore.

Configuration du compte

Les nouveaux abonnés sont d'abord invités à créer un compte. Notez le fil d'Ariane en haut qui détaille le nombre d'étapes à venir:

[19659003]C'est toujours une première étape importante si vous voulez que les clients puissent se connecter et contrôler leurs abonnements, suivre leurs commandes, acheter plus de produits, etc.

Le New York Times fournit aux abonnés avec une variété d'options pour la création de compte:

• Inscrivez-vous avec leur adresse e-mail./li>
• Connectez-vous via Google
• Connectez-vous via Facebook
• Connectez-vous avec leur identifiant Apple

Notez la ligne juste au-dessus de «Continuer» qui fournit aux abonnés des liens vers les conditions d'utilisation et la politique de confidentialité. Comme nous l'avons vu avec Apple, il s'agit d'un excellent exemple de livraison d'avis pertinents au bon moment.

Configuration de la facturation

Il s'agit de la deuxième étape du processus de paiement:

Encore une fois, The New York Times fournit aux abonnés un raccourci tout au long du processus. Cette fois, c'est en utilisant l'option de paiement express PayPal.

S'ils ne veulent pas ou ne peuvent pas utiliser cette option, ils peuvent facilement saisir les détails de leur carte de crédit dans le court formulaire ci-dessous.

Tout comme vous. Si vous le souhaitez, le clavier change en fonction du champ actuellement sélectionné par l'utilisateur. Par exemple, voici ce qui apparaît pour remplir «Prénom»:

Et lorsqu'ils passent au champ «Carte de crédit ou de débit» , le pavé numérique apparaît :

Pour la plupart, c'est un formulaire bien conçu. Je déplacerais le texte d'espace réservé de la ligne "Carte de crédit ou de débit" (conformément aux instructions NNG que nous avons examinées précédemment). Je fusionnerais également « Prénom » et « Nom de famille » dans un seul champ. Il n'y a aucune raison pour que quelqu'un doive toucher son écran une fois de plus pour saisir son nom de famille. De plus, il est plus inclusif d'utiliser un seul champ «Nom complet».

Gestion des erreurs

Voici la grande faille que j'ai mentionnée:

C'est uniquement lorsque les abonnés cliquent sur « Examiner la commande » que ces messages d'erreur apparaissent. Ce n'est pas bon.

Le reste du formulaire fait un si bon travail de déplacer rapidement les abonnés rapidement et sans douleur à travers ce processus de paiement. Certes, ils peuvent voir chacun de ces champs à tout moment, il est donc peu probable qu'ils manquent de remplir l'un d'entre eux (à moins qu'ils ne soient distraits par le texte gris de l'espace réservé). Mais s'il y a une autre erreur dans le remplissage du formulaire, une erreur peut être générée.

Cela pourrait ne pas suffire à les empêcher de convertir, mais on ne sait jamais. Le New York Times existe depuis 1851, les abonnés savent donc dans quoi ils s'engagent. S'ils ne peuvent pas en dire autant de votre service d'abonnement, un problème de paiement frustrant comme celui-ci pourrait leur suffire à abandonner.

Révision de la commande

La dernière étape du processus de paiement est la page de révision de la commande :[19659003]

Cela donne aux abonnés la possibilité de revoir les détails de leur commande une fois de plus. Ils reçoivent également un peu plus d'informations sur le montant et la date de facturation.

Juste en dessous de cette boîte, les abonnés obtiennent plus de détails sur les conditions de vente ainsi que sur la politique d'annulation et de remboursement:

Là encore, The New York Times ne fournit que les abonnés avec ces informations quand cela a le plus de sens de le faire. Et il le fait de manière succincte et conviviale (c'est-à-dire en créant des liens vers des pages pertinentes au lieu d'engloutir la page de révision avec les détails).

Conclusion

Je pense que la plus grande leçon que nous pouvons tirer de c'est que, en surface, votre processus de paiement doit sembler facile à suivre. La perception est un gros problème avec les consommateurs. Pensez-y comme si vous faisiez la queue pour vérifier à l'épicerie.

Il y a des signaux qui pourraient vous inciter à vouloir remettre votre article sur l'étagère et quitter le magasin pour de bon (comme des files interminables qui ne bougent pas) . Ou cela vous amène à vous demander pourquoi vous vous tenez dans cette file et non la suivante (parce que le caissier continue de demander de l'aide).

Si votre processus de paiement envoie l'un des mauvais signaux, vous pouvez vous attendre à ce que vos acheteurs de réagir de la même manière.