Des erreurs, les internautes en font pratiquement une à chaque fois qu’ils remplissent un formulaire web. Donner leurs informations personnelles représente une source d’angoisse véritable et réduire cette angoisse en leur facilitant leur saisie doit être une préoccupation majeur du e-commerçant. A ce sujet, la manière d’indiquer les erreurs à un internautes a-t-elle une influence sur le taux de transformation et si oui, quelle est la meilleure manière d’afficher ces erreurs ?
L’étude de Get Elastic nous révèle que les 100 plus grands commerçants online américains demeurent encore extrêmement classiques dans leur approche de gestion des erreurs puisque plus de 35% d’entre eux les affichent en haut de page sans surligner les champs générateurs de problème.
Dommage que l’étude ne réponde pas à la question qui nous angoisse nous, à savoir, quelle est la meilleure manière d’afficher les erreurs.
Mon avis personnel sur la question est que toutes ses méthodes sont aujourd’hui relativement dépassées par les apports d’Ajax. Un formulaire en ajax permet de vérifier en temps réel les erreurs de saisie, la validité d’un mot de passe ou d’un email, la corrélation entre le code posta et le nom d’une ville, et de pouvoir le signaler en temps quasi réel à l’internaute, le guidant franchement et simplement pendant tout le processus de saisie, sans le paniquer, ni l’obliger à rechercher parfois pendant plusieurs secondes l’endroit où l’erreur s’est produite.
Je suis sûr qu’il vous est déjà arrivé, tout comme moi, à maints reprises d’essayer de comprendre pourquoi ce satané formulaire refuse mon inscription à un forum ou à un compte de boutique. Eh oui. Ajax résout en très grande partie cet inconvénient majeur qui peut réellement faire abandonner son panier à un cyberacheteur.
Quels sont les champs qu’ajax doit traiter en priorité ? L’adresse email : pouvoir vérifier sa validité, signaler la non conformité en temps réel. En cas de double saisie (Champ email + vérification), afficher instantanément si les 2 champs sont identiques.
- Code postal, ville et pays : vérifier en temps réel leur corrélation et leur validité
- N° téléphone : si possible, vérifier son existence au sein d’un annuaire, vérifier sa corrélation avec l’adresse postale
- Mot de passe : conseiller un certain niveau de complexité du mot de passe (nombre de caractères et mélange de chiffres et de lettres)
Google s’est, depuis longtemps, fait une spécialité de formulaires de saisie dynamiques, interactifs et non angoissants pour l’utilisateur (bien sûr que ça n’est pas du e-commerce, mais les règles sont identiques).
Il existe aussi certains points facilitant la saisie d’un formulaire :
- afficher une icône d’aide à côté de chaque champ
- ne pas scinder le formulaire en plusieurs pages
- si possible le faire court, quitte à récolter d’autres informations moins indispensables, lors d’une commande ultérieure
- Eviter de demander des informations pas directement en rapport avec la commande : informations marketing (revenus, nb d’enfants, âge, etc.), par exemple. Mieux vaut les demander après la commande avec l’accord exprès de l’internaute.
Il semble qu’une littérature abondante existe sur le sujet, pour cause, elle ne se réfère pas uniquement aux sites de e-commerce, mais aux applications webs en général. Voici quelque liens :
- Un chapitre complet de blogmarks est dédié au design de formulaire : http://www.blinklist.com/tag/form%20design/
- Une page sur le design de formulaire : http://www.lukew.com/resources/articles/web_forms.html
A lire :


Très bon billet, notamment pour les conseils donnés sur les messages d’erreurs. Petit bémol quand même, faire une solution 100% ajax est une erreur qui privera le marchand de 10% des utilisateurs qui n’activent pas le javascript.
On peut reprendre les conseils ci-dessus, en rajoutant par la suite la couche ajax, mais le formulaire doit en premier lieu fonctionner SANS AJAX.