Ce que vous devez savoir pour augmenter les conversions de paiement mobile

Publié: 2022-03-10
Résumé rapide ↬ Les données nous indiquent qu'il y a plus de visites Web sur mobile que sur ordinateur. Cependant, les taux de conversion sur mobile sont toujours à la traîne par rapport à ceux sur ordinateur. Cet article expliquera pourquoi vos visiteurs mobiles sont prêts à abandonner complètement leurs achats.

L'indexation mobile de Google est arrivée. Eh bien, pour certains sites Web en tout cas. Pour le reste d'entre nous, il sera là assez tôt, et nos sites Web doivent être en parfait état si nous ne voulons pas que les classements de recherche soient affectés par le changement.

Cela dit, le responsive web design n'a rien de nouveau. Nous créons des expériences utilisateur mobiles personnalisées depuis des années maintenant, donc la plupart de nos sites Web devraient être bien placés pour s'en charger… n'est-ce pas ?

Voici le problème : la recherche montre que l'appareil dominant par lequel les utilisateurs accèdent au Web, en moyenne , est le smartphone. Certes, ce n'est peut-être pas le cas pour tous les sites Web, mais les données indiquent que c'est la direction dans laquelle nous nous dirigeons, et donc chaque concepteur de sites Web devrait s'y préparer.

Cependant, les conversions de paiement mobile ne sont, pour le dire franchement, pas bonnes. Il y a un certain nombre de raisons à cela, mais cela ne signifie pas que les concepteurs de m-commerce doivent accepter cela.

Alors que de plus en plus d'utilisateurs mobiles comptent sur leurs appareils intelligents pour accéder au Web, les sites Web doivent être mieux conçus pour leur offrir l'expérience de paiement simplifiée, pratique et sécurisée qu'ils souhaitent. Dans le tour d'horizon suivant, je vais explorer certains des obstacles à la conversion dans le paiement mobile et me concentrer sur ce que les concepteurs Web peuvent faire pour améliorer l'expérience.

Plus après saut! Continuez à lire ci-dessous ↓

Pourquoi les conversions de paiement mobile sont-elles à la traîne ?

Selon les données, donner la priorité à l'expérience mobile dans nos stratégies de conception Web est une décision intelligente pour toutes les personnes impliquées. Les utilisateurs passant environ 51 % de leur temps sur les médias numériques via des appareils mobiles (contre seulement 42 % sur les ordinateurs de bureau), les moteurs de recherche et les sites Web doivent vraiment s'aligner sur les tendances des utilisateurs.

Maintenant, alors que cette statistique brosse un tableau positif à l'appui de la conception de sites Web avec une approche mobile d'abord, d'autres statistiques circulent qui pourraient vous faire méfier. Voici pourquoi je dis cela : le rapport trimestriel sur le commerce électronique de Monetate publié pour le premier trimestre 2017 contenait des données vraiment intéressantes à montrer.

Dans ce premier tableau, ils décomposent le pourcentage de visiteurs des sites e-commerce utilisant différents appareils entre le T1 2016 et le T1 2017. Comme vous pouvez le constater, l'accès à Internet sur smartphone a en effet dépassé le desktop :

Visites du site Web par appareil T1 2016 T2 2016 T3 2016 T4 2016 T1 2017
Traditionnel 49,30% 47,50% 44,28% 42,83% 42,83 %
Téléphone intelligent 36,46 % 39,00% 43,07 % 44,89 % 44,89%
Autre 0,62 % 0,39 % 0,46 % 0,36 % 0,36 %
Tablette 13,62 % 13,11 % 12,19% 11,91 % 11,91 %

Les conclusions de Monetate sur les appareils utilisés pour accéder à Internet. (La source)

Dans cet ensemble de données suivant, nous pouvons voir que le taux de conversion moyen des sites Web de commerce électronique n'est pas excellent. En fait, le nombre a considérablement diminué depuis le premier trimestre de 2016.

Taux de conversion T1 2016 T2 2016 T3 2016 T4 2016 T1 2017
Global 3,10 % 2,81 % 2,52 % 2,94 % 2,48 %

Les conclusions de Monetate sur les taux de conversion globaux du commerce électronique (pour tous les appareils). (La source)

Encore plus choquant est la répartition entre les taux de conversion des appareils :

Taux de conversion par appareil T1 2016 T2 2016 T3 2016 T4 2016 T1 2017
Traditionnel 4,23% 3,88 % 3,66 % 4,25 % 3,63 %
Tablette 1,42 % 1,31 % 1,17 % 1,49 % 1,25 %
Autre 0,69 % 0,35 % 0,50 % 0,35 % 0,27 %
Téléphone intelligent 3,59 % 3,44 % 3,21 % 3,79 % 3,14 %

Les conclusions de Monetate sur les taux de conversion moyens, ventilés par appareil. (La source)

Les smartphones reçoivent systématiquement moins de conversions que les ordinateurs de bureau, bien qu'ils soient l'appareil prédominant par lequel les utilisateurs accèdent au Web.

Quel est le problème ici ? Pourquoi sommes-nous capables d'amener les gens vers des sites Web mobiles, mais nous les perdons au moment du paiement ?

Dans son rapport de 2017 intitulé "Mobile's Hierarchy of Needs", comScore décompose les cinq principales raisons pour lesquelles les taux de conversion des paiements mobiles sont si faibles :

Raisons pour lesquelles le m-commerce ne convertit pas
Les raisons les plus courantes pour lesquelles les acheteurs de m-commerce ne convertissent pas. (Image : comScore) (Voir la version agrandie)

Voici la répartition des raisons pour lesquelles les utilisateurs mobiles ne convertissent pas :

  • 20,2 % — problèmes de sécurité
  • 19,6 % - détails du produit peu clairs
  • 19,6 % — impossibilité d'ouvrir plusieurs onglets de navigateur pour comparer
  • 19,3 % — difficulté à naviguer
  • 18,6 % — difficulté à saisir des informations.

Ce sont des raisons plausibles de passer du smartphone au bureau pour effectuer un achat (s'ils n'ont pas été complètement désactivés par l'expérience à ce stade, c'est-à-dire).

En résumé, nous savons que les consommateurs souhaitent accéder au Web via leurs appareils mobiles. Nous savons également que les obstacles à la conversion les empêchent de rester sur place. Alors, comment gérons-nous cela?

10 façons d'augmenter les conversions de paiement mobile en 2018

Pour la plupart des sites Web que vous avez conçus, vous ne verrez probablement pas beaucoup de changement dans le classement de recherche lorsque l'indexation mobile de Google deviendra officielle.

Vos conceptions adaptées aux mobiles peuvent être "suffisamment bonnes" pour maintenir vos sites Web en tête de recherche (pour commencer, de toute façon), mais que se passe-t-il si les visiteurs ne restent pas pour convertir ? Google commencera-t-il à vous pénaliser parce que votre site Web ne peut pas sceller l'accord avec la majorité des visiteurs ? En toute honnêteté, ce scénario ne se produira que dans des cas extrêmes, où la caisse mobile est si mal construite que les taux de rebond montent en flèche et que les gens cessent de vouloir visiter le site Web.

Disons que la baisse de trafic en caisse n'entraîne pas de pénalités de la part de Google. C'est super… à des fins de référencement. Mais qu'en est-il pour les entreprises ? Votre objectif est d'amener les visiteurs à se convertir sans distraction et sans friction. Pourtant, cela semble être ce que les visiteurs mobiles obtiennent.

À l'avenir, votre objectif doit être double :

  • pour concevoir des sites Web en gardant à l'esprit la mission et les directives de Google axées sur le mobile,
  • pour garder les utilisateurs mobiles sur le site Web jusqu'à ce qu'ils effectuent un achat.

Cela signifie essentiellement réduire la quantité de travail que les utilisateurs doivent effectuer et améliorer la visibilité de vos mesures de sécurité. Voici ce que vous pouvez faire pour concevoir plus efficacement des caisses mobiles pour les conversions.

1. Gardez l'essentiel dans la zone du pouce

La recherche sur la façon dont les utilisateurs tiennent leur téléphone portable est désormais dépassée. Nous savons que, qu'ils utilisent l'approche à une ou deux mains, certaines parties de l'écran mobile sont tout simplement difficiles à atteindre pour les utilisateurs mobiles. Et lorsque l'opportunité est attendue lors du paiement, c'est quelque chose avec lequel vous ne voulez pas vous embêter.

Pour les utilisateurs solitaires, le milieu de l'écran est le terrain de jeu principal :

La zone du pouce pour mobile à une main
Les bonnes, bonnes et mauvaises zones pour les utilisateurs mobiles à une seule main. (Image : UX Matters) (Voir la version agrandie)

Bien que les utilisateurs qui bercent leur téléphone pour une plus grande stabilité aient quelques options pour les doigts à utiliser pour interagir avec l'écran, seuls 28 % utilisent leur index. Alors, concentrons-nous sur les capacités des utilisateurs de pouce, ce qui, encore une fois, signifie donner la plus grande importance à la partie centrale de l'écran :

La zone du pouce et de l'index pour un berceau mobile
Les bonnes, les bonnes et les mauvaises zones pour les utilisateurs mobiles qui bercent leurs téléphones. (Image : UX Matters) (Voir la version agrandie)

Certains utilisateurs tiennent leur téléphone à deux mains. Étant donné que l'orientation horizontale est plus susceptible d'être utilisée pour la vidéo, cela ne sera pas pertinent pour le paiement mobile. Faites donc attention à la quantité d'espace de cet écran qui est à portée du pouce de l'utilisateur :

La zone du pouce pour la verticale et l'horizontale
Les bonnes, bonnes et mauvaises zones pour les utilisateurs mobiles à deux mains. (Image : UX Matters) (Voir la version agrandie)

En résumé, nous pouvons utiliser la répartition de Smashing Magazine sur l'endroit où concentrer le contenu, quelle que soit la tenue d'un smartphone par la main gauche, la main droite ou à deux mains :

Où se trouve la zone idéale du pouce sur mobile
Un résumé de l'emplacement des bonnes, bonnes et mauvaises zones sur les appareils mobiles. (Image : Smashing Magazine) (Voir la version agrandie)

Le site Web de JCPenney est un bon exemple de la façon de procéder :

La forme de JCPenney est dans la zone du pouce
Le formulaire de contact de JCPenney commence au milieu de la page. (Image : JCPenney) (Voir la version agrandie)

Alors que les informations sont incluses en haut de la page de paiement, les champs de saisie ne commencent que juste en dessous du milieu de celle-ci - directement dans la zone de pouce idéale pour les utilisateurs de tout type. Cela garantit que les visiteurs tenant leur téléphone de quelque manière que ce soit et utilisant différents doigts pour s'y engager n'auront aucun problème à atteindre les champs du formulaire.

2. Minimisez le contenu pour maximiser la vitesse

On nous a appris maintes et maintes fois que la conception minimale est la meilleure pour les sites Web. Cela est particulièrement vrai dans le cas du paiement mobile, où une expérience déjà lente ou frustrante pourrait facilement pousser un client à bout, alors que tout ce qu'il veut, c'est en finir avec l'achat.

Pour optimiser la vitesse lors du processus de paiement mobile, gardez à l'esprit les conseils suivants :

  • N'ajoutez que l'essentiel à la caisse. Ce n'est pas le moment d'essayer de faire des ventes incitatives ou croisées, de promouvoir les médias sociaux ou de détourner l'attention de l'action en cours.
  • Gardez la caisse libre de toutes les images. Les seuls visuels accrocheurs qui sont vraiment acceptables sont les marques de confiance et les appels à l'action (plus d'informations ci-dessous).
  • Tout texte inclus sur la page doit être de nature instructive ou descriptive.
  • Évitez toute stylisation spéciale des polices. Moins votre page de paiement est "wow", plus il sera facile pour les utilisateurs de suivre le processus.

Regardez le site Web de Staples comme exemple de ce à quoi devrait ressembler un paiement d'une seule page très simple :

La page de paiement unique pour Staples
Staples propose une page de paiement unique avec un nombre minimal de champs à remplir. (Image : Staples) (Voir la version agrandie)

Comme vous pouvez le constater, Staples ne ralentit pas le processus de paiement avec des images de produits, une image de marque, une navigation, des liens internes ou tout autre élément susceptible de (1) distraire de la tâche à accomplir ou (2) aspirer les ressources du serveur pendant qu'il tente de traiter les demandes de vos clients.

Non seulement cette page de paiement sera facile à parcourir, mais elle se chargera rapidement et sans problème à chaque fois, ce dont les clients se souviendront la prochaine fois qu'ils devront effectuer un achat. En gardant vos pages de paiement légères dans la conception, vous garantissez une expérience rapide dans tous les aspects.

3. Mettez-les à l'aise avec les marques de confiance

Une marque de confiance est un indicateur sur un site Web qui permet aux clients de savoir : « Hé, il n'y a absolument rien à craindre ici. Nous gardons vos informations en sécurité !

La seule marque de confiance que chaque site Web de m-commerce devrait avoir ? Un certificat SSL. Sans un, la barre d'adresse n'affichera pas le signe de verrouillage ou le nom de domaine https vert - qui permettent tous deux aux clients de savoir que le site Web dispose d'un cryptage supplémentaire.

Vous pouvez également utiliser d'autres marques de confiance à la caisse.

Big Chill utilise un sceau de confiance RapidSSL
Big Chill inclut un sceau de confiance RapidSSL pour informer les clients que ses données sont cryptées. (Image : Big Chill) (Voir la version agrandie)

Bien que vous puissiez utiliser les logos de Norton Security, la conformité PCI et d'autres logiciels de sécurité pour informer les clients que votre site Web est protégé, les utilisateurs peuvent également être influencés par des noms reconnaissables et fiables. Lorsque vous y réfléchissez, ce n'est pas très différent de l'affichage de logos d'entreprise à côté de témoignages de clients ou dans des légendes qui vantent vos relations avec de grands noms. Si vous pouvez tirer parti d'un partenariat comme ceux mentionnés ci-dessous, vous pouvez utiliser la confiance inhérente à votre avantage.

Prenez 18h, qui utilise une option "Connexion avec Amazon" à la caisse :

18h utilise une marque de confiance Amazon
6pm utilise le nom Amazon comme marque de confiance. (Image : 18 h) (Voir la version agrandie)

C'est une décision intelligente pour une marque qui n'a certainement pas la reconnaissance de marque qu'une entreprise comme Amazon a. En offrant aux clients une option pratique pour se connecter avec une marque synonyme de rapidité, de fiabilité et de confiance, l'entreprise pourrait désormais se faire connaître pour ces mêmes qualités de paiement pour lesquelles Amazon est célèbre.

Ensuite, il y a les pages de paiement mobile comme celle de Sephora :

La marque de confiance PayPal de Sephora
Sephora utilise un fournisseur de passerelle de paiement de confiance comme marque de confiance. (Image : Sephora) (Voir la version agrandie)

Sephora utilise également cette technique consistant à tirer parti de la bonne réputation d'une autre marque afin d'instaurer la confiance au moment du paiement. Dans ce cas, cependant, il offre aux clients deux options claires : Payez avec nous dès maintenant ou passez à PayPal, qui prendra soin de vous en toute sécurité. La sécurité étant une préoccupation majeure qui empêche les clients mobiles de se convertir, ce type de marque de confiance et de méthode de paiement est une bonne décision de la part de Sephora.

4. Fournir une édition plus facile

En général, n'éloignez jamais un visiteur (sur n'importe quel appareil) de ce qu'il fait sur votre site Web. Il y a déjà suffisamment de distractions en ligne ; la dernière chose dont ils ont besoin est que vous les pointiez dans une direction qui les empêche de se convertir.

À la caisse, cependant, vos clients pourraient se sentir obligés de faire cela même s'ils décident qu'ils veulent une couleur, une taille ou une quantité différente d'un article dans leur panier. Plutôt que de les laisser revenir en arrière sur le site Web, offrez-leur une option d'édition lors du paiement pour les maintenir en place.

Victoria's Secret le fait bien :

Lightbox de modification de Victoria's Secret à la caisse
Victoria's Secret n'oblige pas les utilisateurs à quitter la caisse pour modifier des articles. (Image : Victoria's Secret) (Voir la version agrandie)

Lorsqu'ils accèdent pour la première fois à l'écran de paiement, les clients voient une liste des articles qu'ils sont sur le point d'acheter. Lorsque le gros bouton "Modifier" à côté de chaque élément est cliqué, une lightbox (illustrée ci-dessus) s'ouvre avec les variations du produit. Il s'agit essentiellement de la page du produit d'origine, juste superposée au-dessus de la caisse. Les utilisateurs peuvent ajuster leurs options et enregistrer leurs modifications sans jamais avoir à quitter la page de paiement.

Si vous constatez, en examinant les analyses de votre site Web, que les utilisateurs reviennent parfois en arrière après avoir cliqué sur la caisse (vous pouvez le voir dans l'entonnoir de vente), ajoutez cette fonctionnalité d'édition intégrée. En empêchant ce retour inutile en arrière, vous pourriez vous épargner des conversions perdues de la part de clients confus ou distraits.

5. Activer les options de paiement express

Lorsque les consommateurs vérifient sur un site Web de commerce électronique via un appareil de bureau, ce n'est probablement pas grave s'ils doivent saisir leur nom d'utilisateur, leur adresse e-mail ou leurs informations de paiement à chaque fois. Bien sûr, si cela peut être évité, ils trouveront des moyens de le contourner (comme autoriser le site Web à enregistrer leurs informations ou utiliser un gestionnaire de mots de passe tel que LastPass).

Mais sur mobile, ressaisir ces informations est pénible, surtout si les formulaires de contact ne sont pas bien optimisés (plus de détails ci-dessous). Ainsi, pour faciliter le processus de connexion et de paiement pour les utilisateurs mobiles, envisagez des moyens de simplifier le processus :

  • Autoriser le paiement des invités.
  • Autoriser le paiement accéléré en un clic.
  • Activez la connexion en un clic à partir d'une source fiable, telle que Facebook.
  • Activez le paiement sur le site Web d'un fournisseur de paiement de confiance, comme PayPal, Google Wallet ou Stripe.

L'un des avantages du processus de paiement déjà pratique de Sephora est que les clients peuvent automatiser le processus de connexion à l'avenir avec une simple bascule :

Sephora permet aux clients d'enregistrer les informations de connexion
Sephora permet aux clients fidèles de rester connectés, pour éviter cela lors du paiement à nouveau. (Image : Sephora) (Voir la version agrandie)

Lorsque les clients mobiles se sentent pressés et souhaitent passer à l'étape suivante du paiement, la fonction de connexion automatique de Sephora serait certainement utile et encouragerait les clients à acheter plus fréquemment sur le site Web mobile.

De nombreux sites Web mobiles attendent le bas de la page de connexion pour indiquer aux clients les types d'options dont ils disposent pour payer. Mais plutôt que de les surprendre en retard, Victoria's Secret affiche ces informations en gros boutons gras tout en haut :

Options de paiement express Victoria's Secret
Victoria's Secret simplifie et accélère le paiement en offrant trois options attrayantes. (Image : Victoria's Secret) (Voir la version agrandie)

Les clients ont le choix de se connecter avec leur compte, de payer en tant qu'invité ou d'aller directement sur PayPal. Ils ne sont pas surpris de découvrir plus tard que leur mode de paiement ou de paiement préféré n'est pas proposé.

J'aime aussi beaucoup la façon dont Victoria's Secret a choisi de le faire. Il y a quelque chose d'agréable dans le bouton "Connexion" aux couleurs vives assis à côté du bouton plus discret "Départ en tant qu'invité". D'une part, il ajoute une touche de couleurs de la marque Victoria's Secret à la caisse, ce qui est toujours agréable. Mais la façon dont il est coloré les boutons indique également clairement ce qu'il veut que l'action principale soit (c'est-à-dire créer un compte et se connecter).

6. Ajoutez de la chapelure

Lorsque vous envoyez des clients mobiles à la caisse, la dernière chose que vous souhaitez est de leur donner des distractions inutiles. C'est pourquoi la barre de navigation standard du site Web (ou menu hamburger) est généralement supprimée de cette page.

Néanmoins, le processus de paiement peut être intimidant si les clients ne savent pas ce qui les attend. Combien de formulaires devront-ils remplir ? Quel genre d'information est nécessaire? Auront-ils la possibilité de vérifier leur commande avant de soumettre les informations de paiement ?

Si vous avez conçu un paiement sur plusieurs pages, apaisez les craintes de vos clients en définissant chaque étape avec une navigation par fil d'Ariane clairement étiquetée en haut de la page. De plus, cela donnera à votre caisse un design plus épuré, réduisant le nombre de clics et le défilement par page.

Hayneedle a un bel exemple de navigation par fil d'Ariane en action :

Navigation dans le fil d'Ariane de la caisse Hayneedle
La chapelure de Hayneedle est propre et facile à trouver. (Image : Hayneedle) (Voir la version agrandie)

Vous pouvez voir que trois étapes sont réparties et clairement étiquetées. Il n'y a absolument aucune question ici sur ce que les utilisateurs rencontreront dans ces étapes non plus, ce qui les aidera à se rassurer. Trois étapes semblent assez raisonnables et les utilisateurs auront la possibilité de revoir la commande une fois de plus avant de finaliser l'achat.

Sephora propose un style alternatif de "fil d'Ariane" dans sa caisse :

Fil d'Ariane numéroté de Sephora
Le fil d'Ariane numéroté de Sephora apparaît au fur et à mesure que vous remplissez chaque section. (Image : Sephora) (Voir la version agrandie)

Au lieu de placer chaque "fil d'Ariane" en haut de la page de paiement, les clients de Sephora peuvent voir quelle est la prochaine étape, ainsi que combien d'autres sont à venir au fur et à mesure qu'ils avancent dans le formulaire.

C'est une bonne option à prendre si vous préférez ne pas rendre la navigation supérieure ou le fil d'Ariane collant. Au lieu de cela, vous pouvez donner la priorité à l'appel à l'action (CTA), qui pourrait mieux motiver le client à descendre la page et à finaliser son achat.

Je pense cependant que ces deux conceptions de fil d'Ariane sont valables. Il peut donc être utile de les tester A/B si vous n'êtes pas sûr de ce qui entraînerait plus de conversions pour vos visiteurs.

7. Formatez judicieusement le formulaire de paiement

Une bonne conception de formulaire de paiement mobile suit une formule assez stricte, ce qui n'est pas surprenant. Bien qu'il existe des moyens de contourner les règles sur le bureau en termes de structuration du formulaire, du nombre d'étapes par page, de l'inclusion d'images, etc., vous n'avez vraiment pas ce genre de flexibilité sur mobile.

Au lieu de cela, vous devrez être méticuleux lors de la construction du formulaire :

  • Concevez chaque champ du formulaire de paiement de sorte qu'il s'étende sur toute la largeur du site Web.
  • Limitez les champs à ce qui est essentiel.
  • Étiquetez clairement chaque champ à l'extérieur et au-dessus de celui-ci.
  • Utilisez au moins une police de 16 pixels.
  • Formatez chaque champ afin qu'il soit suffisamment grand pour être exploité sans zoomer.
  • Utilisez une marque reconnaissable pour indiquer quand quelque chose est nécessaire (comme un astérisque).
  • Informez toujours les utilisateurs lorsqu'une erreur a été commise immédiatement après la saisie des informations dans un champ.
  • Placez l'appel à l'action tout en bas du formulaire.

Étant donné que le formulaire de paiement est l'élément le plus important qui guide les clients tout au long du processus de paiement, vous ne pouvez pas vous permettre de vous tromper avec une formule éprouvée. Si les utilisateurs ne peuvent pas accéder de manière transparente de haut en bas, si les champs sont trop difficiles à interagir ou si la fonctionnalité du formulaire lui-même est truffée d'erreurs, alors autant embrasser vos achats mobiles (et peut-être vos achats dans général) au revoir.

Crutchfield montre comment créer des champs de formulaire très conviviaux sur mobile :

Champs de formulaire de grande taille à la caisse de Crutchfield
Les champs de formulaire sur la page de paiement de Crutchfield sont volumineux et difficiles à manquer. (Image : Crutchfield) (Voir la version agrandie)

Comme vous pouvez le constater, chaque champ est suffisamment grand pour être cliqué (même avec de gros doigts). Le contour en gras autour du champ actuellement sélectionné est également une belle touche. Pour un client multitâche et/ou distrait par quelque chose qui l'entoure, revenir au formulaire de paiement serait beaucoup plus facile avec ce type de format.

Sephora, encore une fois, gère la caisse mobile de la bonne manière. Dans ce cas, je souhaite attirer votre attention sur le bouton "Passer la commande" grisé :

Utilisation intelligente de l'appel à l'action Sephora en caisse
Sephora utilise l'appel à l'action comme guide pour les clients qui n'ont pas rempli le formulaire. (Image : Sephora) (Voir la version agrandie)

Le bouton sert d'indicateur aux clients qu'ils ne sont pas encore tout à fait prêts à soumettre leurs informations d'achat, ce qui est très bien. Même si le formulaire est magnifiquement conçu - tout est bien étiqueté, les champs sont grands et le formulaire est organisé de manière logique - les utilisateurs mobiles pourraient accidentellement faire défiler trop loin un champ et ne le sauraient qu'en cliquant sur le bouton d'appel à l'action .

Si vous pouvez empêcher les utilisateurs de recevoir cette redoutable erreur "informations manquantes", vous réussirez mieux à conserver leurs achats.

8. Simplifiez la saisie de formulaire

En approfondissant un peu ces formulaires de contact, voyons comment vous pouvez simplifier la saisie de données sur mobile :

  • Autorisez les clients à utiliser la fonctionnalité de saisie semi-automatique de leur navigateur pour remplir des formulaires.
  • Incluez une directive HTML tabindex pour permettre aux clients d'appuyer sur une flèche vers le haut et vers le bas dans le formulaire. Cela permet de garder leurs pouces dans une plage confortable sur le smartphone à tout moment, au lieu de tendre constamment la main pour accéder à un nouveau champ.
  • Ajoutez une case à cocher qui copie automatiquement les informations d'adresse de facturation dans les champs d'expédition.
  • Modifiez le clavier en fonction du type de champ saisi.

Un exemple de ceci est le site Web mobile de Bass Pro Shops :

Le formulaire de paiement Bass Pro utilise un clavier intelligent
Chaque champ du formulaire de paiement Bass Pro fournit aux utilisateurs le bon type de clavier. (Image : Bass Pro Shops) (Voir la version agrandie)

Pour commencer, le clavier utilise la fonctionnalité de tabulation (voir les flèches haut et bas juste au-dessus du clavier). Pour les clients aux doigts courts ou qui sont impatients et veulent simplement taper sur le clavier, les onglets aident à garder leurs mains au même endroit, accélérant ainsi le paiement.

De plus, lorsque les clients tabulent dans un champ composé uniquement de chiffres (comme pour leur numéro de téléphone), le clavier change automatiquement, de sorte qu'ils n'ont pas à changer manuellement. Encore une fois, c'est une autre façon d'augmenter la commodité d'effectuer un achat sur mobile.

Le paiement mobile d'Amazon comprend une case à cocher rapide qui simplifie la soumission des informations de facturation par les clients :

Amazon rationalise la saisie des formulaires avec la duplication d'adresses
Amazon offre aux clients un moyen simple de dupliquer leur adresse de livraison pour la facturation. (Image : Amazon) (Voir la version agrandie)

Comme nous l'avons vu avec la conception de formulaires de paiement mobiles, plus simple est toujours mieux. Évidemment, vous devrez toujours collecter certaines informations auprès des clients à chaque fois (à moins que leur compte n'ait enregistré ces informations). Néanmoins, si vous pouvez fournir une bascule rapide ou une case à cocher qui leur permet de copier des données d'un formulaire à un autre, faites-le.

9. Ne lésinez pas sur le CTA

Lors de la conception d'une caisse de bureau, vos principales préoccupations avec le CTA sont des choses comme le placement stratégique du bouton et le choix d'une couleur accrocheuse pour attirer l'attention dessus.

Sur mobile, cependant, vous devez également penser à la taille - et pas seulement à l'espace qu'il occupe sur l'écran. N'oubliez pas la zone du pouce et les différentes manières dont les utilisateurs tiennent leur téléphone. Assurez-vous que le bouton est suffisamment large pour que tout utilisateur puisse facilement cliquer dessus sans avoir à changer la position de sa main.

Votre objectif doit donc être de concevoir des boutons qui (1) se trouvent en bas de la page de paiement mobile et (2) s'étendent de gauche à droite, comme c'est le cas sur le site Web mobile de Staples :

Le gros bouton bleu CTA de Staple
Le CTA bleu vif de Staple ressort dans une caisse autrement simple. (Image : Staples) (Voir la version agrandie)

Peu importe qui effectue l'achat - un gaucher, un droitier ou un berceau à deux mains - ce bouton sera facilement accessible.

De toutes les améliorations de paiement mobile que nous avons couvertes aujourd'hui, le CTA est le plus facile à aborder. Agrandissez-le, donnez-lui une couleur distinctive, placez-le tout en bas de l'écran du mobile et faites-le s'étendre sur toute la largeur. En d'autres termes, n'obligez pas les clients à travailler dur pour franchir la dernière étape d'un achat.

10. Offrez une autre issue

Enfin, donnez aux clients une autre issue.

Supposons qu'ils achètent sur un site Web mobile, qu'ils ajoutent des articles à leur panier, mais que quelque chose ne leur convient pas et qu'ils ne souhaitent pas effectuer l'achat. Vous avez fait tout ce que vous pouviez pour les assurer en cours de route avec une expérience de paiement propre, facile et sécurisée, mais ils ne sont tout simplement pas confiants pour effectuer un paiement sur leur téléphone.

Plutôt que de simplement espérer que vous ne perdez pas entièrement l'achat, donnez-leur une chance de le conserver pour plus tard. De cette façon, s'ils sont vraiment intéressés par l'achat de votre produit, ils peuvent revenir sur le bureau et appuyer sur la gâchette. Ce n'est pas idéal, car vous voulez les garder en place sur mobile, mais l'option est bonne pour les clients qui ne peuvent tout simplement pas être sauvés.

Comme vous pouvez le voir sur le site Web mobile de LL Bean, il existe une option à la caisse pour "Déplacer vers la liste de souhaits":

Option de liste de souhaits L.L. Bean
LL Bean donne aux clients une autre chance de déplacer des articles vers leur liste de souhaits lors du paiement. (Image : LL Bean) (Voir la version agrandie)

Ce qui est bien à ce sujet, c'est que LL Bean ne veut clairement pas que la navigation dans la liste de souhaits ou la suppression d'un élément soit une action principale. Si "Déplacer vers la liste de souhaits" était affiché sous la forme d'un gros bouton CTA en gras, davantage de clients pourraient décider de prendre cette alternative apparemment plus sûre. Tel qu'il est conçu maintenant, il s'agit plutôt d'un «Hé, nous ne voulons pas que vous fassiez quelque chose avec lequel vous n'êtes pas à l'aise. C'est ici juste au cas où.

Bien que moins d'options soient généralement meilleures dans la conception Web, cela pourrait être quelque chose à explorer si votre paiement a un taux d'abandon de panier élevé sur mobile.

Emballer

Alors que de plus en plus de visiteurs mobiles affluent vers votre site Web, chaque étape menant à la conversion, y compris la phase de paiement, doit être optimisée pour plus de commodité, de rapidité et de sécurité. Si votre paiement n'est pas bien conçu pour répondre aux besoins et aux attentes spécifiques des utilisateurs mobiles, vous constaterez que ces taux de conversion chutent ou reviennent au bureau - et ce n'est pas la direction dans laquelle vous voulez que les choses aillent, surtout si Google pousse vers un monde axé sur le mobile.