De l’intérêt de soigner votre page de paiement

En cette période de Noël, le commerce en ligne n’a jamais aussi bien marché en France. Et pourtant… la plupart des boutiques en ligne proposent une expérience d’achat massacrée par la page de paiement, ou plus précisément par la page de saisie de la carte bancaire.

Illustration avec Archiduchesse, une boutique particulièrement soignée jusqu’à son tunnel de transformation et la page de sélection du moyen de paiement :

La page de sélection du type de carte bancaire chez Archiduchesse

Vous choisissez un type de carte bancaire… et là c’est la catastrophe :

La page de saisie de la carte bancaire chez Archiduchesse

Une page en complète rupture avec la charte graphique / ergonomique du site :

  • un fond de page beige sale (pourquoi ne pas utiliser des logos avec un fond transparent ?) ;
  • une typographie anachronique (qu’est-ce que ça leur coûte d’utiliser de l’Arial ?) ;
  • une organisation chaotique (le champ de saisie des trois chiffres positionné dans le coin du double cadre est invisible) ;
  • une hiérarchie visuelle incohérente (pourquoi le bouton d’annulation est-il trois fois plus gros que celui de confirmation ? Pourquoi ce même bouton est positionné sous un page break ?)

J’imagine qu’il y a d’innombrables contraintes de sécurité (un argument bien pratique pour celui qui n’a pas envie de se casser la tête), mais nous parlons bien ici d’une ignominie. Ce qui me met en rogne (en tant que professionnel mais également en tant qu’acheteur) c’est qu’il n’y aurait absolument aucun impact à revoir l’organisation et la mise en forme de cette page.

J’imagine que les informaticiens en charge de la maintenance de cette page doivent se conformer à la célèbre maxime « Si ce n’est pas cassé, pourquoi le changer ?« . Pour augmenter le taux de transformation bien sûr ! En provoquant une rupture complète dans l’expérience d’achat, vous mettez le doute dans la tête des acheteurs (« Suis-je toujours sur le bon site ?« , « Où est passé ma commande ?« …). Ceci est d’autant plus dommageable que la saisie de ses numéros de carte bancaire est une étape anxiogène.

Autre exemple encore pire chez Rue du Commerce où la page de confirmation n’est déjà pas terrible (il faut cocher les deux cases d’acceptation des CGV dans le cadre invisible en bas de page) :

La page de choix du mode de paiement sur Rue du Commerce

Une fois cliqué sur le type de carte bancaire que vous souhaitez, on retrouve une page légèrement différente du premier exemple, mais tout aussi déroutante :

Saisie de votre numéro de carte bancaire chez Rue du Commerce

Un effort a visiblement été fait pour améliorer la mise en page et la lisibilité (quoique le contraste est trop fort) sur cette page. Par contre vous remarquerez qu’ils ont inséré l’ancien bandeau de navigation dans le haut de page. Non seulement ce bandeau n’a rien à faire sur cet écran (où l’attention doit être focalisée sur la saisie des numéros) mais en plus les onglets ne sont pas cliquables ! J’imagine que les informaticiens qui ont conçu la page étaient très fiers de pouvoir afficher en haut de page la mention « Cryptage SSL » en rouge, mais peut-être devrait-on leur expliquer que le jargon technique ne rassure personne s’il n’est pas expliqué quelque part…

Pourtant il est tout à fait possible de proposer une expérience d’achat cohérente comme sur le site de la Fnacla saisie des numéros de carte est directement intégrée à la page de récapitulatif :

La page de saisie des numéros de carte sur le site de la Fnac

Je ne suis pas le mieux placé pour vous expliquer en détail les impacts techniques et financiers de la mise en oeuvre d’une telle solution, mais du point de vue des clients (le seul qui compte réellement), l’expérience est nettement plus agréable.

Je milite donc pour convaincre les opérateurs de paiement en ligne de faire un effort de présentation. Et je vous engage à faire de même !

49 commentaires sur “De l’intérêt de soigner votre page de paiement

  1. Je rejoins Florent et 1ternet sur les soucis de tracking générés par les modules de paiement des banques.

    Avec la solution du CIC, une fois le paiement effectué, le client doit cliquer sur lien très peu visible pour retourner sur notre page de confirmation d’achat et activer ainsi notre tracking vente sur Google Analytics. Résultat : nous ne trackons pas toutes les ventes.

    Nous avons récemment déplacé notre tracking vente GA sur la page juste avant la banque. Nous dé-doublonnons ensuite les ventes abouties VS abandonnées et constatons des écarts de 40 à 50%.
    C’est une méthode manuelle et fastidieuse et je ne sais pas comment supprimer les ventes non abouties dans GA. Si vous avez une solution ?

    Bref, je suis bien d’accord, les banques ont des efforts à faire pour simplifier la vie des clients et des e-commerçants.

  2. Remettons les choses en contexte : Les solutions de paiement déportées (comme celle utilisée par Archiduchesse en exemple) ont été conçues il y a plus de 10 ans par les banques et/ou Atos. À l’époque, tout le monde s’accordait à dire que les internautes étaient frileux à l’idée de saisir leur numéro de carte bleue sur Internet. Il fallait donc proposer une solution rassurante.

    Pour le coup, je ne sais pas pour vous, mais quand j’achète un truc sur un site plus-ou-moins-petit ou plus-ou-moins-inconnu, je suis rassuré lorsque je suis renvoyé vers une solution de paiement de ce genre. Je vais plutôt fuir les sites qui me demandent directement mon numéro de CB. Je ne sais pas s’ils le stockent sur leurs serveurs, je ne sais pas s’ils risquent de se faire pirater facilement, etc.
    Évidemment, les sites comme Amazon ou la FNAC risquent de se faire pirater eux aussi. De même que les banques. Mais on peut raisonnablement penser que le risque est plus faible.

    Après, je ne pense pas que tous les internautes aient en tête les mêmes choses que moi quand ils font leur achat. Le fait de ne pas avoir besoin de ressaisir son numéro de CB à chaque commande a justement été l’un des facteurs du succès d’Amazon lors de son arrivée en France il y a 10 ans.

  3. Le formulaire de paiement proposé a beau être moche, je préfère entrer mes informations de carte bancaire sur le site de la BNP plutôt que chez Archiduchesse.

  4. Frederic, si c’est pour pondre ce genre d’articles pleins de naïveté, on ira voir des experts du web ailleurs…
    Car honnêtement ce genre d’article montre que tu ne connais même pas les bases du paiement en ligne…

  5. @ EK > Je ne connais pas les bases du paiement et c’est plutôt une bonne chose lorsque l’on ambitionne de se faire l’avocat des utilisateurs (en l’occurrence des clients puisque nous parlons du commerce en ligne). Il est écrit en toutes lettres dans le texte « J’imagine qu’il y a d’innombrables contraintes de sécurité (un argument bien pratique pour celui qui n’a pas envie de se casser la tête) ». Traduction = Peut importe les contraintes techniques des spécialistes du paiement en ligne (ceux qui connaissent les bases), si j’estime que les pages de paiement ne sont pas bonnes j’ai tout à fait le droit de le dire sur ce blog, d’autant plus si des solutions très simples et sans aucun impact existent (modifier la typo, revoir la hiérarchisation de l’info…).

    Non seulement ton commentaire n’apporte rien au débat (celui de Florent est nettement plus intéressant), mais le fait qu’il soit publié sous l’anonymat prouve que tu ne maitrise pas non plus grand chose (qui a peur de montrer qu’il connait un sujet ?).

  6. @Fred : En effet, dans notre cas cela a couté moins cher, mais nous avons changé de prestataire au passage (la baisse de coût est d’avantage imputable au changement de prestataire qu’au changement de solution / fonctionnement technique).

    Pour être assez transparent nous utilisions les solutions partenaires de notre banque dans un premier temps (ce que font les 3/4 des e-commerçants) et avons switché chez une solution tierce (Paybox pour ne pas les citer).

  7. Même dans le cas de page hébergés sur les sites de banque il y a possibilité de fournir des logos et des feuilles css pour personnaliser l’affichage.

    Certes le rendu ne sera jamais le même qu’intégré dans le site mais il y a possibilité en y passant une heure ou deux de rester dans l’esprit de la charte graphique en jouant sur les couleurs, les polices et les logos…

  8. @ Benoit > Possibilité de fournir logo et CSS ? Mais ça change tout ! Reste à la banque à fournir une page de paiement avec un code source « propre » et bien sémantisé. Avec un peu d’imagination on pourrait même se faire un CSS Payment Garden ;-)

  9. Logo suis sur a 100% et j’avais commencé a fouiner un peu, sur ATOS on peut ptete pas personnaliser 100% du CSS mais on peut jouer sur certains trucs, en gros tu crées un template que tu compiles dans un langage barbare et que tu envoies si mon souvenir est bon

  10. J’ai eu personnellement une autre expérience pas plus tard qu’hier… et c’était sur le site http://www.hear-jacking.com...

    tout allait bien quand j’arrive finalement sur la page de paiement de la caisse d’épargne… Et bien j’ai hésité à remplir mes coordonnées bancaires, jusqu’à ce que je vérifie l’adresse en haut de page. Pourquoi ? parce que ça me semblait trop plein d’informations, 4 champs pour le numéro de carte, en plus de la date d’expiration en 2 champs déroulants et le numéro de cvv.

    Bref… Je paierais plus facilement sur une page comme celle de archiduchesse. Concernant la fnac et rueducommerce, ce sont 2 sites qui ont des budgets… De plus les banques ne donnent pas toujours les bons contacts techniques surtout que ça passe maintenant par les agences pour certaines banques. Il m’est déjà arrivé que l’agence se trompe… d’adresse email pour envoyer les identifiants !

    De plus les banques ne signalent pas toujours qu’il y a de nouvelles versions avec de nouvelles personnalisations si on leur pose pas la question. Tout dépend à quelle version du kit de paiement sécurisé a utilisé archiduchesse…

  11. Sips atos propose chez certaines banques de faire un « template » tout en td tr, certains attributs de styles sont meme autorisés dans les balises !! wouhou ! avec 4 ou 5 image maxi ca fait froid dans le dos :) mais bon on ressort nvu et on peut qd meme essayer de coller à la charte du site.
    Et cette solution ainsi que paybox proposent depuis longtemps un retour automatique du payement.. quand meme .. par contre faut souvent retailler un peu si on a pas les moyen d’acheter un module tout fait ..

  12. Je rejoins KpTn sur la techno employée sur Archiduchesse et RueDuCommerce, c’est SIPS.
    D’ailleurs la personnalisation est tout à fait envisageable avec SIPS puisqu’il est possible d’utiliser une CSS propre au site au lieu de la CSS par défaut de cette interface de paiement.
    De plus avec un peu d’imagination dans le montage de la page il est même possible d’avoir un récap de sa commande et la partie paiement sur la même page.
    Faites un tour sur le site http://www.ccbparis.fr, c’est ce travail qui a été réalisé lors de la dernière refonte.

  13. @Frederic:
    Plusieurs facteurs peuvent expliquer ce comportement :
    – Beaucoup d’équipes techniques et marketing pensent encore que la perso de cette page de paiement est très limitée.
    – Il se peut que les équipes techniques internes soient sous dimensionnées –> pas de dispo pour réfléchir à l’optimisation de certains aspects techniques du site
    – Dans le cas où les équipes techniques sont externalisées, elles ne réaliseront des investigations d’optimisation que si on leur demande.
    – Au final si le sujet n’est pas porté et chiffré par les équipes Marketing/commerce, les investigations ne seront jamais menées

  14. Howdy, i read your blog often and i own an analogous one and i used to be simply wondering if you get a lot of spam comments? If thus how do you stop it, any plugin or anything you’ll be able to advise? I get thus much lately it’s driving me mad so any help is very abundant appreciated. Others truly struggle with how to handle their angry emotions and end up causing a lot of chaos!

  15. Article très bien qui résume deux types de contraintes :
    – techniques
    * Paybox, les banques and co proposent peu de personnalisation (un logo brut et un jeu de couleur)
    * Garder les informations bancaires dans sa propre base est contraignants pour la sécurité
    * Les solutions de types API (par WebService) sont chiantes lourdes à mettre en place et dépendent des prestas

    – marketing, deux écoles :
    * les gens préfèrent, car ont l’habitude des interfaces vieillottes (mais secure) du paiement en ligne
    * les gens comme Fred Cavazza n’aime pas ces vieilles interfaces et pensent que ce type de page pourrait concrétiser l’achat.

    J’aimerai bien avoir des chiffres, des études sur le sujet pour savoir si une solution serait mieux qu’une autre à étudier.

    Perso, sur notre site de e-commerce nous allons tout faire pour arriver à de la personnalisation en phase avec notre future charte mais surtout nous allons offrir la possibilité au client de ne pas avoir à ressaisir ses numéros de carte (achat impulsif ?)…

    Dernière phrase sur goût de problématique : le paiement Mobile dans tout ça ?
    Paybox propose une solution tout simplement dégueulasse!
    ;-)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *