Pour commencer, faisons un point Larousse. Ou plutôt DéfinitionsMarketing.com. Le Checkout, terme bien connu des univers du paiement et de l’e-commerce, correspond à “la phase qui consiste, sur un site marchand, à passer du panier comprenant les articles sélectionnés, à la page de confirmation de prise en compte de la commande. La phase de checkout comprend essentiellement la saisie des données relatives au paiement et si besoin à la livraison.”
À travers cette définition, on comprend déjà à quel point il est important. Un bug, une incompréhension, un manque de clarté, ou encore un sentiment d’insécurité… et c’est tout le processus d’achat qui est remis en question. Ainsi, si les aspects techniques et pratiques doivent être pris en compte dans le choix de la “modalité” ou du “format” du Checkout, ce ne sont pas les seuls à entrer en ligne de compte.
L’iframe, la clé d’une expérience utilisateur fluide et optimisée
Si la redirection, ou le fait d’ouvrir un nouvel onglet dans le navigateur dans lequel le client pourra entrer ses données de paiement, est bel et bien de plus en plus rare, insistons sur les raisons pour lesquelles cette modalité est délaissée. Donner l’impression au client qu’il “quitte” le site du marchand en qui il a confiance pour se retrouver sur le site un prestataire tiers inconnu, avec un design différent, est très déconcertant et met une barrière énorme au déroulement fluide et sans friction de l’expérience client lors du parcours d’achat.
C’est ainsi qu’en 1997 la balise iframe est apparue. Elle permet d’imbriquer dans une page HTML (celle du marchand) un élément provenant d’une autre source (le Checkout dans notre cas).
Mais les marchands ont toujours le choix entre deux types d’iframe :
- “Embedded” (cadre de contenu inclus dans la page web du marchand affichant le formulaire)
- “Pop-in” (cadre de contenu lié à la page web du marchand et s’ouvrant par dessus celle-ci)
La question qui pose est alors de savoir laquelle de ses deux possibilités choisir et sur quels critères.
Une question primordiale à se poser
En réalité, s’il ne devait y avoir qu’une seule question à se poser par le marchand, ce serait la suivante : lors de l’étape du Checkout globale, avec quels éléments de la page le client/consommateur peut-il continuer d’interagir (clic ou modification)?
Prenons un exemple. Sur le site d’une chaîne de clubs de fitness, le marchand souhaite laisser au client la possibilité de modifier la formule choisie le plus longtemps possible lors du processus d’achat, étape checkout inclue. Il est donc important que, même après avoir commencé à renseigner certaines informations (coordonnées de facturation, signature du mandat), ce client puisse en quelque sorte revenir en arrière pour par exemple ajouter l’option “cours collectifs” en plus de l’accès illimité aux équipements. Dans ce cas, un iframe version embedded sera recommandé car il n’empêche pas, jusqu’au moment ultime du paiement, les interactions avec le reste de la page du site marchand.
Si à l’inverse cette possibilité de modification n’est pas souhaitée par le marchand, la version popin sera alors mieux adaptée.
Comment inclure l’iFrame dans son design ?
Le mode embedded nécessite de bien réfléchir à la taille du cadre qui accueillera le contenu inclus dans la page web du marchand affichant le formulaire, l’idéal étant de prévoir une hauteur de 320 pixels. Si la hauteur du cadre est trop basse, le consommateur devra scroller afin de remplir tous les champs. Trop grande, elle sera par défaut remplie de larges espaces vides et blancs, nuisant à la qualité visuelle de la page. Dans les deux cas, l’expérience client est altérée.
Le mode popin quant à lui offre une adaptation automatique de la hauteur du cadre s’affichant par dessus la page du marchand au fur et à mesure des étapes.
Pour résumer :
Vivez l’expérience SlimPay
