Développer un formulaire Web ergonomique

La majorité des sites Web comportent au moins un formulaire : pour entrer des commentaires, pour entrer en contact avec l'administrateur, pour gérer les données si on a les droits requis, etc.

Votre expérience en tant qu'utilisateur de différents sites Web vous a sans doute démontré que certains formulaires sont très rapides à remplir alors que d'autres prennent une éternité. Certains sont agréables alors que d'autres sont carrément mal conçus. Certains sont clairs alors que pour d'autres, on se demande qu'est-ce qui est attendu de nous.

Ces différences ne sont pas dues au hasard. En tant que développeur Web, vous devez connaître les principales règles qui permettront de rendre un formulaire Web ergonomique. Voici donc quelques-unes des meilleures pratiques pour développer un formulaire.

▼Publicité

  • Le formulaire débutera toujours par un titre clair suivi d'une indication du rôle de ce formulaire.
  • Le focus doit être dans la première case de saisie dès le départ et la touche Entrée doit avoir le même effet qu'un clic sur le bouton de soumission du formulaire.
  • L'usager doit savoir ce qui doit être entré dans une zone de saisie dès le premier coup d'oeil et ce, même lorsque certains champs sont déjà remplis. Il faut donc éviter de n'utiliser que le watermark comme libellé.
  • L'usager doit connaître les règles de validation des informations saisies dès le premier coup d'oeil.
    • Les champs obligatoires seront marqués d'un astérisque.
    • La taille des contrôles sera une indication de la taille de l'information attendue (ex : la case de saisie d'une quantité sera plus petite que celle pour saisir un nom).
    • Les formats de validation seront indiqués à côté des champs (ex : format du numéro de téléphone).
  • Le formulaire doit être aussi court que possible (lire : facile à remplir).
    • On ne rendra obligatoire que la saisie des informations qui sont vraiment obligatoires (ex : la saisie d'un avatar pour un usager devrait être optionnelle car on pourra utiliser un avatar par défaut pour ceux qui n'en ont pas choisi un).
    • Dans un formulaire qui saisit un mot de passe, toujours placer le mot de passe à la suite du code d'usager car lorsqu'un navigateur enregistre les combinaisons code d'usager/mot de passe pour une page Web, ils considère que le code d'usager est l'information saisie juste avant le mot de passe.
    • Si certaines informations ont une valeur par défaut, il n'est souvent même pas nécessaire de les afficher à l'écran (ex : lorsqu'un nouvel usager est créé, si son statut est obligatoirement "nouveau", pourquoi afficher ce statut à l'écran ?).
    • Si certaines informations ne doivent être saisies que dans un cas particulier, elles ne doivent apparaître que lorsque le cas se présente (ex : on ne demandera si la personne est enceinte que si elle a entré qu'elle était de sexe féminin).
    • Le choix du type de zone de saisie (case de saisie, boutons radio, cases à cocher, liste déroulante, etc.) est également important. Voir des exemples ici : http://www.lukew.com/ff/entry.asp?1950

Focus par défaut sur la première case d'un formulaire

Ceci vous est certainement déjà arrivé : vous ouvrez une page Web qui contient un formulaire, vous commencez à remplir les cases du formulaire... et rien ne s'écrit à l'endroit désiré. Frustrant ! Le développeur de ce formulaire n'était pas très consciencieux.

Il est pourtant simple pour un développeur de donner le focus à un contrôle dès le chargement de la page. L'usager n'aura donc pas à cliquer sur le premier contrôle de saisie avant de commencer à taper. 

Voici deux techniques permettant d'y parvenir.

HTML

HTML 5 nous a amené une série de balises et d'attributs permettant d'améliorer l'expérience utilisateur sans compliquer la vie des développeurs. Parmi eux, on retrouve l'attribut autofocus.

Ex :

HTML

<input type="text" id="prenom" name="prenom" autofocus />

jQuery

L'instruction suivante permet de sélectionner automatiquement la première balise de saisie (<input>, <textarea>, <select> ou <button>) du formulaire. Elle est plus longue à écrire que l'ajout d'un simple attribut autofocus. Cependant, elle a pour avantage de pouvoir être placée systématiquement sur n'importe quel formulaire et de toujours donner le focus à la bonne zone de saisie.

Remarquez la présence d'un espace entre l'identifiant du formulaire et :input.

jQuery 

$(function () {

    $('#monformulaire :input:first').focus();

});

On peut bonifier cette instruction pour sélectionner la première balise de saisie qui soit active (donc pas disabled) et visible (donc pas cachée par CSS).

jQuery 

$(function () {

    $('#monformulaire :input:enabled:visible:first').focus();

});

Action par défaut de la touche Entrée

Il est possible de préciser le comportement de la touche Entrée dans un formulaire à l'aide de jQuery. Dans la grande majorité des cas, on voudra que la touche Entrée se charge de soumettre le formulaire.

Ex :

jQuery

$(function () {

    // ce comportement est limité aux touches pressées alors que le focus est dans le formulaire

    $('#monformulaire').keypress(function (event) {

        // si la touche Entrée a été enfoncée

        if (event.which == 13) {

            // génère un clic sur le bouton de soumission

            $('#soumettre').click();

        }

    });

});

Notez qu'en raison de la nature même des types de contrôles de saisie, la touche Entrée ne soumettra pas le formulaire si le focus est sur un <textarea> ou sur une liste déroulante.

Pour plus d'information

« 10 Best Practices for Web Forms ». JotForm. http://www.jotform.com/help/121-10-Best-Practices-for-Web-Forms 

« Contact Us Page Best Practices with 22 Fabulous Showcases ». OXP. http://www.onextrapixel.com/2009/10/15/contact-us-page-best-practices-with-22-fabulous-showcases/

« UX Design for Passwords and Registration Forms ». SitePoint. http://www.sitepoint.com/ux-design-passwords-registration-forms/

« Satisficing: What Does it Mean for Web Forms? ». SitePoint. http://www.sitepoint.com/satisficing-mean-web-forms/

« Dropdowns Should be the UI of Last Resort ». Luke W. http://www.lukew.com/ff/entry.asp?1950

« jQuery Dynamically focus on the first INPUT or Textarea ». Stack Overflow. http://stackoverflow.com/questions/4026091/jquery-dynamically-focus-on-the-first-input-or-textarea

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories