10 façons d'optimiser le look de vos formulaires web
Publié le 16 juin 2015

10 façons d'optimiser le look de vos formulaires web

Le formulaire est l’élément central de votre stratégie web pour générer des leads. C’est l’emplacement clé où les utilisateurs communiqueront leurs informations personnelles. Il est donc important de prendre soin de vos formulaires, qu’ils soient pour une demande de soumission, pour être contacté ou pour bénéficier d’une offre proposée sur une page de destination.

Voici 10 conseils pour optimiser vos formulaires.

10 façons d'optimiser le look de vos formulaires

Vos formulaires de contact ressemblent encore à ça ?

informenter-500x303
Cet article est vraiment fait pour vous !


1- Aller à l’essentiel

Aujourd’hui, il faut avouer que les formulaires sont la bête noire des utilisateurs.

« Pourquoi me demande-t-on autant d’informations pour télécharger un PDF ? »
Il est vrai que notre but est d’obtenir un maximum d’informations pour qualifier au mieux les leads collectés. Cependant, plus vos formulaires seront courts et clairs, plus vos visiteurs seront incités à les remplir. Si vous n’avez pas besoin de demander un numéro de téléphone, ne le faites pas. Demandez simplement les informations dont vous avez besoin. Dans le cas contraire, vous risqueriez de faire fuir vos utilisateurs.

Quelques exemples :
  • 37% des utilisateurs abandonnent lorsqu’il faut remplir un champ « Téléphone ». Si besoin, mettez ce champ en option mais pensez bien à l’indiquer par un astérisque (*) par exemple.
  • Imagescape a réduit le nombre de champs de son formulaire de contact de 11 à 4 champs et a augmenté son taux de conversion de 120%.
  • En retirant UN champ (« Company name »), Expedia a réalisé un profit de 12 millions de dollars.


    (source : http://unbounce.com/conversion-rate-optimization/how-to-optimize-contact-forms/)

2- Être clair et logique

Un formulaire est généralement composé de champs au bout desquels se trouve un appel à l’action. Chaque champ correspond à une donnée différente, il faut donc y apposer un intitulé appelé « label » (ou nom du champ) afin de faire comprendre aux visiteurs quelle information est attendue pour chaque champ.

Les champs requis doivent être clairement visibles et bien mis en avant, l’utilisateur ne doit pas perdre son temps à comprendre ce qu’il doit rentrer comme information. Pour cela, vos noms de champs doivent être toujours présents devant ou au-dessus de vos champs. Imaginez un label présent à l’intérieur du champ qui s’efface lorsque l’utilisateur le remplit, comment pourra-t-il identifier qu’il a bien rentré la bonne information dans ce champ ? Il ne doit pas jouer à cache-cache, ne le perdez pas de vue !728x300_label

3- Choisir la bonne taille de police

Pour être efficace et clair pour vos visiteurs, utilisez une taille de police raisonnable. Cela dépend de votre contexte d’utilisation. Si vous utilisez une taille de police trop petite, celle-ci sera difficilement lisible sur mobile par exemple. Il est donc conseillé de mettre vos polices à une taille supérieure à 14 pixels.

De plus, iOS ne zoomera pas sur votre champ si celui-ci a un label avec une taille de police de 16 pixels ou plus, simplement car ce n’est pas nécessaire, la taille de police est suffisante, pas besoin de zoomer.

4- Adapter la longueur des champs

jaiuneadressecourrieltreslongue@flyconseils.com mais un code postal très court, pourquoi les deux champs devraient faire la même longueur ? Il est bon d’adapter la longueur des champs en fonction de l’information demandée. Un champ de code postal (6-7 caractères) n’a pas besoin d’être aussi long que celui du courriel. Globalement, cela ne sera que positif pour la clarté et la lisibilité du formulaire.

728x300_longueurchamps

5- Passer de gauche à droite

Il ne s’agit pas de politique dans ce paragraphe mais bel et bien d’expérience utilisateur. Notre regard balaie une page du haut gauche vers le bas droite, c’est un fait. Nous sommes habitués à ce sens de lecture. Positionner un formulaire à droite de votre page peut accroître votre taux de conversion de plus de 24% (source : Unbounce)

6- Penser au format mobile

La navigation sur appareils mobiles prend de plus en plus d’ampleur. Il est donc important de connaître quelques astuces afin d’optimiser un formulaire sur mobiles. Tout d’abord, pensez au fait qu’un doigt sur un écran tactile est moins précis qu’un curseur de souris sur un ordinateur. Dans le livre « Responsive design » d’Ethan Marcotte, ce dernier rappelle une recommandation d’Apple au sujet des zones « tapables » sur appareils mobiles : celles-ci doivent faire au minimum 44x44 pixels ce qui est l’espace moyen que prends un doigt sur un écran tactile. Ne les faites pas trop gros non plus.

7- Adapter les messages d’erreur et de validation

« Merci de remplir les champs manquants ». Ce message est très important dans l’expérience utilisateur. Certains champs peuvent être optionnels (comme le téléphone), d’autres sont obligatoires. D’une part, pour approfondir et préciser l’expérience utilisateur, adaptez vos messages d’erreur à chaque champ. Exemple : un champ Prénom aura pour message d’erreur « Merci de remplir votre prénom ». D’autre part, préférez un affichage en haut du formulaire. Les écrans d’appareils mobiles ne sont pas hauts, il ne faudrait pas que vos messages d’erreur ou de validation soient cachés dans le bas du formulaire… Aussi, évitez les messages d'erreur ou de validation de type boîte d'alerte JavaScript, méthode bien trop agressive :

13142

8- Montrer l’exemple

Les données des utilisateurs peuvent prendre plusieurs formes. Les codes postaux ou les numéros de téléphone par exemple. Montrez des exemples à vos utilisateurs dans le champ approprié. Par exemple, pour un numéro de téléphone :

728x300_formulaire

9- Rassurer les visiteurs

En fonction du contexte dans lequel se trouve votre formulaire, votre message devra être adapté. On retrouve des formulaires de :

  • Contact : rassurez vos visiteurs sur la manière dont seront utilisées leurs données personnelles et comment ils seront contactés par la suite.
  • Commande : dans le cadre du commerce électronique, le client passe par plusieurs formulaires avant de finaliser sa commande. Il est important de montrer l’état d’avancement de la commande avec une barre de progression. Aussi, vous rassurerez vos clients par l’usage de logos de sécurité. Soyez clairs sur les moyens de paiement, le mode de livraison, les produits commandés…

10- Ne pas personnaliser les boutons radio et les cases à cocher

Plus haut, nous avons parlé des champs, mais les formulaires regorgent de boutons radio et de cases à cocher. Les navigateurs proposent chacun leurs versions de ces éléments de formulaires. Pour l’expérience utilisateur, ces éléments sont soumis à des comportements réguliers, actifs, au survol et cochés. 90% des sites ayant des boutons radio ou des cases à cocher personnalisées ne possèdent pas tous les comportements de ces éléments. Utilisez donc les éléments par défaut de chaque navigateur sans tenter de les personnaliser avec quelques lignes de CSS ou Javascript, cela risquerait d'augmenter le chargement de votre site, uniquement pour des raisons esthétiques… Pensez quand même efficacité !

Pour conclure, attardez-vous sur la qualité de vos formulaires et associez-y nos 5 trucs pour optimiser vos pages de destination et vous serez prêts à augmenter votre nombre de leads !

{{cta('55d37b33-697d-4d82-a02d-98752eff4898','justifycenter')}}

formulaires
Référencement : pour bien débuter
Article précédent
Référencement : pour bien débuter
Pourquoi choisir Globalia pour concevoir son site sur le CMS de HubSpot?
Article suivant
Pourquoi choisir Globalia pour concevoir son site sur le CMS de HubSpot?
Vous souhaitez rester à l'affut?
Vous souhaitez rester à l'affut?
S'inscrire au blogue