Je ne sais pas trop pourquoi, mais les formulaires ne sont jamais une partie très excitante dans un projet Web. Pourtant, il s’agit souvent d’une des pages les plus importantes dans un site. Partout on parle de taux de conversion, on parle d’architecture d’information et même d’architecture de persuasion (terme “brandé” par Future Now Inc.)!
Il y a quelques semaines, j’ai eu une discussion avec un designer. Il s’arrachait les cheveux à mettre en forme un petit formulaire dans ses maquettes. Positionnement des champs, alignement et couleur des libellés, regroupement d’information, messages d’erreur, message de confirmation, informations complémentaires, validation des champs, utilisation d’un CAPTCHA. Bref, un beau casse-tête de conception pour un petit formulaire de 5 ou 6 champs!
Je viens de lire un article sur Smashing Magazine qui portait justement sur ce genre de casse-tête qui est monnaie courante dans l’industrie. L’équipe de Smashing Magazine à répertorié les façons de faire de 100 sites Web populaires. Depuis un deuxième article est paru. Comme ce sont d’excellents articles, j’ai cru bon en faire une synthèse personnalisée.
Voici donc les six commandements du design de formulaire
- L’interface, je simplifierai
- Confiance, je leur donnerai
- Bien placés, seront mes libellés
- Écoeurés, je les épargnerai
- Dans le doute, je les assisterai
- Validées, seront les données
1. L’interface, je simplifierai
Vous avez finalement réussi! Bravo, l’utilisateur est là où vous voulez qu’il soit : sur la page où il entrera en contact avec vous, où il s’inscrira à votre infolettre, où il achètera son chandail, où il s’inscrira à votre concours, etc.
L’idée est donc de ne pas trop le déconcentrer afin qu’il puisse accomplir sa tâche (entrer ses informations personnelles) sans crainte, sans être distrait et sans se poser de questions. On enlève donc tout ce qui est superflu.
Voici un bon exemple sur Yahoo :

Notez qu’il n’y a plus de menu, qu’il n’y a aucune publicité encombrante et que l’interface est relativement épurée.
2. Confiance, je leur donnerai
Certains sites profitent de l’espace gagné pour rassurer l’utilisateur, pour afficher le logo du système d’encryption, pour informer l’utilisateur du nombre d’étapes dans le processus ou encore pour communiquer les bénéfices qu’amène l’inscription comme le fait LinkedIn.
3. Bien placés, seront mes libellés
L’article de Smashing Magazine cite deux études (Matteo Penzo’s label placement research (1996) et Luke Wroblewski’s findings (pdf)) qui semblent affirmer que de placer le libellé d’un champ au-dessus de celui-ci diminuera le temps que l’utilisateur prendra pour remplir le formulaire.
Des contraintes d’espace nous obligent parfois à placer les libellés à côté des champs. Le cas échéant, il est préférable d’aligner les champs à droite s’il n’y en a pas beaucoup et, à l’inverse, de les aligner à gauche s’il y en a beaucoup.
Note : les pourcentages font référence à la proportion des 100 sites qui utilise ce genre d’alignement.

4. Écoeurés, je le les épargnerai
C’est tout à fait normal de vouloir en savoir le maximum sur les utilisateurs qui nous contactent, qui utilisent nos services ou qui achètent en ligne. Par contre, il faut faire attention à la quantité d’informations qu’on exige de leur part avant qu’ils puissent s’exécuter. Les internautes se font demander leurs informations personnelles très souvent sur Internet, il ne faut pas en rajouter!
Dans le même esprit que le premier commandement, il est préférable de ne conserver que l’information nécessaire… ultra nécessaire en fait. On ne veut pas que l’utilisateur se décourage ou commence à se poser des questions. Les informations additionnelles devraient plutôt être demandées après que l’utilisateur ait fourni l’information primordiale.
Par exemple, un formulaire d’inscription à une infolettre ne devrait comprendre qu’un seul champ : le courriel. Quand l’utilisateur cliquera sur le bouton, alors on stockera son adresse courriel puis on lui demandera son prénom et son nom, peut-être même son âge et son sexe… mais après avoir eu son adresse de courriel!
5. Dans le doute, je les assisterai
Certains champs requièrent parfois de l’information additionnelle. Par exemple, un code d’abonné (situé en haut à droite de la facture et commençant par UTV-xxxxx) peut ne pas sembler évident à trouver pour un utilisateur. Il est alors nécessaire de lui fournir de l’aide pour qu’il ne développe pas de frustration.
Comme vous pouvez le voir, la tendance est de placer ce genre d’aide en dessous ou à droite du champ en question.
Note : les pourcentages font encore référence à la proportion des 100 sites qui utilisent ce genre d’alignement.

6. Validées seront les données
La qualité des données recueillies est directement reliée à la qualité de la validation des données. Cette validation peut être faite en javascript au moment de l’envoi du formulaire, en simultané (AJAX) à mesure que l’utilisateur entre des données ou encore en PHP ou ASP après l’envoi du formulaire.
Le AJAX est probablement la meilleure manière de faire, mais encore faut-il que l’utilisateur ait Javascript d’installé. S’il ne l’est pas, ou s’il l’a tout simplement désactivité, alors la validation PHP ou ASP est souhaitable et fortement recommandée… surtout pour les sites de commerces électroniques!
Dans le cas où une erreur s’est glissée, il faut informer l’utilisateur de ce qui n’a pas fonctionné. La manière présentée ci-dessous est selon moi idéale : Explication textuelle des erreurs (pour les daltoniens) et “highlight” des champs en erreur.

C’est tout le temps que j’ai pour l’instant, mais il reste probablement encore quelques commandements à écrire, notamment concernant les messages d’erreur, les messages de confirmation, l’utilisation des CAPTCHA, le positionnement du bouton d’action, l’utilisation des couleurs, le design général des boîtes de texte, etc.
Ceci étant dit, voici quelques exemple de design plutôt sympathique de formulaires, gracieuseté, encore une fois de Smashing Magazine.