worldline Direct
S'inscrire

Bonnes pratiques

  • Le nom du client doit être le premier ou le dernier champ de la saisie lors d'un paiement par carte. C'est l'ordre le plus naturel et logique pour les utilisateurs finaux.
  • Utilisez des icônes et des libellés pour les aspects fonctionnels et l'attrait visuel.
Cette image montre un exemple de page de paiement auto-hébergée.
  • Assurez-vous que votre page de paiement est conforme aux Directives pour l'accessibilité du contenu Web (WCAG) pour vous assurer que tout le monde, y compris les personnes ayant une déficience visuelle et des handicaps, puisse effectuer un paiement.
  • Utilisez des icônes colorées avec du texte sur les pages de confirmation. Cela aidera à différencier visuellement les pages, afin que les utilisateurs puissent clairement voir ce qu'il est advenu de leur transaction. C'est mieux pour l'accessibilité, afin que les utilisateurs daltoniens puissent comprendre la page plus facilement.
  • Rendez le texte aussi spécifique et convivial que possible, y compris le texte de validation des erreurs. Utilisez des mots qui ont du sens pour les utilisateurs et testez-les pour le valider. Par exemple, où mène le bouton "Continuer" ? Retourne-t-il à la boutique en ligne ? Cela signifie-t-il que je peux réessayer ?
  • Les clients préfèrent que le récapitulatif de commande et le bouton de paiement soient proches l'un de l'autre . Sinon, le bouton de paiement doit être la dernière chose sur lequels ils cliquent et il doit être placé sur le côté droit de la page.
  • Assurez-vous que l'intégration entre la boutique en ligne et la page de paiement se fasse harmonieusement. Par exemple, si votre site Web principal a un fond noir, assurez-vous que votre page de paiement utilise une couleur de fond similaire.

 Votre paiement a été accepté.
 La transaction a été refusée.
The image above shows a card payment form with validation errors and a "Continue" button on the left. L'image ci-dessus compare un mauvais (à gauche) et un bon (à droite) agencement pour placer le bouton "PAYER" sous le récapitulatif de commande.

Sécurité

  • Affichez le nom de votre entreprise dans l'URL et utilisez https:// pour une sécurité supplémentaire.
  • Utilisez les mots "Payer en toute sécurité".
L'image ci-dessus montre deux boutons : un bouton vert "Payer en toute sécurité" et un lien gris "Annuler le paiement" en dessous.
  • Utilisez la couleur verte sur les boutons de paiement et les coches pour indiquer les étapes complétées du processus. Le vert est associé à la positivité et à la sécurité. Les émotions sont importantes pour garantir un paiement réussi.
  • Ajoutez une icône de cadenas sur le bouton de paiement ou sur la page près du récapitulatif de commande.
  • Incluez une barre de progression sur la page pour rassurer les clients quant à l'étape où ils se trouvent dans le parcours de paiement.
L'image ci-dessus montre une barre de progression de paiement en trois étapes avec "Détails de paiement" actuellement sélectionné.

Étapes

  • Aidez vos clients à payer plus rapidement en enregistrant leurs informations de paiement avec la tokenisation. Expliquez clairement votre politique de protection des données.
  • Utilisez un affichage vertical pour permettre aux clients de passer plus rapidement d'une méthode de paiement à une autre. Cela réduit le nombre de clics en comparaison avec des pages de paiement séparées.
  • Fournissez des champs de texte libre. Évitez les menus déroulants pour les champs de saisie de carte. De nombreuses personnes n'utilisent que le clavier pour remplir un formulaire.
L'image ci-dessus montre trois types d'interface utilisateur de paiement : intégré avec des boutons radio, pages séparées, et interface utilisateur en un seul bloc.

Paiements mobiles

  • Testez votre parcours de paiement sur différents appareils (iOS et Android) et tailles d'écran pour valider le rendu et voir comment cela se comporte pour votre client.
  • Assurez-vous que votre design soit responsive. Les paiements mobiles sont en plein essor, il est donc important de concevoir les pages de paiement en pensant d'abord au mobile.
  • Affichez des mots-clés appropriés au contexte et facilitez la saisie des données pour votre client. Par exemple, affichez un pavé numérique lorsque les clients doivent renseigner les détails de leur numéro de carte.
  • Réduisez le temps de chargement de votre page. Par exemple, assurez-vous que le CSS soit optimisé et utilisez la bonne résolution pour les images afin de ne pas charger des fichiers plus volumineux que nécessaire.
L'image ci-dessus montre un écran mobile avec un pavé numérique pour entrer un numéro de carte lors du paiement.

Paiement local

59% des utilisateurs ne finalisent pas leurs commandes lorsqu'ils ne trouvent pas leurs méthodes de paiement préférées. Environ 70% des consommateurs européens sont susceptibles de chercher des sites alternatifs proposant des méthodes de paiement locales.

  • Offrir la bonne méthode de paiement fait la différence pour le client.
  • Assurez-vous d'afficher également tous les logos des méthodes de paiement que vous proposez, afin que les clients puissent les identifier rapidement et savoir avec quoi ils peuvent payer.
  • Affichez votre page de paiement dans la bonne langue pour faciliter le processus de commande pour le client.
  • Proposez la bonne devise à l'utilisateur afin qu'il n'ait pas à se soucier des frais de change.

    Interactions

    • Utilisez la détection de BIN pour les cartes, permettant aux clients de saisir n'importe quel numéro de carte sans avoir à choisir la marque au préalable.
    • Intégrez une validation par des coches après chaque champ de saisie pour fournir un renfort positif indiquant que les informations fournies sont correctes.
    • Parfois, les clients cliquent deux fois sur le même bouton Payer, ce qui peut entraîner l'échec du paiement. Pour éviter cela, désactivez les boutons lorsque le paiement est en cours et affichez une fenêtre de chargement à la place.
    L'image ci-dessus montre un écran de chargement avec le message "Votre paiement est en cours de traitement" et une icône de chargement.
    • Les clients préfèrent regrouper les moyens de paiement par cartes au lieu de séparer. Cependant, n'oubliez pas d'afficher tous les logos dans chaque groupe de cartes.
    • Assurez-vous que l'ordre des boutons a du sens pour l'utilisateur afin de l'aider à compléter la commande. Lorsque nous avons testé une transaction échouée, les clients choisieront d'abord "Réessayer", puis "Essayer une autre méthode de paiement" avant d'"Annuler le paiement".
    L'image ci-dessus montre un écran d'erreur de paiement indiquant "La transaction a été refusée" avec des options pour réessayer.
    • Fournissez des détails complets sur le récapitulatif de commande pour rassurer les clients et les inciter à terminer leur achat, même sur mobile.
    L'image ci-dessus montre un résumé de commande sur mobile avec les détails des produits, la livraison, les taxes et le montant total.
    • Fournissez des explications claires sur la façon dont les données sont stockées.
    • Expliquez ce qu'est un code de sécurité.
    L'image ci-dessus montre un formulaire de paiement avec une info-bulle expliquant comment les détails de paiement enregistrés sont stockés.
    • Offrez toujours aux clients la possibilité d'annuler, car ils souhaitent se sentir maîtres de leur achat.
    • Proposez immédiatement des options de paiement alternatives lorsque les transactions ont échoué pour ne pas perdre l'opportunité de transaction.
    • Les clients veulent avoir la possibilité de modifier ou de supprimer les cartes enregistrées.

    Recommandations

    Nous vous recommandons vivement de tester la conception de votre page de paiement et l'ensemble du processus de paiement avec de vrais clients. Aucune expérience de page de paiement n'est identique car elle dépend de la conception de votre site web, des produits que vous vendez, du comportement d'achat de vos principaux clients, etc.

    Les retours que vous obtenez directement de vos clients vous aideront à optimiser davantage votre page de paiement tout en créant une expérience optimale et unique pour eux.

    Cette page vous a-t-elle été utile ?

    Avez-vous des commentaires ?

    Merci pour votre réponse.
    New Feature

    Try out our new chatbot and find answers to all your questions.