La patience est une vertu.
La patience est une vertu.
Publié le 6 mai 2013 dans Actualités, Mobiles, Optimisation de la conversion
6 commentaires
Les formulaires sont inévitables sur un site eCommerce pour rechercher un produit, réserver un voyage ou pour renseigner son adresse de livraison dans le tunnel de commande. Depuis un mobile, ces formulaires mal adaptés deviennent des freins importants à la conversion. Alors faut-il s’adapter à ces nouveaux appareils et comme le faire ? Voici un début de réponse.
La Fevad a indiqué que les ventes sur internet mobile ont augmenté de + 150% en 2012 et représentent 6% du chiffre d’affaires réalisé en 2012, soit presque 3 milliards d’euros.
Les ventes de PC chutent de 13,9% au premier trimestre 2013, la plus forte baisse depuis près de vingt ans selon l’institut de recherche IDC. Une des raisons possibles est la hausse impressionnante des ventes de tablettes tactiles qui aujourd’hui surpassent celles des ordinateurs comme le démontrent ces courbes :
Le nombre d’utilisateurs mobile va selon une estimation dépasser les utilisateurs pc à partir de fin 2013 :
S’adapter dès aujourd’hui est stratégique pour les années à venir. Imaginez votre business dans 2 ans avec un trafic composé de 40% d’utilisateurs mobiles, comment réagirait-il ? Pouvoir naviguer confortablement depuis n’importe quel type d’appareil va peut-être devenir un argument pour les internautes.
Voici l’exemple d’un utilisateur qui souhaite réserver un séjour sur le site Opodo.fr depuis une tablette tactile. Le formulaire commence par une étape simple, la sélection des dates de départ et d’arrivée.
Découvrez l’extrait de ce test utilisateur :
On peut noter un clic par erreur sur une publicité, un comportement hasardeux du clavier après la saisie manuelle de la date, la superposition du calendrier et du clavier en mode paysage.
Ce passage (qui dure environ 5 minutes) démontre la difficulté à remplir un formulaire. Ce site est un exemple mais la plupart des sites du eCommerce français sont dans le même cas, le mobile est une aventure…. périlleuse.
Faut-il entreprendre des modifications sur son site dès aujourd’hui ? Difficile de répondre de manière générale. Selon votre secteur, le mobile peut-être plus ou moins important. Bien souvent, il représente 10% du trafic et a un taux de conversion des plus bas.
Pour mesurer l’importance du mobile sur votre site, vous pouvez utiliser les segments avancés « Trafic sur mobile » et « Trafic provenant des tablettes » dans Google Analytics :
Votre taux de conversion ou votre panier moyen sont-ils éloignés de la version web ? Vous seul pouvez juger de l’urgence à s’adapter à ces nouveaux appareils mais ça peut-être un axe intéressant d’optimisation de vos revenus eCommerce par quelques astuces simples.
Il possible d’optimiser vos formulaire sans entreprendre une refonte importante avec l’arrivée du HTML 5. De nombreux raccourcis ont vu le jour comme la saisie vocale, l’adaptation du clavier au type de champ, les raccourcis d’appels téléphoniques…etc.
Prenons l’exemple d’un champ carte bancaire avec ses 2 contraintes qui sont 16 caractères maximum et de type numérique. Voici le code HTML pour remplir ces 2 conditions :
<input type="number" Exemple : maxlength="16" > pattern="([0-9]|[0-9]|[0-9])"
Un clavier mobile de type numérique pour faciliter la saisie d’informations dans un champ de carte bancaire.
Depuis un ordinateur, aucune différence ne sera visible mais depuis une tablette ou un mobile, le clavier affichera uniquement des chiffres (différent selon l’OS) et bloquera le nombre de caractères à 16. Simple mais diablement efficace en situation de mobilité.
Autre astuce la sélection d’une date au lieu de l’inutilisable calendrier :
<input type="date" Exemple : >
Contacter le service client devrait se faire en 1 clic. Est-ce que vos numéros sont incrustés dans une image ? Utilisez le paramètre permet de composer automatiquement le numéro de téléphone :
<ahref="tel:01234567890">01234 567 890</a>
D’autres champs spécifiques ou astuces existent comme la sélection d’une couleur, la saisie d’un mail, d’une recherche, d’un mot de passe ou l’utilisation du GPS pour trouver un point relais. Vous pouvez consulter la liste des champs adaptés au mobile.
Pensez aussi à travailler la largeur de vos champs et boutons. La largeur minimale recommandée pour un bouton est de 50 pixels mais j’aurais tendance à prendre 70px pour pouvoir visualiser les bords d’un bouton au clic.
Ces adaptations sont une première étape et il reste bien du chemin pour adapter tout un site au mobile. Je ne ferais pas tout un point sur les avantages et inconvénients du responsive design, beaucoup d’articles traitent du sujet. Néanmoins, vous avez d’un côté l’application qui permet de s’adapter à un type d’OS et de l’autre le responsive qui permet de s’adapter à la dimension d’un appareil. Cette seconde solution me semble plus souple et plus adaptée pour le long terme. La nouvelle édition Le Monde est un bon exemple :
Vous avez des questions sur vos formulaires ou vous souhaitez avoir un regard extérieur dessus ? Dites le nous dans les commentaires.
Bonjour Mathieu,
Entre l’application et le responsive, il y a également le RESS (Responsive Web Design + Server Side Components). Je pense que c’est un bon compromis pour les versions mobile et tablette des sites car cela permet d’ajouter des fonctionnalités ou des adaptations liées à l’OS et de garder la souplesse du responsive design.
++
@prestarocket
Bonjour Prestarocket,
Je découvre cette technique qui semble intéressante. On garde l’avantage du responsive, c’est à dire un seul et même contenu sur tous les appareils. Mais comme pour les applications, l’équipe de développement doit s’adapter aux différents OS.
Quelles fonctions pourraient être utiles / indispensables à garder selon toi ?
Mathieu.
Par exemple, on peut charger des images de taille différente selon l’OS (pour diminuer le poids du site sur les mobiles) ou encore présenter un tunnel de commande spécifique à l’iphone etc…
Bonjour Mathieu, un bien bel article et plein de bon sens. D’ailleurs je me demande si je ne vais pas donner le lien à quelques uns de mes clients récalcitrant pour la prise en compte de l’essor du mobile.
2 ans qu’ils repoussent à « adapter » le site pour les tablettes et smartphones . Probablement que le croisement des courbes utilisateurs fin 2013 sera peut être plus parlant pour lui.
D’autant que tu donnes pas mal de pistes pour des solutions non couteuses.
Du coup j’ai envie de fouiller un peu plus sur ton site.
Merci et bonne journée
@Prestarocket Bonjour Prestarocket, je suis d’accord avec toi qu’adapter le chargement des images en fonction de l’appareil est important sur le temps de chargement. C’est d’ailleur le plus gros problème au responsive pour le moment. Il existe plusieurs techniques intéressantes à creuser comme celle ci : http://adaptive-images.com http://css-tricks.com/which-responsive-images-solution-should-you-use/
Concernant l’adaptation d’un tunnel de commande ou tout autre partie du site à l’OS, je n’aime pas trop l’idée qui rend la conception et les mises à jour difficiles. Quelles différences y-a-t-il entre un utilisateur Android, Windows phone et iOs pour qu’ils aient chacun un tunnel différent ?
@RaphSEO Bonjour RaphSEO, merci pour ton commentaire. Faire évoluer les mentalités prend du temps et ces adaptations sont dans un premier conseillées, mais vont vite devenir indispensables pour le web Français. Bon courage dans tes recherches RaphSEO.
[…] sont facilement sélectionnable grâce à leur hauteur, c’est un bon point. Autre bon point, l’identification du type d’information saisie : numérique, mail, texte…etc qui permet d’éviter les erreurs de saisie et de rendre […]