Cet article est la synthèse du Dossier de conception du formulaire d’inscription. Suite à l’observation de quelques gros sites français et internationaux, voici une compilation des best practices pour le formulaire de création de compte.

POSITIONNEMENT DE LA PAGE

1 – Demander l’email du client dans une première étape

amazon et SmartBargains font ainsi :

Cela devient un standard. Cette manière de procéder permet également de recontacter par email les clients qui n’auraient pas achevé de remplir le formulaire de la page suivante. Par cette relance, spoonkey récupère 21% des abandonnistes.

En option, on peut passer de l’étape de la saisie de l’email à l’étape du formulaire sans rechargement de page, comme le fait spartoo.

Ce procédé a enfin comme avantage d’amener plus « délicatement » les clients vers le fameux formulaire. A lire à ce sujet un article intéressant trouvé sur le blog A List Apart (merci Pamela ) traitant de « gradual engagement ».

2 РAfficher les ̩tapes du tunnel de commande

Il est important d’y faire apparaître l’étape de création de compte. L’idée de Otto est originale puisque ce tunnel de commande est affiché sur la gauche, de manière verticale.

CHAMPS DEMANDES

3 – Se contenter des champs obligatoires

Dans la plupart des marchés, nous parlons de l’email, le mot de passe, l’adresse et l’opt-in newsletter. En France, il convient d’ajouter la civilité car nous sommes sensibles à cela et ne considérons pas comme privée cette information. Il ne faut pas confondre recrutement et qualification. Sauf si le modèle l’exige, ne pas demander d’informations du type date de naissance, composition du foyer…

ERGONOMIE GENERALE

4 РSoigner la lisibilit̩

• Ne pas afficher les éléments de navigation des autres page du site.
• Aligner les champs et les zones de saisie. Peu importe qu’ils soient alignés à gauche ou à droite mais il faut un formulaire bien équilibré.
• Eviter les scrolls (penser aux messages d’erreurs qui peuvent demander de la hauteur ou de la largeur).
• Occuper toute la page.
• Cela parait évident mais il faut écrire gros. Un Français sur 3 est e-consommateur, il n’y a pas que des Geeks, adepte des résolutions microscopique. Cette remarque vaut pour le libellé des champs demandés comme pour les champs à remplir eux-même. J’ai été impressionné par la lisibilité du formulaire Otto :

• Bien hiérarchiser l’information : l’idéal étant de mettre un seul bouton pour valider le formulaire, des liens textes pour l’aide (qui s’ouvre alors en pop-up) et des exemples en italique devant les champ sur lesquels il faut guider l’utilisateur.

5 – Soigner l’utilisabilité

• Positionner le curseur dans le premier champ et penser à vérifier que la touche TAB fonctionne bien pour passer d’un champ au suivant.
• Surligner le champ actif lors de la saisie. Sur certains champs, on peut même faire apparaître une aide contextuelle lorsqu’on arrive sur le champs. C’est ce que fait SpoonKey.
• Faire apparaître une petite coche verte lorsque le champ est bien rempli, comme le fait spartoo :

• Je n’ai vu qu’un formulaire qui accompagne le client dans la saisie de son adresse en lui proposant par exemple une liste de ville à partir de son code postal. Il doit y avoir une bonne raison à cela. Pourtant, c’est sans doute le meilleur moyen de ne pas avoir à corriger les adresses par la suite. Spoonkey va même jusqu’à assister l’internaute dans la saisie de sa rue à partir de sa ville.

AIDE ET GESTION DES ERREURS

Bannir le texte d’introduction en haut de formulaire qui explique que l’internaute s’apprête à remplir un formulaire. Si ce n’est pas clair, retourner travailler votre ergonomie… L’aide et la gestion des erreurs se fait en 3 temps :

6 – Prévoir une aide à la saisie

Cette aide peut être présente sur le formulaire (sous le champ à saisir par exemple) ou apparaître dès que l’internaute place son curseur dans un champ. On optera pour l’une ou l’autre des solutions en fonction de sa cible client, en évitant de mélanger les deux solutions, au risque de perdre en lisibilité.

7 – Faire un maximum de contrôle à la volée

Cette aide indique sans rechargement de la page si le champ est correctement rempli ainsi que la nature du pb s’il est mal rempli. On en peut pas détecter toutes les erreurs ainsi mais éviter les plus courantes (oubli d’un champs, mauvais format d’un mail, etc …). Cette aide ne doit pas être une boite de dialogue mais un calque qui s’affiche par dessus le formulaire et qui se place sur le champ concerné. Le bon élève de notre étude est ici spoonkey.

L’intérêt de détecter dès la saisie des erreurs ou oublis provient du fait que l’internaute est psychologiquement dans un mental de saisie et pas de correction. Il n’y a pas eu de rechargement de page.

8 – Corriger les erreurs

• Afficher un message en haut de formulaire indiquant qu’il y a des erreurs,
• Bien entendu, traiter toutes les erreurs en une fois et ne pas renvoyée la page à la première erreur rencontrée,
• Positionner le curseur sur la première erreur,
• Mettre graphiquement en évidence (surlignement, encadrement ou les deux) chaque champ posant problème avec une aide associée indiquant la nature du problème :

• Faire disparaître cette mise en avant ainsi que le message d’erreur lorsque l’utilisateur est repassé sur le champ. Le bon élève ici a été la Redoute.

AUTRES POINTS

9 – Analyser les statistiques

Si vous en avez la possibilité, marquer différemment la page du formulaire en fonction des erreurs renvoyées pour connaître les champs posant le plus souvent problème.

10 – Normaliser les adresses en batch

Si possible, normaliser les adresses sans que le client ne s’en rende compte et donc, sans lui demander de valider l’adresse que vous avez déduite.

Vous avez aimé cet article ? Inscrivez-vous à la newsletter de ce site pour être prévenu à chaque nouvelle parution.

ou abonnez-vous au flux rss :