Choisis ta bbxcategorieNewsWeb WorldXHTML / CSSLogicielsDesignTutoriauxE-CommerceFlashCurieuxGamerArtHumourTechIRLAstucesMultimédiabdbxBien développerOpinionBest Of Best Of

Depuis longtemps, je suis le passionant travail de Luke Wrobleski, le Senior Director of Product Ideation & Design chez Yahoo. En gros, il design des interfaces web, et notamment les formulaires. Ca n’a l’air de rien, mais cet élément fondamental du web est souvent négligé. Il a sorti un livre : Web Form Design: Filling in the Blanks que j’aurais acheté si je bossais encore dans le e-commerce.

Luke a fait une conférence le mois dernier au MIX 09. Elle est disponible en vidéo et c’est à partir de celle là que je rédige ce post.

10 bonnes pratiques pour réaliser un formulaire

1. Aller droit au but (Path to completion)
2. Alignement des labels (Label alignment)
3. Aide et astuces (Help & tips)
4. Validation (Inline validation)
5. Actions primaires et secondaires (Primary & Secondary actions)
6. Actions en cours (Actions in progress)
7. Erreurs (Errors)
8. Input inutiles (Unnecessary inputs)
9. Organisation du formulaire (Form organization)
10. Engagement graduel (Gradual engagement)

Préambule

Les formulaires, c’est chiant. C’est une barrière entre l’internaute et le site, entre l’utilisateur et l’outil, entre le client et l’entreprise. Il y en a pour tout : pour acheter en ligne, pour participer à des forums, pour utiliser une appli web… C’est pourquoi il faut en tenir compte pour les rendre plus agréable à remplir.

Je livre ici un résumé de la vidéo précédemment citée.

1. Aller droit au but

Avant de remplir un formulaire, l’internaute doit avoir un aperçu de ce qui l’attend. Visuellement, la page doit pouvoir être scannée rapidement. Si il y a plusieurs pages, il faut notifier des différentes étapes (présent, passé, futur). Il faut qu’à tout moment, l’internaute sache où il en est et ce qui lui reste à faire.

Mauvais exemple :

Bon exemple :

2. Alignement des labels

Il y a 3 manières d’aligner les labels :

• en haut de l’input : c’est le plus rapide à scanner mais ça prend de la place en hauteur. A utiliser uniquement sur des formulaires courts.
• aligner à droite : à utiliser si l’hauteur de la page est limitée parce que le formulaire est long. L’association label/input est rapide parce que les deux sont visuellement proches. Le seul problème avec ce type d’alignement est l’internationalisation : la largeur des labels varient alors que dans la page cette largeur est fixe.
• aligner à gauche : facilite la lecture des labels. C’est donc à utiliser si les labels sont compliqués. L’inconvénient est que l’association label/input est moins évidente.

3 manières d'aligner les labels pour 3 situations différentes

Cas particulier : les labels à l’intérieur des inputs

Si on met le label à l’intérieur de l’input, il faut bien notifier que le contenu actuel ne fait pas partie de la réponse à donner. Si il y a marqué “Mettez votre nom ici…”, il faut éviter que ce contenu soit validé.
Aussi, en remplissant l’input, le label disparaît. Donc à utiliser avec précaution.

3. Aide et astuces

L’aide est utile :

• lorsque les informations à donner sont compliquées
• pour accompagner l’utilisateur dans sa démarche
• pour notifier les données optionnelles
• pour expliquer à l’internaute pourquoi telle information est demandée

Il faut faire attention à ne pas surcharger l’utilisateur d’informations.

Plusieurs manières d’aider l’utilisateur :

• afficher une aide uniquement sur l’input que l’on est en train de remplir : ça permet d’éviter de surcharger la page en ne donnant qu’une aide sur l’élément actif
• afficher une aide au clic ou au hover : une aide optionnelle si l’utilisateur est perdu
• afficher une popup : si un texte long est indispensable pour bien expliquer
• utiliser une zone fixe où l’aide change au fur et à mesure du formulaire : ça permet d’avoir une zone dédiée à l’aide que l’utilisateur consultera si besoin est

Le formulaire de Digg offre une aide au fur et à mesure que l'on remplit les inputs.

4. Validation

Avec de l’Ajax et des notifications visuelles, on peut aider l’utilisateur à remplir correctement le formulaire, et du mieux possible.

La validation en “live” permet :

• de gagner du temps : l’internaute n’a pas besoin d’aller/retour, de recharger la page, de revenir sur les inputs déjà remplis… On ne passe qu’une seule fois à travers le processus.
• de donner une réponse correcte : par exemple, si vous voulez une nouvelle adresse mail, vous savez que beaucoup de pseudos sont déjà pris. La validation en “live” permet de tester rapidement les pseudos qui sont disponibles.
• de fournir la meilleure réponse : il y a souvent plusieurs réponses correctes possibles. L’exemple le plus évident est le choix du mot de passe. Il y a de plus en plus souvent une barre qui fournit la “puissance” du mot de passe. Plus il est compliqué, plus il est puissant. C’est à double-tranchant, parce qu’il faut se souvenir du mot de passe. Mais ça reste un conseil utile.

La barre de progression pour le mot de passe s'est très répandue.

5. Actions primaires et secondaires

Luke avait posté un excellent post sur la manière de placer et distinguer les actions primaires (“Valider”, “Confirmer”, “Suivant”…) des actions secondaires (“Annuler”, “Effacer”, “Retour”…). Il avait réalisé des tests utilisateurs en leur proposant 6 mises en forme différentes.

La meilleure solution est :

• d’éviter les actions secondaires si elles sont inutiles (un “Reset” est très rarement utilisé par l’internaute)
• de bien distinguer l’action secondaire (si il y en a une). Ca a pour conséquence de rallonger légèrement la durée de remplissage du formulaire mais l’internaute est content d’être averti des différents choix possibles.
• d’aligner l’action principale avec les inputs. La grande majorité du temps, l’internaute n’a qu’une seule envie, c’est d’aller au but, et un bon alignement est primordial pour la vitesse.

La meilleure solution est de distinguer visuellement les deux actions possibles et d'aligner l'action principale à gauche.

6. Actions en cours

Il y a parfois des actions qui demandent du temps, par exemple, lorsqu’on rentre un numéro de carte de crédit et que le formulaire demande à la banque si les informations données sont correctes.
Dans ce cas, pour éviter les erreurs, la meilleure solution est de désactiver temporairement la validation du formulaire, parce que justement, on ne peut pas valider tant que la réponse de la banque n’a pas été fournie. Si l’internaute clique par malheure sur le bouton, il risque de compromettre la validation du formulaire et d’avoir à tout recommencer.

C’est le cas typique de la case à cocher “J’accepte les condtions de service”, qui est généralement décochée. L’internaute clique sur “valider” mais ça ne marche pas.

7. Erreurs

Les erreurs de formulaire dûes à des informations erronées données par l’internaute sont le principal obstacle à la validation du formulaire. Tant qu’il y a des erreurs, on ne peut terminer la validation. L’important est de notifier ces erreurs, et d’informer l’internaute.

Pour bien notifier l’erreur, il faut :

• visuellement la marquer : en un coup d’oeil, l’internaute doit comprendre qu’il y a une erreur, et où
• expliquer comment corriger l’erreur : si les informations données n’étaient pas bonnes, c’est que l’aide (si il y en avait une), n’a pas marché. A ce moment là, il n’y a plus d’alternative : il faut expliquer clairement comment résoudre le problème.
• doubler l’affichage : je me répète mais pour bien marquer l’erreur il faut une couleur différente, une taille de police différente (pour les déficients visuels qui ne voient pas les différences de couleur) et une icône

N'oubliez pas les déficients visuels : il faut non seulement une différence de couleur mais aussi une différence dans la police. Une icône est un plus.

8. Inputs inutiles

Il y a souvent des inputs inutiles dans un formulaire. Par exemple, il arrive souvent à l’inscription d’un site que ce dernier vous demande toutes vos informations : nom, prénom, adresse, sites préférés, hobbies, comment avez-vous connu le site, votre revenu annuel… alors que l’essentiel pour utiliser le site ne réside que dans le nom et l’email.
On voit ça souvent dans les sites communautaires (un forum par exemple) où on demande implicitement à l’inscription de remplir la page de profil alors qu’il est parfaitement possible de s’en occuper plus tard. “Pour l’instant, je veux juste poster ma question sur le forum. Je remplirai mes informations personnelles après”.

Si il est possible de retirer des inputs, il faut le faire.

9. Organisation du formulaire

Avant de s’attaquer à la création d’un formulaire, il faut se focaliser sur ces points :

• objectif du formulaire : il faut bien se concentrer sur la raison même d’exister du formulaire, et ne pas s’en écarter.
• questions à poser : un certains nombre d’informations sont indispensables, d’autres ne le sont pas.
• discuter avec l’internaute : un bon vocabulaire peut aider l’internaute. Etre concis et naturel dans son langage est un plus.
• songer à diviser le formulaire en plusieurs sections/pages, si les inputs peuvent être regroupés par thème (une section sur le nom/prénom/adresse, une sur le pseudo/mot de passe, une sur les infos bancaires…)

Ecrire "Day/Year" plutôt que "dd/yyyy" est bien plus naturel et compréhensible.

Le site Huffduffer propose un formulaire imbriqué dans une phrase.

10. Engagement progressif

Le but ultime d’un formulaire est de pouvoir s’en passer. Si un internaute peut commencer à utiliser un service web sans avoir à s’inscrire, alors il sera beaucoup moins réticent à s’inscrire par la suite. “Tiens, je n’ai pas besoin de m’inscrire pour tester cette appli.” Et quelques minutes de test plus tard : “Ah c’est vraiment super! Je m’inscris tout de suite!”

En arrivant sur netvibes, on peut déjà customiser sa page sans avoir à s'inscrire au préalable.

Si une inscription est inévitable, il faut faire en sorte de la rendre la moins laborieuse possible.

Par exemple, si je veux créer un blog :

• sur Tumblr : je remplis 3 champs et c’est parti!
• sur Blogger : j’ai 3 pages entières à remplir (créer un compte, nommer le blog, choisir un modèle… je le ferais après!)

Je veux juste créer un blog. Pourquoi remplir 3 pages alors que je n'ai que besoin de remplir 3 champs ?

Conclusion

Les formulaires resteront toujours un obstacle entre un site et l’internaute. Il faut à tout prix les raccourcir, jusqu’à les supprimer! Le plus gratifiant dans l’expérience que l’on a d’un service web c’est lorsque l’utilisation est instantanée. Il n’y a pas délai entre le moment où l’on arrive sur un site et le moment où l’on commence à s’en servir. L’inscription s’avère alors une formalité.

Est-ce qu’un bon formulaire peut faire gagner de l’argent ? Oui! Rappelez-vous le bouton à 300 millions de dollars : l’internaute n’était plus invité à “S’inscrire” mais plutôt à “Continuer” ses achats. Ce formulaire avait été redesigné par Luke Wroblewski lui-même.

Je vous invite donc fortement à regarder cette passionante et sympathique vidéo remplie d’exemples intéressants et drôles.