Conseils de la semaine : comment optimiser vos formulaires ?

Conseils de la semaine : comment optimiser vos formulaires ?

Les formulaires, essentiels aux sites E-commerce, sont la clé de votre conversion. Eléments phares de votre tunnel d’achat, ils se doivent d’être simples, logiques et pertinents. Combien de questionnaires incompréhensibles découragent les utilisateurs au point de les faire quitter le site ? L’optimisation de formulaire est un art délicat qui dépend de votre cible et des attentes de celle-ci. Il existe cependant de nombreuses astuces pour améliorer leur performance, éviter les erreurs de saisies et faire gagner du temps à vos internautes. Nous vous livrons cette semaine quelques recommandations et leurs explications pour réduire le taux d’abandon de vos formulaires.

Simplifiez la structure du formulaire afin  de rendre intuitif l’ordre de complétion

Un formulaire trop complexe, avec trop de blocs et trop d’étapes va perdre votre utilisateur. Notre premier conseil sera donc de simplifier au maximum la structure de celui-ci et d’assurer la linéarité de ses contenus.

L’enchainement des champs de formulaire doit suivre une logique : pour les champs d’adresse par exemple on respectera le format postal avec les champs adresse, code postal et ville qui s’enchainent. Si votre formulaire contient beaucoup de champs, il est conseillé de le découper en plusieurs étapes (3 à 4 étapes maximum).

Au-delà de la logique d’enchainement des champs, l’important est de conserver au sein de chaque page une lecture linéaire, c’est-à-dire une lecture au scroll. Sans linéarité, l’œil de votre internaute vas être attiré vers trop de directions inverses et zigzagueras entre vos différents champs, avec pour conséquence d’en oublier certains ou tout simplement de s’égarer. Dans cette même logique, placer le nom des champs au-dessus des champs permet de lire l’ensemble des contenus dans le même sens, de haut en bas.

Organisation linéaire sur le site de Leroy Merlin

Organisation linéaire sur le site de Leroy Merlin

Limitez les erreurs de complétion

Les erreurs de complétion sont plus que fréquentes sur les formulaires : il est rare qu’un internaute remplisse avec succès tous les champs dès sa première tentative. Plusieurs optimisations vont vous permettre de limiter ces erreurs en l’aidant à comprendre ce qu’il n’a pas réussi. Affichez clairement les différents champs erronés : en les soulignant, les encadrant d’un trait épais, voire en les surlignant. Pour les formulaires plus longs, vous pouvez aussi mettre en place un système d’ancrage pour directement centrer la page sur l’erreur commise. Un bon moyen de limiter les tentatives de validation de formulaire qui échouent est d’ajouter une icône de validation à chaque champ correctement rempli, au fur et à mesure de leur complétion.

Sur le site de Petit Bateau, le formulaire indique les champs correctement remplis et signale les omissions

Sur le site de Petit Bateau, le formulaire indique les champs correctement remplis et signale les omissions

Rendez visibles votre call-to-action (CTA) de validation de formulaire

Pensez à ce que le call-to-action de validation de formulaire soit bien visible. En marquant la fin d’un formulaire, il constitue un repère essentiel dans le processus de complétion. Il doit se différencier graphiquement de tous les autres CTA du formulaire par sa forme, sa police, sa taille. Son affordance, c’est-à-dire sa capacité à suggérer sa propre utilisation, doit être manifeste. Dans l’idéal, le bouton de validation devrait se trouver au-dessus de la ligne de flottaison et à minima en bas à droite de la page : l’œil a en effet naturellement tendance à balayer une page Web de la même façon qu’un texte, c’est à dire de gauche à droite et de haut en bas. En plaçant le CTA de validation au-dessus de la ligne de flottaison, et donc a fortiori l’ensemble des champs du formulaire, on renforce l’impression de simplicité et de rapidité de la complétion des champs.

Site de B&You : CTA de validation visible, au-dessus de la ligne de flottaison

Site de B&You : CTA de validation visible, au-dessus de la ligne de flottaison

Certains formulaires comprennent trop de champs pour respecter une lecture verticale et la présence de tous les champs au-dessus de la ligne de flottaison. Lorsqu’il n’est pas possible de déplacer certains champs sur d’autres pages (les champs d’adresse en page livraison par exemple) une solution peut être pour épurer un formulaire trop long de développer votre formulaire pour qu’il se déroule au fur et à mesure du remplissage, à l’aide de champs dynamiques. Au fil de son remplissage, l’internaute découvrira les nouveaux champs à remplir.

Sur le formulaire de Bouygues, les nouveaux champs s’affichent au fur et à mesure, en fonction de la complétion

Sur le formulaire de Bouygues, les nouveaux champs s’affichent au fur et à mesure, en fonction de la complétion

Formulaire dynamique sur le site de B&You : les champs ne s’affichent que si l’internaute désire conserver son ancien numéro et coche la case « oui ».

Formulaire dynamique sur le site de B&You : les champs ne s’affichent que si l’internaute désire conserver son ancien numéro et coche la case « oui ».

Guidez vos internautes lors de leur complétion

Remplir un formulaire reste une étape fastidieuse, aussi l’internaute doit être convaincu de l’intérêt qu’il a à le remplir correctement. Par exemple, un texte d’accroche en début de formulaire qui explique le bénéfice client, ex : « vous allez bientôt pouvoir jouer en ligne » sur un site de paris, va conforter l’internaute sur l’utilité du remplissage qu’il va effectuer.

La complétion d’un  champ de formulaire ne doit pas générer d’hésitation avant remplissage. Pour accompagner l’internaute dans sa démarche, proposez-lui des « bulles explicatives » qui vont lui signifier comment correctement remplir les champs avant qu’il le remplisse (et pas après, une fois qu’il a fait une erreur). Par exemple, on peut avoir au survol du champ une bulle qui apparait avec un descriptif correspondant ou bien une icône d’aide, elle aussi active au survol : « entrez ici votre nom de famille », « le mot de passe doit contenir au moins un chiffre et une lettre ». Le descriptif des champs doit s’afficher automatiquement, sans que l’internaute n’ait à cliquer sur un bouton supplémentaire (pensez à réduire le temps passé sur le formulaire).

L’internaute est guidé dans sa complétion sur le site de Bouygues Télecom

L’internaute est guidé dans sa complétion sur le site de Bouygues Télecom

Pour renforcer l’engagement de l’internaute dans sa complétion, l’ajout d’éléments réassurant est toujours utile. Par exemple, la protection des données personnelles est une mention légale et obligatoire, demandée par la CNIL (voir loi Hamon). L’utilisateur pourra remplir son formulaire en sachant formellement que ses données de seront pas revendues ou utilisées à mauvais escient.

Mentions légales et réassurance bien affichées sur le site de Bouygues Telecom

Mentions légales et réassurance bien affichées sur le site de Bouygues Telecom

Distinguez clairement les champs obligatoires des champs facultatifs

Les champs obligatoires et les champs facultatifs doivent très clairement se distinguer, par exemple par la présence d’astérisques, et être nettement ordonnés. L’erreur serait sans doute de placer un bloc facultatif entre deux blocs obligatoires : dans la mesure du possible, créez une logique pour qu’optionnel et obligatoire se retrouvent côtes à côtes.

Soyez « Mobile Friendly »

Remplir un formulaire sur mobile est bien plus fastidieux que sur desktop. La version mobile de votre formulaire doit être simplifiée au maximum. Le design et l’ergonomie doivent être adaptés à une consultation mobile, soit avec la création d’un site mobile, soit avec un site Web développé en Responsive design. Sur mobile, il est primordial de réduire le nombre de clics, pour une utilisation plus fluide. Pour compléter leur date de naissance, proposez par exemple à vos internautes un menu déroulant, beaucoup plus instinctif. Optimisez aussi le remplissage des champs : votre formulaire version mobile doit être plus simple, plus concis, plus rapide.

formulaire_site_mobile  formulaire_site_mobile_2

 

Débarrassez-vous du superflu

Pour la validation du formulaire, on trouve encore très régulièrement l’utilisation de captchas, qui sont pourtant une grande source de frustration pour les internautes. Il faut se rendre à l’évidence : ils recopient souvent mal les données et doivent s’y reprendre à plusieurs fois, ce qui n’est vraiment pas idéal en termes d’expérience. Notre recommandation est donc de remplacer les captchas anti-robot par des solutions plus ergonomiques. Il est notamment possible d’insérer un code spécial pour repérer les robots, sans que cela impacte l’expérience utilisateur. Il est par exemple possible de cacher un champ intitulé “nom” au visiteur avec du CSS. Les visiteurs ne le verront pas mais les robots rempliront ce champ par un nom aléatoire par défaut, se faisant ainsi piéger.

Gagnez du temps

Pour faire gagner du temps sur votre formulaire, pensez à la fonctionnalité de saisie automatique. Celle-ci permettra de remplir les formulaires en un seul clic, en fonction des données pré-remplies par l’internaute.

En conclusion : mettez-vous à la place de votre internaute. Le bon réflexe consiste à  anticiper et comprendre votre expérience utilisateur !

Authored by: Marine Hortemel

Head of Marketing & Communication