eMarketing — 20 Jun 2011

formulaire spam

On le sait tous, avoir une liste de clients et de prospects est la clé pour réussir un business… Pourtant l’optimisation des formulaires d’inscription, de contacts… est souvent peu pratiquée alors que cela peut permettre d’augment de manière exponentielle le taux de remplissage.

C’est pourquoi dans cet article nous avons rassemblé quelques conseils pour optimiser vos formulaires :

- Indiquez visuellement les étapes s’il y en a plusieurs (via un fil d’Ariane graphique en haut de l’écran), ainsi que le temps pour le remplir si la durée est supérieure à 1 minute.
- Utilisez des textes, boutons… gros et très lisibles, avec une suite logique dans le remplissage (par ordre chronologique de l’action ou du moins au plus engageant).
- Faites afficher des champs supplémentaires en fonction des options choisies, cela permet de soulager la lecture et ne pas surcharger d’informations les internautes (ex: si le client est à l’étranger de nouvelles options sont révélées).
Un autre exemple est visible sur le site de la SNCF : les champs supplémentaires (carte de fidélité…) n’apparaissent qu’en cliquant sur “Recherche Avancée” :

formulaire sncf

- Affichez les champs obligatoires, les conventions de saisie (ex: pour les dates…)… et en cas d’erreur un message doit expliquer quelle est l’erreur où elle se trouve et comment la corriger.

- Pour les sites ou  services en béta ou en ouverture prochaine pensez à mettre en place une mire et un formulaire simples et valorisants. Vous avez là 90 exemples et là 55 exemples particulièrement bien faits.

formulaire coming soon

- Mettez des indicateurs visuels comme des calendriers, des curseurs graphiques (pour voter, pour indiquer la sécurité d’un mot de passe…)…

formulaire groupon

- Pensez à faire de l’upsell ou à mettre en avant des partenariats (ex: coregistration) / inscription à la newsletter.
- Mémorisez les informations, en particulier en cas d’échec du formulaire (ex: j’envoi le formulaire et je reviens sur la page plus tard ou suite à une erreur).


- Indiquez ce qui va se passer après l’envoi du formulaire
(contact, email à confirmer…).


- Ouvrez une nouvelle page de remerciement après l’envoi du formulaire.

- Ajoutez une image de ce que les personnes vont obtenir via le formulaire (ebook, newsletter, échantillon, les bénéfices de votre offre…).

formulaire conseilsmarketing

- Utilisez des polices de caractères lisibles (pas de Times New Roman, mais du Arial ou du Tahoma… mais pourquoi pas une police originale assortie à votre thème) et des boutons assortis à votre charte graphique, gérez les listes déroulantes (avec le choix de mettre “Autre” avec saisie de texte libre) ou le préremplissage avec des données standard…
- Pensez de plus en plus à un remplissage de formulaire optimisé pour le Mobile (iphone, iPad…).
- Alignez le texte et les champs selon la facilité de saisie du formulaire (et la place), par exemple des étiquettes au-dessus des champs permettant une saisie rapide, un alignement à gauche est plus clair (et reste recommandé pour des saisies inhabituelles) mais nécessite un temps de saisie plus long…

alignement formulaires

- Regroupez par thèmes les champs dans les longs formulaires, tout en évitant le scrolling sur la page (préférez des étapes qui s’enchainent via un ordre logique).
- Ajoutez des aides via des boutons “?” ou via un passage de souris sur un texte.
- Placez vos formulaires aux emplacements habituels : login en haut à droite d’une page Web, newsletter en haut à droite de la barre de navigation… Pour vous inspirer vous avez plus de 100 exemples de fenêtres de connexion sur ce lien http://designreviver.com/inspiration/100-sites-with-outstanding-login-forms/.
- Mettez un focus sur le champ en cours de saisie, surtout en cas de long formulaire.
- Pour les formulaires de type newsletter, ebook gratuit… pensez à mettre une pop up qui s’ouvre au bout de X minutes de navigation (comme indiqué dans notre vidéo “4 moyens d’augmenter le nombre d’abonnés à votre newsletter“).
- Ne mettez pas de captchas sur les formulaires de prospects, mais uniquement sur les formulaires sans importance commerciale.
- Ne mettez pas de bouton ‘Vider” le formulaire à côté du bouton “Envoyer”, les internautes ont la fâcheuse tendance à se tromper de bouton.
- Mettez en place des détrompeurs (email, tél…) avec des conseils sur le format à utiliser.
- Sauf en cas de site sensible, évitez de réclamer des mots de passe avec des chiffres/nombres/caractères spéciaux, la taille du mot de passe doit être d’au moins 12 caractères (pas moins !)… En revanche pour les créations de compte indiquez si un login est déjà pris, et si nécessaire proposez un login alternatif.
- Utilisez des appels à l’action plus engageants que “Envoyer” (ex: Je veux recevoir mon guide, Lancer le diagnostic…) à la fin du formulaire.

fin formulaire

- Classez les listes de choix par ordre alphabétique, avec éventuellement en “short list” les 3 ou 4 choix les plus courants.
- Pour les formulaires de contact, ajoutez à côté ou dessous vos propres coordonnées pour inciter à vous contacter aussi via téléphone, chat ou email.

optimisation formulaire de demande d’infos

- Utilisez des vidéos, des animations… qui viennent renforcer visuellement les bénéfices de votre offre.

formulaire animation

- …

Pour réaliser vos formulaires sans faire de code HTML vous pouvez utiliser :
- http://wufoo.com/
- Google Documents
- Aweber (avec gestion des mailing listes & Autorépondeurs)

- http://www.webformfactory.com/

Vous avez quelques exemples de présentation sur l’optimisation des formulaires là :

Learning To Love Forms (Web Directions South ’07)

View more presentations from Aaron Gustafson

Best Practices for Form Design

View more presentations from Luke Wroblewski

Et selon vous, quels sont les conseils que vous ajouteriez et les exemples à prendre en compte ?

Share Button

Related Articles

Share

About Author

(17) Readers Comments

  1. J’utilisais auparavant Zoomerang et Polldaddy pour mes formulaires, je ne connaissais pas Wufoo – découvert grâce à cet article – qui est vraiment un bon outils !

  2. Bonjour,
    Merci pour les conseils et le tuto à propos de la mise en forme des formulaires. Bon continuation :-)

  3. Très bon article qui reprend de nombreuses astuces bien utiles.
    Un grand merci !

  4. Merci pour ce récapitulatif. Il est vrai que je vois encore beaucoup de formulaires qui sont mal optimisés. Même parfois pour quelqu’un qui a des connaissances sur le net il est difficile de remplir un formulaire, au niveau taux de conversion c’est une catastrophe. D’ailleurs il est conseillé de faire test avec différents formulaire. Avec quelques optimisations c’est un taux d’abandon qui peut vite diminuer.

  5. Un article très intéressant!!Merci beaucoup!

  6. Pingback: U:Kintch » Veille 22 Juin

  7. J’aimerais ajouter deux petites choses complémentaires à cette article à ce sujet:
    1) accepter plusieurs format possible. Par exemple pour un numéro de téléphone, il est possible de faire un petit script qui accepte aussi bien un numéro sans séparateur, avec séparateur et accepter plusieurs type de séparateur (virgule, point tiret …). Et pourquoi pas aussi accepter le format du numéro de téléphone international (+33(0) …).
    2) Préremplir des champs dont est presque sur. Par exemple, peu de personne le font mais il est possible de préremplir le champs “pays” en détectant l’adresse IP du visiteur et en associant l’adresse IP avec un pays (il existe des base de données associant les deux sur internet).

    En tout cas merci pour toutes ces astuces bien utiles.

  8. De très bonnes idées… à mettre en pratique.
    Super beaaucoup de (très) bon travail.

  9. Pingback: TransBlogExpress 13 : monde public et Internet, ergonomie et utilisateurs, fin des blogueurs | Choblab

  10. Pingback: Les incontournables de la semaine du 20 juin 2011 | La Blogule de STONEPOWER - Agence Digitale Marseille

  11. Merci pour cet article qui présente de nombreux conseils. L’un des points que je souhaite mettre en avant est la nécessité de limiter le nombre d’informations demandées.

    Les personnes du marketing (j’en suis une :) ) veulent profiter des formulaires pour demander le max d’info. Cependant, souvent cela a pour conséquence de baisser le taux de conversion du formulaire.

    Alors qu’est-ce qui est mieux. Avoir peu de personnes qui passent à l’action mais pour lesquelles on aura de nombreuses informations (qui d’ailleurs seront peut être jamais exploitée) ou proposer un formulaire simple que de nombreux visiteurs vont compléter ?

    Personnellement je préfère la 2nde option. D’autant plus que rien ne vous empêche par la suite de qualifier ces personnes en leur demandant plus ou moins régulièrement des informations.

  12. Article très intéressant et très complet. Après cet article, si un site enregistre pas des nouveaux inscrits à sa liste,il n’ aura pas mise en pratique les idées de cet article.

  13. on ne se rend pas toujours compte de l’importance des détails dans un formulaires, merci pour ces astuces que je vais appliquer de ce pas.

  14. Bonjour,

    Merci pour ces précisions ! Cela va m’être très utile du fait que j’utilise et travaille avec de nombreux formulaire.

  15. Merci pour l’article. Voilà du travail en perspective, pour améliorer les formulaires!

  16. Pingback: Optimisez vos formulaires pour une meilleure génération de Leads @ConseilsMarketing | [Tuto] Webdesign : CSS3, JS, HTML5 | Scoop.it

  17. Pourquoi pas de Times New Roman ? Personnellement j’utilise toujours Arial ou Helvetica, mais Times est assez lisible je pense, non ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>