Construire un formulaire web efficace

Formulaire web efficace

Formulaire web efficace

Les formulaires sont présents sur quasiment tous les sites internet, au moins sur la page contact. Les internautes ont donc l’habitude de les remplir, mais vous ne devez pas perdre de vue que le remplissage d’un formulaire est une épreuve pour un internaute. Ce n’est ni amusant, ni distrayant, ni intéressant, il faut donc faire le maximum pour faciliter le remplissage des formulaires présents sur votre site web, notamment pour ceux qui vous permettent de récupérer des prospects.

En attendant de trouver une solution miracle pour que le remplissage de formulaires soit amusant, voici quelques conseils d’ergonomie à mettre en place sur vos formulaires pour améliorer leur taux de conversion.

Réduire le nombre de champs

La première chose à faire est de supprimer tous les champs qui ne vous sont pas indispensables. S’il a bien une chose à retenir sur les formulaires, c’est que plus ils sont courts, plus les internautes sont enclins à les remplir. Autant que possible, limitez vos formulaires aux informations indispensables à l’exploitation des prospects.

Ce n’est pas toujours évident d’enlever des champs car les services commerciaux qui vont récupérer les prospects générés par le formulaire préfèrent avoir un maximum d’informations. Si vous voulez les convaincre, vous pouvez mettre en place des tests de différentes versions du formulaire avec plus ou moins de champs et leur montrer les résultats. Vous pourrez ainsi trouver plus facilement un compromis sur les champs à supprimer quand ils auront compris que le volume de prospects sera plus important avec moins de champs à remplir.

Nouveau call-to-action

Améliorer la gestion des erreurs

La gestion des erreurs (et donc, l’aide au remplissage) est cruciale pour que votre formulaire soit performant. Elle ne doit pas être agressive envers l’internaute et elle doit l’aider à remplir le formulaire facilement. Pour cela, il faut absolument proscrire les boites alertes javascript qui s’affichent à la validation du formulaire ou pire encore l’affichage des message d’erreurs après le re-chargement de la page. Vous pouvez aujourd’hui facilement mettre en place un système de gestion d’erreurs en ajax qui aide l’internaute au fur et à mesure du remplissage en indiquant les erreurs à côté du champ concerné. (par exemple avec Phatfusion et Mootools)

Il est également important de formuler vos messages d’erreurs afin qu’ils ne soient pas agressifs.

Aligner les labels

Les labels de votre formulaire peuvent être alignés soit sur la gauche, soit sur la droite. Il n’y a pas de certitude sur l’alignement qui fonctionnera le mieux pour votre audience, mais il a été prouvé scientifiquement que le cerveau humain appréhende plus facilement l’alignement à gauche, tandis que l’alignement à droite demande un peu plus de travail de compréhension. Je vous recommande donc d’aligner vos labels à gauche, mais je vous conseille aussi de tester l’alignement à droite pour valider la préférence de votre audience.

Alignement des labels

Exemple de lignes de formulaires colorées

Mettre en avant la politique de confidentialité

Si vous demandez à vos visiteurs de saisir leur adresse mail, il est pertinent de mettre un lien vers votre politique de confidentialité pour les rassurer sur l’utilisation qui sera faite de leur adresse. Cette préoccupation va sans doute  devenir de plus en plus importante pour les internautes.

Colorer les lignes

Afin d’améliorer la lisibilité de votre formulaire, notamment pour définir quel label correspond à quel champ, vous pouvez définir une légère couleur de fond sur chaque ligne du formulaire. Ainsi vous réduirez le temps de compréhension nécessaire à l’internaute et vous faciliterez le remplissage du formulaire.

Mise en évidence du champ actif

Lignes colorées pour faciliter la lecture

Mettre en évidence le champ à remplir

Dans le même ordre d’idée, il est pertinent d’indiquer à l’internaute quel est le champ actif, en modifiant la couleur  de la bordure du champ ou en ajoutant un indicateur juste à côté.

Mise en évidence du champ actif

Mise en évidence du champ actif

Faciliter le remplissage des champs typés

La tentation est souvent grande de mettre des limites fortes sur les champs de type email, adresse du site, date, téléphone… pour s’assurer que la donnée sera fournie au format souhaité. Attention à ne pas être trop restrictif car vous pourriez perdre des conversions si vos internautes perdent patience face à la rigidité du format demandé. Il est plus raisonnable d’être assez souple sur le format des données et de retraiter la donnée plus tard.

Marquer les champs obligatoires

Ça parait évident mais il faut quand même le préciser. Les internautes prennent l’habitude de reconnaître les champs obligatoires grâce aux indications fournies sur le formulaire. Faites-leur donc plaisir et indiquez-les. (Si vous avez suivi mon premier conseil, la question ne se pose pas puisque vous allez supprimer tous les champs qui ne sont pas indispensables 😉 )

Regrouper les champs par thèmes

Si votre formulaire est long et comporte beaucoup de champs, il est conseillé d’organiser votre formulaire en plusieurs sous-parties et surtout de bien regrouper les champs complémentaires. Par exemple, faites une partie adresse, une partie informations bancaires, une partie informations personnelles…

Une bonne organisation des champs va permettre de réduire le temps de compréhension du formulaire par l’internaute et diminuer le risque de rebond. Dans l’exemple ci-dessous (formulaire d’inscription à Yahoo), trois parties ont été définies, ceci aère le formulaire et les champs complémentaires sont clairement positionnés ensemble : la compréhension est facilitée.

Formulaire divisé en sous-parties sur Yahoo

Formulaire divisé en sous-parties sur Yahoo

Découper les longs formulaires en étapes

Enfin pour les formulaires vraiment longs, notamment dans les processus d’achat où il est impossible de réduire le formulaire à quelques champs, vous pouvez découper le formulaire en plusieurs étapes. Ceci évitera de décourager les internautes qui découvrent votre formulaire et paniquent devant le nombre d’informations demandées.

Pensez bien à afficher en haut de page à quelle étape se trouve l’internaute pour qu’il puisse voir combien il lui en reste.

Formulaire en étapes sur le Fnac

Formulaire en étapes sur le Fnac

Voilà, maintenant vous avez de quoi améliorer vos formulaires et augmenter votre taux de conversion. Gardez à l’esprit qu’un formulaire doit être le plus simple et instinctif possible pour bien transformer.

Si vous souhaitez transformer plus de visiteurs en prospects, n’hésitez pas à nous contacter !

Nouveau call-to-action

7 commentaires

  1. Twitteel

    Bonjour,

    Très bonne synthèse pour améliorer les performances du remplissage des formulaires.
    J’aurai insisté en plus, sur la possibilité de faire marche arrière dans le processus par étapes et en corolaire, de sauvegarder rapidement les informations pour ne pas les perdre en cas de mauvaise manipulation ou erreur dans la page.

  2. Eric

    Bonjour Twitteel,

    Effectivement pour les formulaires en étapes, il est très intéressant de proposer des options permettant de modifier les informations facilement et ne pas tout perdre sur une mauvaise manipulation. Mais on va dire que c’est de l’optimisation de formulaire avancée, alors que le but de l’article est poser les bases 😉

  3. Eric

    Bonjour Adrien,

    Je n’ai effectivement pas abordé ce sujet dans l’article, je vous recommande de tester différentes variations de votre formulaire avec les labels alignés à gauche, à droite et à l’intérieur des champs, ainsi vous validerez le format qui convient le mieux à votre audience.

  4. Waaaouh

    Mais c’est qu’il est super intérressant ce blog… Ce billet vient d’attirer mon attention dans ma liste interminable de flux. Billet que j’ai tout de suite relayé sur un groupe de discussions auquel je participe. Je vais un peu plus fouiller pour voir les autres petites merveille que j’aurai pu rater 🙂 Bonne continuation

  5. Raphaël

    Bonjour à tous,
    tout d’abord merci Eric pour ces conseils très intéressants.
    Concernant la question posée par Adrien au sujet des labels à l’intérieur des champs j’aurais quelques remarques à ajouter.
    La première, et la plus importante à mes yeux, est d’ordre technique. En effet, avec ce fonctionnement il arrive régulièrement que le libellé disparaisse définitivement une fois que l’internaute a cliqué dans le champs. Or si le prospect décide de ne pas le remplir tout de suite et d’y revenir quelques minutes plus tard, cela peut devenir délicat (obligé de recharger la page en cas d’oubli des informations demandées). Le mieux pour cela est de faire en sorte qu’au moindre clic hors du champs le label réapparaisse (c’est le cas pour gymglish).
    La deuxième est plus subjective. On pense très souvent qu’inscrire les labels au sein des champs allège le formulaire. C’est à mon goût à la fois vrai et faux. Personnellement il me semble que dans un formulaire complet (prenant l’ensemble de la page web) cela peut au contraire donner une sensation de tassement et de non utilisation de l’espace disponible, donc implicitement de surcharge. A l’inverse dans un espace plus restreint comme sur l’exemple de http://www.gymglish.fr (site qu’au passage j’utilise et trouve très intéressant… avis aux amateurs d’anglais désireux de revoir leur niveau à la hausse), je pense qu’indéniablement cela rend plus efficace le « mini-formulaire ».
    Enfin pour en finir avec mes remarques, il me semble qu’opter pour une couleur légère (gris et non noir par exemple) est aussi un moyen de rendre moins imposant ces « libellés internes ».
    Bonne journée à tous

  6. Vince

    Pour REGROUPER LES CHAMPS PAR THEMES, il y a un truc vieux comme Erode en HTML, ça s’appelle FIELDSET

    Le thème
    ….
    Contenu de la thématique

    Il est souvent oublié ce marqueur… le pauvre, il n’est pourtant pas deprecated (comment on dit ça en français, lol)

    Mais bon je suis peut-être hors sujet 🙂

    Keep it up guys!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

L'auteur

Eric Huertas

CEO & Consultant E-Business
Expert en optimisation digitale eric met à profit son savoir faire pour répondre au besoin des TPE, PME et Grand Comptes de rentabiliser leurs investissements web et de booster leur activités commerciales.

WordPress Video Lightbox Plugin