Déjouer les pièges du formulaire de création de compte

Par Capitaine | avril - 6 - 2012 | 23 commentaires  
Auteur de ce billet : Olivier Sauvage, l'auteur, est le fondateur de Capitaine-commerce.com et de Wexperience, agence d'ergonomie digitale pour le ebusiness. Il travaille pour les plus grands comptes du ecommerce en France et est spécialiste de l'optimisation des sites sur mobile, tablette et web. Pour plus d'informations sur cette critique, n'hésitez pas à le contacter ou à l'appeler directement sur son portable.
» Voir tous les articles de Capitaine
WFD030: Figure 3.3

Une carte de chaleur en eye-tracking d'un formulaire web

Le voilà le mouton noir de la conversion ! Le formulaire de création de compte. Un mauvais formulaire peut être un véritable obstacle à la commande comme j’ai déjà pu m’en apercevoir souvent lors de tests utilisateurs, ce qui est d’ailleurs bien souvent confirmé par les statistiques.

Plusieurs raisons à cela :

  • Les gens n’aiment pas instinctivement remplir de formulaire
  • Un formulaire qui demande des données personnelles angoisse
  • Beaucoup, beaucoup trop de formulaires ne respectent pas encore un minimum de règles d’ergonomie pourtant bien connues
  • Alors qu’il est considéré comme normal par le marchand de demander de créer un compte, c’est, au contraire, pour l’internaute une nécessité pénible dont l’utilité est pas forcément comprise
  • Par définition, le formulaire s’adresse à des prospects moins enclins à vous pardonner des erreurs techniques ou à supporter les impondérables du ecommerce

Comment, en fonction de ces informations, dès lors, aborder la conception d’un beau et « bon » formulaire qui améliore la conversion et fasse glisser l’internaute vers la page de paiement sans douleur et sans lubrifiant ;-)

Respecter les règles d’ergonomie de conception des formulaires

  1. Aérer votre formulaire :
    • Espacer suffisamment entre eux les champs
    • Ecrire gros, très gros (14 à 16px selon moi)
    • Agrandir les champs en hauteur (n’hésitez pas à imaginer que vous faites un site pour enfants)
    • Supprimer toutes les informations inutiles à la conversion : si possible, supprimez la navigation principale du site, évitez de faire de la pub ou d’afficher un visuel de séduction
  2. Bien informer :
    • Donner des indices de remplissage sous les champs de formulaire (ex: indiquer la forme du numéro de téléphone à saisir) ou par des infobulles
    • Indiquer clairement les champs obligatoires (un conseil, s’ils ne sont pas obligatoire, ne les mettez pas)
    • « Tailler » les champs à la taille des informations demandées (un champ CP qui ne doit contenir que 5 caractères ne doit pas faire plus de 5 caractères de long, à l’inverse, les champs adresse doivent être plus longs)
    • Bien choisir vos libellés : la moindre ambiguité peut être fatale (ex : « commune » pour « ville », évitez les termes cool ou mode, ils risquent d’induire plus en erreur qu’autre chose)
  3. Bien gérer les erreurs :

La gestion des erreurs est ce qu’il y a de plus catastrophique sur les formulaires en général, pourtant, là aussi, les règles ont bien été établies :

    • Afficher toutes les erreurs en haut de page de manière visible et ordonnées. Quand je dis visible, c’est en gros et rouge, même si ça « pourrit » votre charte graphique / A contrario, quand il y a plusieurs erreurs, ne pas afficher qu’une erreur à la fois, mais toutes en même temps.
    • Indiquer les erreurs dans le formulaire en surlignant les champs en gras et en rouge (de manière très visible) pour que l’internaute n’ait pas à chercher l’erreur (et pas par une petite astérisque tellement petite qu’on pense que c’est un bug d’affichage)
    • Afficher des indices qui permettront de corriger l’erreur (si ça n’a pas été fait avant) soit sous le champ, soit en infobulle au clic ou au focus
    • Proposer un chat en ligne et un numéro de téléphone pour secourir une personne dans la difficulté.
    • Controlez en temps réel. Faites gagner du temps aux internautes en leur indiquant pendant leur saisie les erreurs qu’ils commettent.
L’optin : on retrouve souvent l’optin au niveau du formulaire de création de compte.  Placez le en bas du formulaire de manière bien visible et en expliquant les avantages de s’abonner à de l’information commerciale (pourquoi pas, à cet endroit, proposer un exemple de mail envoyé).

Le formulaire de création de compte sur Zalando est court et semble simple à remplir. Il tient entièrement sur un écran de taille moyenne. Notez les points bleus d'informations qui guide et aide l'utilisateur sur les champs difficiles.

La simplicité de création de compte d'asos.fr est biblique. Les informations de livraison (l'adresse) ne sont demandées que dans la suite du formulaire.

Dernier conseil : le succès d’un formulaire ne dépend pas de sa longueur

En réalité, il dépend du temps et de la facilité que l’internaute aura l’impression de prendre pour le compléter. Que ce soit un en 1 clic ou en 10 clics, il n’y a en réalité pas de règles. Un formulaire de réservation d’agence de voyage pourra être très long tandis qu’un formulaire d’achat de place de spectacle pourra être beaucoup plus court. L’important n’est pas le nombre de clics, donc, ni sa longueur, mais plutôt le savant chemin qui est proposé à l’internaute pour le satisfaire au maximum de sa tâche.

Lire tous les articles du Capitaine sur l’optimisation du tunnel de commande :
A lire aussi sur le web :
A découvrir :
  • Wufoo, un logiciel pour construire des formulaires
A lire sur papier ou liseuse électronique :
Je partage cet article sur Tweet about this on TwitterShare on FacebookShare on LinkedInDigg thisPin on PinterestShare on Tumblr

23 commentaires pour l'instant.

  1. David dit :

    Bon résumé sur ce que doit-être un formulaire. Mais après, il y a la solution n° 2: Ne pas faire de formulaire et laisser l’internaute libre de ne pas créer de compte lorsqu’il achète.

    C’est ce que nous faisons sur notre site, et le nombre de commande sans compte client est impressionnant. Je pense que les clients ont toujours peur de communiquer leurs infos ET d’être spammés par mail, courrier et téléphone…

    • Akian dit :

      Joli site David !
      Par contre pour commander sans compte client, il faut quand même remplir un formulaire de même taille que pour créer un compte. La différence est que les infos ne sont pas enregistrées ?

      • David dit :

        Tout à fait, c’est exactement cela. Sans création de compte, il ne faut remplir que l’adresse de livraison. La commande est archivée avec les coordonnées du client uniquement à des fins logistiques.

  2. Mickael dit :

    Capitaine, j’ai une question :

    Selon toi, vaut-il mieux mettre tous les champs les uns en dessous des autres ou certains champs (comme le CP et la ville par exemple) peuvent être affichés sur la même ligne ?

    Je sais pas si je me fait bien comprendre.

  3. [...] aux enfants tags: twitter jeunes Evaluer la pertinence d’une source web tags: veille source Déjouer les pièges du formulaire de création de compte tags: formulaire ecommerce Pratiques et tendances de l’e-mailing tags: emailing Outils [...]

  4. OL dit :

    Concernant Asos, je me demande s’il est bien indispensable de de mander de confirmer l’adresse email ?
    Si on ne le fait pas pour l’adresse de livraison, la ville, etc, pourquoi le faire pour email ?

    J’irai plus loin: pourquoi demander une confirmation du Mdp ?

    • Capitaine Capitaine dit :

      A un moment donné, ça permet de réduire la marge d’erreur sur les saisies d’email et de mots de passe pour lesquels les gens ont tendance à se gourer souvent. C’est pas très grave sur un petit site, sur un site comme Asos, si ça enlève 90% des erreurs, ça représente une économie non négligeable (rappels téléphoniques, sollicitation du serveur pour retrouver le mot de passe, support tél surchargé, etc.) versus un inconfort supplémentaire minimal.

  5. Les cravates de Florence dit :

    Bonjour,

    De notre côté chez http://www.areyouchic.com la création de compte se fait en 3 champs mail, mot de passe et confirmation de mot de passe, l’adresse et autres infos sont demandées plus tard.
    Qu’en pensez-vous mon capitaine ? ^^

    • Capitaine Capitaine dit :

      Salut, si on est logique, il faudrait avoir 4 champs. Si tu as beaucoup d’erreurs d’email, il serait temps de rajouter un champ de confirmation, sinon, c’est pas grave.

  6. Kikune Fabien dit :

    Hello!

    De plus en plus de sites donnent la possibilité de se logger via leur compte Facebook & co.

    Vous en pensez quoi? J’ai l’impression que c’est un sacré gain de temps et que cela devient limite logique lorsqu’on est un adepte du web

    C U :)

    • Capitaine Capitaine dit :

      J’en pense que c’est une très bonne idée, mais je me pose la question de savoir de ce que ça implique en terme de partage de données avec Facebook notamment. Cela dit, cela n’empêche pas qu’il faille quand même ressaisir son adresse au moment de la commande, mais c’est un moindre mal.
      Pour l’utilisateur, le point noir, c’est que le marchand vienne s’impliquer dans sa timeline plus ou moins à son insu.

  7. [...] Facilitez le remplissage des formulaires : demandez à vos visiteurs seulement les informations nécessaires à la commande et affichez en temps réel les champs manquants ou mal remplis – ces formulaires ne doivent plus être fastidieux ! Capitaine Commerce nous offre un bien bel article à ce sujet : http://goo.gl/zpsCS [...]

  8. Guillaume dit :

    Bonjour,
    j’ai un taux de rebond de 54,55 % pour ma page de création de compte, je me demande si c’est pas un chiffre alarmart ?
    Qu’en dites vous ? merci !!

    • Capitaine Capitaine dit :

      Ce taux, c’est le taux d’abandon par rapport à la page suivante ? Si la moitié des gens quittent le tunnel de conversion depuis la page d’identification, oui, ça me parait beaucoup. Quelle est l’url de ton site ?

  9. [...] Déjouer les pièges du formulaire de création de compte [...]

Rédiger un commentaire


Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.



Blogs ecommerce et sites amis à visiter : Ecommerce Squad - Exciting Commerce - I Love Web - Ludovic Passamonti - Pauline Pauline - Rich Commerce - Tablette Tactile - Ziserman.com

Site hébergé par NBS System, spécialiste de l'hébergement ecommerce NBS System

Copyright © 2006 - 2014 Capitaine commerce - Le Blog du Commerce Digital - Ce blog utilise WordPress - Webmaster : Alexis Sauvage aka Mecano Commerce

[ Capitaine Commerce SARL - RCS Lille B 789 520 046 - SIRET 78952004600010 ]