Propulser un site en version Responsive Design n’a rien de nouveau. Nous réalisons des sites adaptés à l’expérience utilisateur sur mobile depuis des années maintenant. Nous sommes censés être tous rodés à l’exercice.
Pas sûr. Les sites ont l’obligation d’être simplifiés, optimisés et sécurisés jusqu’au bout des étapes du panier.
Cet article traite des éléments à prendre en compte pour garantir une navigation optimale sur le mobile et en particulier au sein du tunnel d’achat.
Récapitulons le problème constaté.
Toutes les études le montrent. Le périphérique qui domine est désormais le smartphone.
Question.
Comment le taux de conversion évolue-t-il avec l’accélération des connexions depuis mobile ?
Pour y répondre, nous vous présentons ci-dessous 2 tableaux.
Le premier montre l’évolution du taux de conversion tous supports confondus.
Le second illustre l’évolution des usages entre connexions via Desktop / Mobile / Tablette.Le parallèle est frappant.
Pendant que les connexions depuis mobile augmentent, le taux de conversion global de l’industrie de l’eCommerce baisse.
Question.
Pourquoi ?
Les réponses ont été apportées dans une étude réalisée par ComScore en 2017: “Mobile’s Hierarchy of Needs,”
D’après cette analyse, les raisons pour lesquelles les internautes ne transforment pas sur mobile sont les suivantes:
> 20,2%: Doutes concernant la sécurité de la transaction
> 19,6%: Impossibilité de se rendre compte des détails du produit
> 19,6%: Impossibilité d’afficher différentes pages et comparer les produits
> 19,3%: Problèmes liés à la pertinence de la navigation au sein du site
> 18,6%: Impossibilité d’afficher les détails du service lié au site marchand
Récapitulons.
Les internautes sont désormais majoritairement des mobinautes.
Les mobinautes sont moins enclins à transformer pour les raisons décrites ci-dessus.
Voici donc les 10 commandements pour inverser la courbe et optimiser son tunnel d’achat auprès d’une audience sur mobile.
C’est la base. Et à y réfléchir, cela prend tout son sens.
Il faut penser son site mobile par rapport à la manière avec laquelle les mobinautes manipulent un smartphone.
Ci-dessous, nous vous proposons les 3 variantes d’après l’étude « The good, OK and bad areas for mobile users that cradle their phones. (Image: UX Matters) »
Cela permet de se rendre compte très facilement des zones chaudes et froides sur une page mobile. Qu’est-ce qui est vu sur la page, qu’est-ce qui est masqué par le doigt, par la paume ?
Où sont les zones très facilement cliquables parce que situées très exactement sur le parcours du doigt du mobinaute ?
Tout est là !
C’était déjà établi.
> Sur un site, il faut aller à l’essentiel pour ne pas perdre l’internaute dans des explications inutiles.
> Sur un site, il faut privilégier le bien au beau. Le juste au riche.
Ces adages sont encore plus vrais sur mobile. Et ils sont même encore plus vrais lors de la navigation au sein du tunnel d’achat où la seule chose qui intéresse le mobinaute est d’avancer vers la transaction.
Pour accélérer la prise de décision durant la phase de tunnel d’achat voici quelques conseils à garder à l’esprit:
> Ne conserver que l’essentiel. Il n’est plus nécessaire ici d’essayer de faire de l’upsell, ou du cross-sell, ou encore la promotion des réseaux sociaux. De manière générale, l’internaute se situe là où la chose qui l’intéresse, et donc qui vous intéresse, c’est de réaliser la transaction. Centrer les actions pour optimiser l’acte d’achat, et par tous les moyens éviter de le distraire pendant qu’il valide son panier.
> N’intégrer aucune image sur les pages. Les seuls visuels qui sont acceptables sont les pictos de réassurance ou les boutons CTA. Vous ne souhaitez pas distraire l’oeil de l’internaute.
> L’intégralité des textes présents sur les pages doivent être corrélés à des informations autour de l’acte d’achat en lui-même. Rien d’autre.
> Ne prenez aucune liberté sur l’usage de polices. Evitez tous les effets « waouh ». Rester sobre, efficace durant tout le process de conversion.
En conservant la simplicité du design des pages Panier, vous évitez tous risques de perte d’attention de l’internaute et le maintenez dans l’acte d’achat.
Un élément de réassurance sur un site, c’est un message envoyé à l’internaute: « Hey, tu ne risques absolument rien chez nous ! Tes informations sont en sécurité, le service proposé est optimal ! C’est bon, tu peux acheter, on gère ! »
L’élément de réassurance par excellence, que tout site m-commerce doit faire figurer est le certificat SSL. Mais il y en a d’autres.
> Livraison garantie
> Paiement sécurisé
> Garantie du produit
Autant de rappels qui permettront à l’internaute de se sentir en toute sécurité durant l’intégralité du processus d’achat sur le site.
Autre technique utilisé. Le transfert de valeur via l’utilisation de noms connus.
C’est le cas en intégrant PayPal comme option de paiement.
Ou encore en permettant de se logguer sur un site via ses identifiants Amazon.
Le mobinaute se dira naturellement qu’il n’y a aucun risque en continuant sa navigation sur le site en question.
Lorsque l’internaute est au sein des pages panier, la dernière chose que vous souhaitez faire, c’est l’éloigner de l’acte d’achat. C’est vrai quel que soit le device.
Vous ne devez pas lui permettre de revenir en arrière.
Mais alors, comment faire, si les internautes souhaitent modifier la quantité, la couleur, la taille, ou encore le modèle du produit qu’ils viennent d’ajouter à leur panier ?
NE LES LAISSEZ PAS REPARTIR EN ARRIERE, INTEGREZ CES MODIFICATIONS DIRECTEMENT AU SEIN DE LA NAVIGATION DU TUNNEL !
Lorsque les internautes arrivent au sein des pages panier, la première étape consiste en un récapitulatif des produits qu’ils souhaitent acheter.
Vous intégrez au sein de cette étape, pour chacun des produits mis au panier, un bouton « MODIFIER ». Au clic, une popup apparaît (style lightbox) avec la possibilité pour l’internaute de modifier la déclinaison du produit.
Il s’agit simplement de la page produit en question, superposée par dessus la page Récapitulatif du panier. L’internaute ajuste son produit, sauvegarde ses changements sans avoir quitté le tunnel du panier.
L’internaute qui renseigne des éléments relatifs au panier depuis un desktop, n’a aucun problème à remplir son nom, son adresse, son son mail ou encore ses informations de paiement.
Sur mobile c’est différent.
Certes l’internaute inconnu du site en question devra produire quelques efforts tactiles pour aller au bout de son process d’achat, mais l’internaute déjà client, lui, doit voir sa navigation simplifiée à l’extrême.
Voici quelques clés pour simplifier le login ainsi que le parcours checkout au sein du panier:
> Proposer le paiement sans passer par les étapes de création de compte (le guest checkout)
> Proposer le paiement en 1 clic
> Proposer de s’identifier en un cic via une source fiable comme Facebook par exemple
> Proposer le paiement depuis des organismes de confiance comme Paypal, Google Wallet ou encore Stripe
Cela a été dit. Cela est répété.
Lorsque l’internaute est sur les pages panier, la dernière chose souhaitée est de le distraire de l’acte d’achat.
Le site s’arrange alors pour notamment supprimer sur ces pages le menu hamburger et ainsi « coincer » l’internaute dans l’entonnoir du panier.
Ce genre de méthode peut s’avérer intimidante si la différence entre le design des pages panier est trop différent de celui du reste des pages du site.
Il est primordial de donner à l’internaute des repères visuels. Cela le rassure et lui permet de répondre instantanément à des questions qu’il peut se poser:
> combien de formulaires devrais-je remplir ?
> quelle genre d’informations va être demandée ?
> est-ce que je pourrais revoir le produit avant de passer la commande ?
etc.
Si le processus du panier est structuré en différentes étapes, il est indispensable de proposer en haut de page le détail de chacune d’entre elles ainsi que leur chronologie, mais également de mettre en avant l’étape à laquelle l’internaute se situe.
Généralement, Ces éléments sont caractérisés par une barre horizontale segmentée avec chacune des étapes du panier en question.
C’est bien, mais il y a mieux.
A l’instar de placer ces repères de manières horizontale, il est préférable de segmenter les étapes par la verticale.
L’internaute a ainsi l’impression de rester au sein de la même page pour l’intégralité du processus d’achat.
L’univers ambiant reste identique, seul le contenu défile à chaque clic sur le CTA.
C’est le cas de Sephora – voir exemple ci-dessous.
Soyez méticuleux lors de la mise en forme des formulaires présents sur mobile.
Il y a en effet, beaucoup moins de liberté laissée à la créativité sur mobile que ce que l’on peut en retrouver sur version Desktop.
> tous les champs des formulaires doivent avoir la même largeur -> la largeur totale de la page
> limiter le nombre de champs à l’essentiel
> mentionner spécifiquement le nom de chacun des champs (idéalement au dessus du champ ET directement au sein du champ)
> utiliser au moins une taille de 16 pour la police
> utiliser une taille critique pour les champs de manière à ce que l’internaute puisse les renseigner sans avoir à zoomer
> utiliser un repère facilement identifiable pour différencier les champs obligatoires des champs facultatifs
> indiquer à l’internaute qu’une erreur est commise immédiatement après que le champ est rempli.
> intégrer les CTA à la fin du formulaire.
> Permettre à l’internaute et à son navigateur de remplir automatiquement les champs du formulaire
> Intégrer HTML tabindex pour permettre à l’internaute de basculer d’un champ au suivant sans avoir à cliquer sur le champ suivant et en restant concentré sur le clavier !
> Embarquer par défaut un formulaire qui va automatiquement copier les informations de livraison comme étant des informations de facturation
> Personnaliser le clavier automatiquement selon la typologie des champs à renseigner (lettres vs chiffres)
Il sera impossible de tout automatiser. L’internaute devra parfois produire lui aussi du contenu !
Toutefois, il s’agit de garder en tête que tout ce qui pourra être automatisé, devra l’être.
La réflexion autour des boutons d’un site revient à penser: leurs placements et leurs couleurs.
Sur mobile, il faut intégrer un autre facteur :
La taille.
Oui, sur mobile, la taille compte !
Attention !
Lorsque l’on parle de taille, on ne parle pas que de l’espace que prend le bouton sur la page.
Souvenez-vous le 1er commandement, et le placement des éléments par rapport « la zone du pouce ».
La taille ici, c’est aussi de s’assurer que le bouton aura la visibilité nécessaire et suffisante pour que n’importe quel utilisateur puisse cliquer dessus sans avoir à changer la position de ses mains.
Donc votre objectif est de penser des boutons qui:
> sont situés en bas de page du panier
> prennent toute la largeur de la page (visible et facilement utilisable pour droitier comme pour gaucher)
Vous avez tout fait. Tout est la, en place sur le site, c’est propre, c’est pertinent, pour droitier, pour gaucher, ça ne peut que marcher.
Ça ne sera pourtant pas une surprise si malgré tout certains internautes ne vont pas au bout de l’acte d’achat.
Il existe une alternative entre l’achat et l’abandon de l’achat.
Permettez aux internautes d’enregistrer leur panier pour le récupérer plus tard après réflexion, ou débat ! Proposez leur par exemple de transformer leur panier en liste de souhait !
Attention, cette option doit être insérée comme étant une éventualité, pas comme une alternative.
En d’autres termes, c’est présent, c’est visible, mais ça l’est moins que les traditionnels boutons relatifs à l’achat.
Voilà, 10 commandements pour optimiser le tunnel d’achat sur mobile.
N’hésitez pas à nous contacter via notre page contact ou en nous rendant visite au sein de nos agences webmarketing de Strasbourg ou de Lille !
