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

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é).
Screen Zalando
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.
Screen Asos
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 :

27 commentaires

  1. 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…

    1. 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 ?

      1. 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. 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. 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 ?

    1. 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.

  4. 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 ? ^^

    1. 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.

  5. 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 🙂

    1. 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.

      1. Bonjour Capitain,

        Moi je suis un peu réticente à cette idée de se connecter via Facebook, à la limite pour un site de ventes de chaussures peut etre et pour un site plus professionnel genre un opérateur téléphonique ou u vendeur de matériel informatique comme mon cas ça fait un peu cheap. Qu’est ce que vous en pensez?

        Merci

  6. 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 !!

    1. 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 ?

Laisser un commentaire

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

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.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.