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. Le formulaire parfait ?

    Il vous en faut pas beaucoup :D

    Pas de legend, pas de fieldset, et un tableau ….

    Ca suffit amplement pour n’etre qu’un tableau parmi tant d’autres,voire pire, si on regarde le code c’est l’horreur ,plusieurs id et class pour chaque cellule du tableau….

    Le pictogramme ok aurait mieux fait d’etre vert que bleu..
    Mais c’est vrai que meme si il existe beaucoup de validateurs en ajax celui la est pas mal efficace

    Sinon pour ceux que ca interesse :
    semantique formulaire : http://openweb.eu.org/articles/formulaire_accessible/

    validation ajax : http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

  2. Merci pour ce sujet, grâce à ça j’ai trouvé un script super intéressant ( livevalidation.com ) à integrer sur mon site ..!

    Le petit plus par rapport à rememberthemilk c’est que l’on peut comparer le mot de passe et le mot de confirmation par exemple si tu met un pass différent tu crée un message d’alerte et op ..!
    J’ai un peu bloqué sur la vérification des formats de date de type JJ/MM/AAAA qui n’est pas à l’origine sur le script mais j’ai trouvé ça fonctionne ..!

    Donc pour le formulaire parfait, ça c’est fait et merci ;-) Vive la conversion ..!

Laisser un commentaire