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 :
Vous choisissez un type de carte bancaire… et là c’est la catastrophe :
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) :
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 :
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 Fnac où la saisie des numéros de carte est directement intégrée à la page de récapitulatif :
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 !
Pour l’exemple d’Archiduchesse, l’utilisateur qui a déjà effectué un payement en ligne est habitué à ce type de page. Faut-il encore avoir déjà fait un achat en ligne,…
Bonjour,
Je suis tout à fait d’accord avec toi, le problème est que les solutions proposées par les banques ne permettent pas toujours de personnaliser cette page (à part le logo…).
Bonjour,
As-tu vérifié l’URL de la partie paiement, je viens de tester avec un autre site qui a le même rendu qu’Archiduchesse, on tombe directement sur le site de la banque. Donc je pense que les sites d’e-commerce ne peuvent pas faire grand chose à part fournir une image (d’où le problème d’onglet non cliquable sur RDC) pour personnaliser cette page.
Hello Fred,
Il s’agit tout simplement d’une différence de coût des solutions. J’imagine que tu sais qu’une solution pleinement intégrée équivaut à installer des certificats SSL sur son site (et peut-être même à stocker les numéros de carte, à confirmer).
La page de paiement d’Archiduchesse est une interface de paiement déportée (a priori Paybox si je ne m’abuse) qui se charge de ces contraintes pour toi.
Un choix économique donc.
Tout comme les commentaires ci-dessus, c’est un choix économique. Cette rupture est inévitable, tu feras gaffe, mais on passe sur le site de la banque, qui ne laisse souvent que le choix du logo en customisation …
@ Guillaume et Loris > Oui la page en question est bien hébergée par la banque, mais ce n’est pas une raison pour utiliser du Times New Roman avec un fond de page cardo !
Plus sérieusement, puisqu’il s’agit d’une raison économique, il serait intéressant de calculer le taux d’abandon entre la page de récapitulatif et la page de confirmation. En multipliant ce taux par le nombre de transactions et le panier moyen vous obtenez le “coût” de cette rupture d’expérience (à comparer avec le coût d’hébergement de la page).
Pour avoir déjà travaillé sur des problématiques de ce type en tant que développeur je tenais simplement à signaler que beaucoup de sites utilisent une solution de paiement packagée (type Paybox) sur laquelle il n’est pas forcément possible de configurer beaucoup de choses (couleur du fond, police, images, …). Ce n’est pas une excuse mais une constatation.
@Guillaume j’aurais plutôt penché pour la solution SIPS (développée par Atos) pour le site Archiduchesse comme pour le site RueDuCommerce
Une solution comme Payline permet de personnaliser totalement sa page de paiement…
Mais est-ce toujours nécessaire ?
La réponse est assez simple : si tu es un e-commerçant inconnu, le consommateur sera peut être plus rassuré par une page de paiement… qui ressemble à une page de paiement tout à fait banal… Une extrême personnalisation pouvant l’inquiéter.
A l’inverse, un site à forte notoriété (comme l’exemple cité si dessus de la FNAC) peut se permettre une mise en page du paiement tout à fait intégrée dans sa charte graphique. La caution de la marque apportant une vraie assurance sur cette partie… très stratégique… et trop souvent oublié des pros du tunnel d’achat…
Je rappelle qu’une étude sur le web “US” estime à 44 milliards de dollars le manque à gagner sur les pages de paiement…
Voici un article intéressant à ce sujet : http://payline-paiementenligne.blogspot.com/2010/10/tant-deffort-pour-rien.html
Avec a petite expérience en e-commerce, je vais me contenter de dire que tout est résumé dans le commentaire de oursy
@Oursy Donc selon toi, une page de paiement doit être moche, parce que de tout temps, ces pages ont été moches ?
Je ferai simplement remarquer qu’en plus d’être moche, comme le dit Frédéric, c’est aussi illisible, mal organisé, peu guidant, et pas à jour (les pictos de sécurité qui datent de netscape 4). Pouvoir attacher une simple feuille de style réglerait le problème.
Mais c’est sans doute une solution qui est proposé aux PME, qui n’ont aucun poids pour faire changer le chose.
@ Oursy > Un bon point pour toi. Cette remarque fait écho à un (très) vieux billet sur l’élasticité du design et sur le fait que les sites moches paraissent inoffensifs donc au final plaisent (ex : Craigslist). Un paradoxe interessant qui peut se vérifier dans le e-commerce.
@ Oursy : C’est aussi sous cet angle que je vois les choses.
La seule chose qui je pense pourrai changer la donne, c’est la standardisation de la mise en page de ces espaces de paiement.
Cela permettrait l’application de la charte graphique du site vendeur tout en proposant au client une interface “connue”.
@ RaphaelY : Je ne defends pas la laideur !!!Il est rassurant de constater que les pages “standards” ne sont pas toutes “moches”. Il reste effectivement quelques “formulaires de paiement” à la “netscape4” qu’une certaine réserve m’interdit de citer… mais ce n’est heureusement pas toujours le cas !
@ frederic : le syndrome Craigslist se retrouve sur leboncoin…dont le lancement en France date de 2006 mais le “look and feel” de 1998…
Comme d’autre, je suis en phase avec Oursy.
Les créateurs du site leboncoin disait eux-mêmes faire du web 0.2. Avec une certaine réussite !
Sinon pour revenir au sujet, j’ai souvent rencontré les mêmes soucis avec SIPS d’Atos qui est compliqué à personnaliser. Je crois que Vente-Privée a plutôt bien réussi l’intégration de cette solution… mais VP n’est pas Archiduchesse.
Excellent article.
Ce qui serait intéressant, c’est de connaître l’impact du changement de cette page de paiement sur le taux d’abandon, le chiffre d’affaire et le taux de transformation global du site.
bonjour,
c’est bien peu de le dire.. les banques ne sont pas a la page ;)
et que dire du 3d secure !!
Hello à tous, j’arrive un peu en retard, mais j’avais pas vu qu’on parlait d’Archiduchesse : )
La page en question est celle de la banque (la BNP, mais celles des autres banques sont à peu de choses prêt les mêmes, puisque c’est Atos). Effectivement elle est affreuse, et perturbante pour certains (plus qu’elle n’est rassurante à mon avis) mais on ne peut absolument rien y changer, si ce n’est leur fournir un logo comme on l’a fait.
Et encore c’est rien en comparaison de l’interface d’admin qui se cache derrière, entièrement faite avec un Oric Atmos depuis un caravane bulgare … : )
Pour avoir opéré le changement (Page de paiement déporté > Page de paiement intégré) il y a quelques mois au sein de DoYouBuzz, voilà mon retour d’expérience à ce sujet :
– cela nous coûte MOINS cher d’utiliser l’API de notre plateforme de paiement qu’une page déportée
– nous avons clairement gagner en ergonomie et simplicité de navigation (le choc émotionnel était bcp plus important lorsque l’utilisateur était redirigé vers un formulaire non brandé et clairement irritant graphiquement)
– nous pouvons désormais tracker l’ensemble du processus de paiement via notre solution d’analyse d’audience (ce qui n’était pas le cas auparavant avec la page de paiement déporté, et cet avantage permet ensuite d’autres optimisations > opportunités de )
– en terme de taux de transformation, ce dernier a légèrement augmenté (et pour réponse à @Oursy, nous ne disposons pourtant pas de la notoriété de la FNAC ou consort…^^)
Je trouve néanmoins la remarque d’Oursy très pertinente, mais n’oublions pas que les internautes français ne sont pas encore tous des habitués du paiement sur Internet.
Je pense qu’il vaut mieux proposer un formulaire de paiement clean intégrant l’image de votre marque ainsi que des éléments de réassurance, l’expérience utilisateur s’en trouvera forcément améliorée, plutôt qu’une page déportée anti-ergonomique ^^
PS : cela n’empêche pas que M. Cavazza a bien raison de râler contre ces formulaires de paiement horribles par défaut. Ils pourraient au moins changer la police utilisée :)
L’apparence de cette page de saisie des codes bancaires est un vrai problème lié au module de paiement de la banque. Ce n’est hélas pas le seul puisque la plupart des solutions de suivi statistiques (Google Analytics par exemple) des CMS ne confirme la commande que si le client revient sur la boutique. Mais les solutions banquaires (en particulier Atos) ne propose pas de retour automatique… D’où un problème de fiabilité des statistiques e-commerce.
Et les banques ne semblent pas du tout s’intéresser à ces problèmes…
@ Oursy et Christophe > Je ne trouve pas que le bon coin puisse être qualifié de site au design “rétro”, il est plutôt en phase.
@ Florent > C’est très intéressant ce que tu nous dis là. Donc a solution hébergée coûte moins cher, c’est bien ça ?