Comment concevoir un flux de paiement de commerce électronique qui se convertit

Votre flux de paiement de commerce électronique est l'endroit où se trouve l'argent. Pensez-y. Des visiteurs aléatoires quittent le site avant même d'entrer dans l'entonnoir de paiement. Des acheteurs motivés viennent ici pour terminer leur commande.

Toute petite amélioration de la conception de votre UX de paiement a généralement un impact direct sur les revenus de votre site.

Un site de commerce électronique que j'ai analysé récemment avait une page de paiement sur laquelle 84,7% du trafic procédait à l'achat. J'ai calculé que si nous pouvions augmenter ce chiffre à 90 %, cela entraînerait 461 commandes supplémentaires et 87 175 $ supplémentaires par mois, soit une croissance des revenus de 23,9 %. Les « petits » gains peuvent être énormes.

La question est donc : « Comment pouvons-nous amener plus de personnes à passer par notre flux de paiement et à effectuer des achats ? Les tactiques spécifiques dépendent de votre site, mais les principes pour trouver la réponse sont universels.

Un cadre de réflexion sur les caisses de commerce électronique : le modèle de comportement de Fogg

L'essentiel est le suivant : Comportement = Motivation x Capacité x Déclencheur.

Voici le modèle :

Vous voulez viser le coin supérieur droit du graphique : une motivation élevée, facile à faire, un déclencheur en place. Si vous avez une forte motivation et une faible capacité (difficile à faire), vous obtiendrez de la frustration. Si c'est peu motivant mais facile à faire (par exemple, sortir les poubelles), vous obtenez de l'agacement.

Comment Amazon utilise le modèle de comportement Fogg

Lorsqu'Amazon vous envoie un e-mail avec une promotion de produit, c'est une motivation et un déclencheur. Les gens cliquent sur le lien et accèdent à la page du produit. Ils lisent la copie et les critiques, et regardent la photo, ce qui augmente la motivation. « Ajouter au panier » est le déclencheur pour lancer le processus de paiement.

Qu'en est-il de la capacité? Est-il facile de terminer le processus de paiement ? C'est là qu'Amazon donne un coup de pied. Il vous suffit de taper votre mot de passe et de cliquer plusieurs fois. Le flux de caisse est sans friction.

Voici le flux de travail réel sur l'application de commerce mobile d'Amazon :

Fait et fait. Parcourons l'ensemble du processus de paiement étape par étape pour voir ce qui en fait un bon.

Remarque : Vous pouvez obtenir de nombreux autres conseils pour le commerce électronique dans notre rapport complet sur les consignes de commerce électronique (247 consignes spécifiquement pour le commerce électronique).

Comment concevoir votre fonction « Ajouter au panier » et votre page de panier

Tout commence lorsque les gens ajoutent quelque chose au panier. Au moment où un visiteur ajoute le premier article à son panier, il ne navigue pas, il fait des achats.

À quoi devrait ressembler « Ajouter au panier » ?

Lorsque les gens ajoutent quelque chose au panier sur vos pages de produits, que doit-il se passer ?

Il devrait être stupidement évident qu'ils ont ajouté quelque chose au panier. Confirmation claire. Il est ridicule de voir combien de sites gâchent cela soit en n'affichant pas de confirmation appropriée, soit en affichant une petite animation ou un petit texte de confirmation difficile à remarquer.

Vous ne pouvez pas manquer un panier ajouté à Bonobos. Après avoir cliqué sur "Ajouter au panier", le panier apparaît avec une petite animation, ce qui est bien car l'œil humain réagit au mouvement. C'est un repère visuel subtil qui indique le passage du visiteur à l'acheteur.

Le contenu du panier ainsi que le bouton « Commander » restent également visibles jusqu'à ce que l'utilisateur clique ailleurs. C'est bon. Je changerais la couleur du bouton « Commander » en quelque chose d'autre que le bleu, cela ne ressort pas assez. L'élément principal de la hiérarchie visuelle est le bouton « Ajouter au panier », mais le produit est déjà dans le panier.

ASOS montre également une petite animation. Ils ouvrent le contenu du chariot, puis le replient après quelques secondes. Le bouton « Ajouter au panier » devient également « Ajouté », ce qui est une belle confirmation pour les acheteurs :

Je garderais le contenu du panier ouvert jusqu'à ce que l'utilisateur fasse un choix en cliquant quelque part. De cette façon, le bouton « Commander » continue de les regarder en face.

Bien que nous souhaitions toujours qu'ils achètent plus de choses, l'amélioration du processus d'achat d'un seul article peut conduire à de grandes améliorations. Les pousser vers la caisse est toujours une bonne idée.

Une fois le produit dans le panier, que faire ?

Il existe deux approches principales :

1. Affichez la confirmation « ajout de panier » et gardez les utilisateurs sur la même page. Points positifs : Les gens n'ont pas demandé à passer à une autre page, il n'y a donc pas de surprises. Ils peuvent également envisager d'ajouter d'autres articles au panier avant de passer à la caisse. Inconvénients : ils ont déjà le produit qu'ils regardent maintenant dans le panier. Il vous serait plus utile s'ils regardaient quelque chose d'autre qu'ils pourraient vouloir acheter.
2. Transférez l'utilisateur vers la page du panier. Avantages : vous les rapprochez un peu plus du paiement. C'est aussi une excellente occasion de faire des offres de vente incitative. Inconvénients : vous risquez de perdre en maximisant les « articles par panier ».

Amazon vous amène à une page de panier, confirme que vous avez ajouté un produit au panier et vous montre les ventes incitatives. Ce qu'Amazon fait bien, c'est de réduire le contenu du panier, donc les ventes incitatives se démarquent :

Le bon équilibre de stratégies potentielles dépend de votre secteur d'activité et de vos objectifs, et vous voulez absolument le tester.

Métriques à garder à l'esprit :

• Valeur moyenne des transactions ;
• Quantité moyenne par transaction.

Nous ne voulons pas seulement augmenter le nombre de transactions mais aussi le montant dépensé pour chaque transaction.

Bien afficher le contenu du panier

Les principes clés pour afficher efficacement le contenu du panier sont la clarté et le contrôle.

• Clarté. Il est facile et évident de comprendre ce qu'il y a dans le panier et le coût final, y compris les frais d'expédition et les taxes. Les coûts surprises sur toute la ligne poussent les gens à abandonner les chariots.
• Contrôle : il est facile d'apporter des modifications, comme mettre à jour la quantité ou supprimer des produits.

ASOS a une bonne idée de la page du panier :

Ce qu'ils ont raison :

• Photos de produits ;
• Nom et prix du produit ;
• Possibilité de supprimer, d'enregistrer pour plus tard ou de modifier des détails tels que la taille ;
• Montrez le type de paiements qu'ils acceptent ;
• Afficher le prix total et confirmer la livraison gratuite ;
• Appel à l'action clair pour « Checkout » ;
• Réduisez l'incertitude en mettant en évidence les « rendements faciles ».

Indochino a une approche agréable et minimaliste de la présentation du contenu du panier. Cela dit, la page présente encore quelques problèmes, comme une boîte de coupons bien visible et l'impossibilité de modifier les quantités :

Obtenez la bonne hiérarchie visuelle

La chose numéro un dans la hiérarchie visuelle devrait être de continuer jusqu'à la caisse. (Testez différents CTA.). Il devrait y avoir deux appels à l'action : un au-dessus et un en dessous du panier.

Quelque chose comme ça, les deux boutons de paiement ressortent clairement :

Modcloth a amélioré cette page depuis notre dernière révision. Auparavant, la mise à jour de la quantité requise en tapant. Maintenant, vous pouvez utiliser des steppers pour augmenter ou diminuer la quantité.

Notez que Modcloth propose également une option PayPal. Alors que la plupart des gens préfèrent payer avec une carte de crédit, proposer 1 à 2 méthodes de paiement alternatives (par exemple PayPal, Amazon) est une bonne idée et il a été démontré qu'il facilite les conversions. Trop de choix sont blessants, cependant.

Modcloth vous rappelle également qu'ils ont des retours gratuits et une livraison gratuite sur les commandes de plus de 75 $.

Ne pas mettre les coupons en évidence

Lorsque les gens voient un champ « Entrez le code du coupon ici », ils se sentent moins spéciaux. « Comment ça se fait que je n'en ai pas ? » Beaucoup vont sur Google pour trouver un coupon ; beaucoup ne reviennent jamais. Quitter le site à la recherche de coupons est un motif fréquent d'abandon de panier.

Donc ce n'est pas une bonne idée :

Au lieu de cela, ayez un lien texte qui dit "Vous avez un coupon ?" ou quelque chose de similaire. Lorsque quelqu'un clique sur le lien, faites apparaître un champ de saisie, comme celui ci-dessus. Les liens de texte sont moins visibles, donc moins de gens y prêteront attention.

Les clients qui ont déjà un code promo chercheront un moyen de le saisir. À moins que vous ne le dissimuliez vraiment bien, ils le trouveront et pourront appliquer leur code promo.

Rappeler aux acheteurs les bonnes choses : expédition, retours et sécurité

Quand recevront-ils leurs marchandises ? Combien coûte l'expédition. C'est gratuit? La transaction sera-t-elle sécurisée ? Rappelez aux gens.

Voici un exemple qui montre ces trois messages clés sous le bouton de paiement, qui indique également « Payez en toute sécurité maintenant » :

Chariots persistants FTW

Lorsque les gens ajoutent quelque chose au panier, ne laissez pas le contenu du panier expirer. Utilisez des e-mails d'abandon de panier et des publicités de reciblage pour ramener les gens la semaine prochaine ou le mois prochain afin qu'ils puissent continuer là où ils s'étaient arrêtés.

Procédure d'inscription : Créer un compte ou non ?

De nombreux sites de commerce électronique souhaitent que les acheteurs s'inscrivent avant d'acheter. Certains forcent même l'enregistrement (c'est-à-dire qu'il est impossible d'acheter sans s'inscrire). Pour faire court : ne le faites pas. Ça fait mal aux conversions. Beaucoup.

Un sur quatre abandonne les achats en ligne en raison d'une inscription forcée. L'enregistrement forcé fait partie du « syndrome du commerçant avide ». Il est facile de comprendre pourquoi les spécialistes du marketing en ligne veulent le faire : ils espèrent que l'utilisateur sera « bloqué » et achètera davantage parce qu'il a un compte.

Est-ce vraiment le cas ? Oh s'il vous plait. Sur combien de sites Web avez-vous un compte enregistré ? Vous sentez-vous désormais loyal envers eux pour cette raison ? Je parie que vous ne vous êtes pas connecté à la plupart d'entre eux plus d'une fois.

Voici une bonne histoire sur l'enregistrement forcé, racontée par le gourou de la convivialité Jared Spool :

Difficile d'imaginer un formulaire plus simple : deux champs, deux boutons et un lien. Pourtant, il s'avère que ce formulaire empêchait les clients d'acheter des produits sur un site de commerce électronique majeur, à hauteur de 300 000 000 $ par an. Ce qui était encore pire : les concepteurs du site n'avaient aucune idée qu'il y avait même un problème.

La forme était simple. Les champs étaient Adresse e - mail et Mot de passe. Les boutons étaient Connexion et Inscription. Le lien était Mot de passe oublié. C'était le formulaire de connexion au site. C'est une forme que les utilisateurs rencontrent tout le temps. Comment pourraient-ils avoir des problèmes avec ça ?

Le problème ne résidait pas tant dans la disposition du formulaire que dans son emplacement. Les utilisateurs le rencontraient après avoir rempli leur panier avec les produits qu'ils souhaitaient acheter et avoir appuyé sur le bouton Commander . C'est venu avant qu'ils ne puissent réellement entrer les informations pour payer le produit.

L'équipe considérait que le formulaire permettait aux clients fidèles d'acheter plus rapidement. Les primo-accédants ne craindraient pas l'effort supplémentaire de s'inscrire car, après tout, ils reviendront pour plus et ils apprécieront l'opportunité des achats ultérieurs. Tout le monde y gagne, non ?

Nous avons effectué des tests d'utilisabilité avec des personnes qui avaient besoin d'acheter des produits sur le site. Nous leur avons demandé d'apporter leurs listes de courses et nous leur avons donné l'argent pour faire les achats. Il leur suffisait de finaliser l'achat.

Nous nous sommes trompés sur les acheteurs pour la première fois. Ils ont bien voulu s'inscrire. Ils ont regretté de devoir s'inscrire lorsqu'ils ont rencontré la page. Comme nous l'a dit un client : « Je ne suis pas ici pour entrer en relation. Je veux juste acheter quelque chose.

En supprimant l'enregistrement forcé, ils ont augmenté les ventes de 300 millions de dollars.

L'équipe de Spool a également découvert que la plupart des gens avaient plusieurs comptes dans le système. Les gens avaient oublié qu'ils avaient déjà des comptes. Ils ont reçu des messages d'erreur lorsqu'ils ont essayé d'en créer un avec leur e-mail standard, ils ont donc dû utiliser un autre e-mail pour créer plus de comptes.

Que devriez-vous faire à la place ? Offrez toujours une caisse d'invité. Vous pouvez travailler sur l'inscription après la vente :

• Ne mentionnez même pas le mot « Inscrivez-vous ». Dites « Nouveau client » ou un terme similaire.
• Après leur départ, proposez la création de compte sur la page « Merci ». Vous avez déjà leur nom, leur adresse e-mail et leur adresse lors du paiement, la création d'un compte ne devrait donc pas prendre plus de quelques clics. Demandez le mot de passe souhaité (ou fournissez une option pour le générer automatiquement) et confirmez l'autorisation de créer leur compte.

D'après mon expérience, l'approche la plus courante sur les sites de commerce électronique est encore sous-optimale. Dans l'ensemble, c'est trop chargé, et cela demande aux nouveaux clients de faire un choix, ce qui fait hésiter :

Il existe plusieurs options bien plus préférables.

Option d'inscription à la caisse 1

Donnez aux utilisateurs deux choix, nouveau ou ancien :

Asos n'a pas toujours eu cette approche. Il s'agissait de leur précédente page d'inscription, qui comportait trois choix :

L'élimination de cette approche et le passage à une version simplifiée ont réduit l'abandon de panier de 50 % !

C'est toujours (essentiellement) un enregistrement forcé, mais c'est emballé différemment. C'est également plus facile avec les options de connexion sociale. Un problème d'utilisabilité typique est réduit à quelques clics.

Option d' inscription à la caisse 2

L'abandon du panier d'achat est un problème majeur. Demander votre e-mail à l'avance facilite le démarrage d'un processus de récupération de panier abandonné. De plus, il y a deux choix faciles : pas de surcharge sensorielle :

Option d' inscription à la caisse 3

Un autre excellent moyen consiste à ignorer complètement l'écran de connexion. Au lieu de cela, utilisez simplement par défaut la caisse des invités. Les personnes disposant d'un compte existant peuvent se connecter via le lien, et les nouveaux clients peuvent créer un compte après avoir payé :

Ce que Diamond Candles fait bien n'est même pas visible. Ils créent automatiquement un compte pour vous mais ne le mentionnent pas. Supposons que vous passiez à la caisse de quatre invités avec la même adresse e-mail, puis que vous décidiez enfin de créer un compte (entrez un mot de passe, essentiellement).

Toutes vos commandes précédentes avec cette adresse e-mail sont fusionnées pour ce compte, de sorte que votre compte nouvellement créé est accompagné d'un historique de commandes approprié.

Option d' inscription à la caisse 4

Avec cette option, l'enregistrement du compte est offert avec une incitation à la fin de l'achat. Voici un exemple de Speedo :

Les gens ne se soucient d'aucune inscription de compte jusqu'à ce qu'ils vous versent de l'argent. Si vous deviez choisir, qu'est-ce qui est le plus important pour vous : les inscriptions de compte ou les achats ?

Habituellement, les pages de remerciement ne sont pas très utiles, mais ce n'est pas le cas ici. Ils vous proposent une offre simple : entrez un mot de passe et obtenez un coupon (plus suivi de commande, achat plus rapide, etc.). Le pourcentage de création de compte pour les nouveaux utilisateurs ici est souvent supérieur à 75 %.

La page de paiement du commerce électronique

C'est la page de l'argent. Tout ascenseur sur votre page de paiement final fera une belle différence sur votre compte bancaire. Voici quelques principes qui vous aideront à créer une meilleure étape finale dans votre flux de paiement.

Demander les informations de carte de crédit en dernier

Demandez aux gens de remplir les informations d'expédition avant de passer à la facturation. Cela met en œuvre les principes d'engagement et de cohérence de Cialdini. Une fois que les gens commencent à faire quelque chose, ils ont l'impression qu'ils devraient finir.

Il leur a déjà été demandé de saisir leur nom, leur adresse e-mail et leurs informations de livraison, qui, idéalement, sont identiques à l'adresse de facturation, de sorte qu'ils n'ont pas besoin de les saisir à nouveau.

Le même principe, parfois appelé technique du pied dans la porte, s'applique aux champs de formulaire. Commencez par les champs les plus faciles, comme le nom. Le champ du numéro de carte de crédit est le plus « difficile », il devrait donc arriver en dernier.

Voici ce qu'il ne faut pas faire :

C'est mieux. (Vous obtenez ici à partir de la page d'expédition.)

Le bon : Il a un flux clair de 1 à 2 à 3 étapes. Le champ du nom précède les détails de la carte et l'adresse de facturation (si elle est la même que celle de l'expédition) n'a pas besoin d'être saisie à nouveau.

Le mauvais : le CTA principal est « Enregistrer et continuer ». Continuer où ? Il doit être spécifique, comme « Continuer à examiner » ou quelle que soit la prochaine action.

Utilisez un formulaire de paiement qui ressemble à une véritable carte de crédit

Ajoutez une touche réelle en concevant le formulaire de paiement de cette manière skeuomorphique :

Vous pouvez obtenir une interface pour cela appelée Skeuocard gratuitement (!) À implémenter sur votre système. Essayez une démo ici.

Sécurisez le processus de paiement

La sécurité est une préoccupation sérieuse. En plus de sécuriser les paiements avec SSL, parlez-en aux gens. Voici un exemple de formulaire conçu pour sembler sécurisé :

Quelques raisons pour lesquelles cela fonctionne :

• Couleur d'arrière-plan différente pour le champ du numéro de carte de crédit.
• Logo SSL.
• Déclaration écrite : « Paiement sécurisé par carte bancaire. Il s'agit d'un paiement sécurisé crypté SSL 128 bits.
• Explications pour l'expiration et le code de sécurité.

Notez que si votre public n'est pas féru de technologie, il se peut qu'il ne sache pas ce que sont SSL ou HTTPS, alors parlez en termes simples.

Stockez les cartes de crédit dans votre système

Bien sûr, vous devez faire face à la conformité PCI, et il y a un risque de piratage, mais vous gagnerez beaucoup plus d'argent avec les utilisateurs qui reviennent. Lorsque les gens n'ont pas besoin de saisir leurs informations de facturation, l'achat devient un processus en un clic.

Amazon le tue en grande partie parce que les frictions pour les acheteurs qui reviennent ont été presque complètement supprimées ! Le flux de paiement est à peine un flux - c'est un événement en un clic.

Les visiteurs qui reviennent sont beaucoup plus susceptibles d'acheter que les nouveaux visiteurs, mais ce n'est rien comparé aux acheteurs qui reviennent . Facilitez-leur la tâche.

Conclusion

Commencez vos efforts d'optimisation du commerce électronique à la caisse. Les gains relatifs ici se traduiront par de très belles sommes absolues.

Pour améliorer l'UX de votre processus de paiement :

• Désactivez la fonction « Ajouter au panier ».
• Facilitez la tâche des visiteurs pour modifier ou supprimer des articles du panier.
• Rationalisez le processus d'inscription : laissez les nouveaux acheteurs s'inscrire après l'achat.
• Sur la page de paiement, demandez d'abord les informations les plus simples.