Le formulaire parfait ?

Voilà près d’un an et demi que j’ai publié mon tutoriel sur comment concevoir des formulaires plus simples. Depuis, même si certaines règles de lisibilité et de structurations sont toujours d’actualité, il faut bien avouer qu’il s’est passé beaucoup de choses.

Hier, en testant un nouveau service en ligne de gestion de tâches (le service s’appelle Remember The Milk), je suis tombé sur ce que je peux considérer comme le formulaire parfait : Signup.

Les points forts :

  • la mise en page est minimaliste (pas d’éléments perturbateurs) ;
  • tous les champs sont obligatoires (pas besoin de préciser ceux qui doivent être rempli avec une petite astérisque) ;
  • les intitulés sont alignés à droite et les champs bien espacés ;
  • la gestion des erreurs est remarquable car elle s’effectue au fur et à mesure de la frappe à l’aide d’AJAX (un message contextuel vous indique si le champ est validé ou s’il faut le corriger) ;
  • le bouton d’action est sans d’ambiguïté.

Bon allez, je ne résiste pas à l’envi de dénicher quelques points faibles :

  • même si la balise label est utilisée, pas de trace d’un fieldset, de tabindex ou de raccourcis clavier ;
  • est-ce que l’utilisation d’AJAX est complétée par une détection des erreurs côté serveur en cas de désactivation de javascript ?
  • où sont les messages de réassurance et la politique de confidentialité ?

Passé ces quelques points, je ne peux qu’admirer le résultat et la redoutable efficacité de ce formulaire. Un exemple à suivre.

Un commentaire sur “Le formulaire parfait ?

  1. Effectivement, formulaire très efficace… L’Ajax y est judicieusement utilisé. Je confirme, la désactivation du JavaScript est complété par une vérification serveur.

  2. > où sont les messages de réassurance > et la politique de confidentialité ? ce qui me manque tout le temps (?) c’est la suppression d’une inscription – je ne parle pas des abonnements à des liste de disffusion ou de discussion

  3. Le formulaire est plutôt réussi en effet, cependant il faut noter qu’il est construit à l’aide d’un tableau… Bref ça n’est pas encore parfait !

  4. A mettre à l’actif de cette réalisation : essayez de copier/coller votre mot de passe dans le champ où l’on vous en demande la confirmation : ça ne marche pas ! Pourtant, cette pratique de paresseux (dont personnellement j’abuse allègrement…) est possible dans bon nombre de formulaires d’inscription, alors qu’elle va précisément à l’encontre de l’effet recherché.

  5. Fred, si je puis me permettre une petite correction : « la gestion des erreurs est remarquable car elle s’effectue au fur et à mesure de la frappe à l’aide d’AJAX (un message contextuel vous indique si le champ est validé ou s’il faut le corriger) ; » Il n’en est rien : l’HTML asynchrone n’agit qu’au moment ou l’utilisateur poste les données du formulaire (bouton signup). Il ne sert qu’à détecter si le nom de l’utilisateur choisi existe déja, et avertir l’utilisateur sans pour autant devoir recharger toute la page. C’est du Javascript « fait main » qui prend en charge la validation de chaque champs de manière dynamique. Pour info (pub..), ASP.NET de Krosoft génère tout seul le code en javascript côté client assurant une validation du même type, et ce à partir d’un minimum de métadonnées définies par le développeur. A ce titre, le framework Atlas (gratuit) prend en charge la génération automatique de code javascript au moment de l’execution pour prendre en compte le fonctionnement en asynchrone. Encore une remarque : il est primordial de « doubler » la validation côté serveur afin de prévenir les risques dûs au « tampering » : Si un utilisateur mal intentionné « s’amuse » à simuler l’envoi de données au serveur à l’aide de son propre code, c’est à dire sans bénéficier de la validation côté client, et que ces données ne sont pas validées côté serveur, c’est la ca, la cata, la catastrophe …

  6. Bravo l’Ours pour ce témoignage courageux. Si Krosoft propose des solutions pragmatiques et robustes qui peuvent bénéficier aux utilisateurs finaux alors ne faut faudrais surtout pas s’en priver. /Fred

  7. J’ai bien envie d’ajouter, qu’il est surtout court à la différence de nombreux formulaires sur des sites de marques qui pour des raisons marketing posent des dizaines de questions dont bien souvent les informations ne sont jamais exploitées. Rien que pour ce point cela fait de lui un bon formulaire d’inscription :)

  8. I am sorry I do not speak French. * même si la balise label est utilisée, pas de trace d’un fieldset, de tabindex ou de raccourcis clavier ; We plan to add these soon. :) * est-ce que l’utilisation d’AJAX est complétée par une détection des erreurs côté serveur en cas de désactivation de javascript ? We made sure the form worked if you did not have JavaScript enabled. It provides the exact same messages if you do not have JavaScript as I created php-js (http://www.aurore.net/projects/php-js/) to re-use my JavaScript validation from the server side. * où sont les messages de réassurance et la politique de confidentialité ? I am not sure what this means as the translation is not that great. We have a link to the terms of service at the end of the form, and the privacy policy from that page and from all pages on the site. If the above meant that that you can easily find out usernames, I do not believe this is a big issue. The same can be done with any other signup form that allows you to check for usernames with a button. The more important aspect, I feel, is the email address, which we only validate for correctness, but do not warn automatically if the email address is used. If the email address is already in use, then an error is set after the page is submitted and the form is reset. I hope my replies have been helpful. I am happy to hear any feedback you may have so that we can make our signup process even better. Once again, I am sorry for my lack of knowledge of the French language. Thank you for your time, Omar Kilani Remember The Milk

  9. Omar, Thank you for your comments, and no it’s not a drama if you do not speak french. I think you deserve the gold medal in the ‘Form’ category. Best regards, /Fred

  10. Quelqu’un pour refaire la même chose et le rendre facile d’adaptation, genre pour les forums phpbb… si vous trouvez un moyen de faire ça proprement -> benetnath (chez) gmail(point)com

  11. La seule chose qui me « dérange » dans ce formulaire c’est le message du champ « adresse e-mail » : le système dit que l’adresse e-mail n’est pas valide avant même que j’ai fini de la taper. Ici, on a affaire à un message d’erreur (sans avoir fait encore d’erreur !) et non à un guidage pour la saisie (comme dans le champ mot de passe).

  12. Le formulaire d’inscription à Jamendo est peut-être encore un peu mieux : l’utilité de chaque champ est clairement indiquée et l’aide est particulièrement performante (si par exemple on tape un pseudo déjà utilisé, le système en propose un autre sur lequel il n’y a qu’à cliquer pour l’adopter). Point de tables pour l’alignement des données mais il n’y a cependant toujours pas de <fieldset> à l’horizon.

  13. Bonjour à tous, Je suis en train de créer un site, mais ne suis pas informaticien de base. Mes compétences sont donc réduites… J’ai vu les formulaires d’inscription de « Remember The Milk » et « Jamendo », et j’aimerais bien que le mien soit aussi bien conçu. Quelqu’un saurait-il me guider dans la création d’un tel formulaire? (bdd, javascript, php, ajax…) Merci à toutes ces âmes charitables! PS: j’accepte toute forme d’aide… ;)

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s