Et on reparle de l’emplacement des intitulés de champs de formulaire

Voilà plus de 10 ans que je fais ce métier, et je ne me souviens pas d’une période aussi trouble que celle que nous sommes en train de vivre… Je fais bien évidement référence à LA grande question que tout le monde se pose : Où positionner les intitulés de champs dans un formulaire en ligne ? Cette question peut vous faire sourire, mais le débat est toujours actif, la preuve avec cet article publié par UXMovement  :  Why Users Fill Out Forms Faster With Top Aligned Labels.

Il y est donc question d’une étude de eye-tracking qui met en évidence le nombre de points de fixation et la distance parcourue par l’oeil dans cette comparaison entre les intitulés alignés à gauche et en haut :

Form_visual_fixations

Cette démonstration est équivoque : Les intitulés positionnés au dessus des champs diminuent grandement l’effort de lecture / compréhension. Jusque là tout est logique dans la mesure où ceci confirme les conclusions de cette précédente étude : Web form design guidelines: an eyetracking study.

Par contre, il n’existe toujours pas d’étude de référence pour les formulaires avec les intitulés à l’intérieur des champs (cf. Avons-nous encore besoin des intitulés de champs dans les formulaires), ce qui est bien dommage car l’illustre exemple de l’Apple Store peut nous faire douter… Même si j’aurais tout de même quelques modifications à apporter à ce formulaire (notamment sur la proximité des champs), l’argumentation d’un article lu récemment (In the Details: Form Labels) me semble tout à fait recevable : Positionner les intitulés à l’intérieur des champs n’est pas sans risque car une fois que le curseur est à l’intérieur, l’intitulé disparait. Il ne faut donc pas être distrait entre-temps sinon le seul moyen est de cliquer sur un autre champ et de cliquer à nouveau pour saisir les données :

Contact_Form

Donc vous aurez bien compris que le débat est loin d’être clôt. Le seul élément qui vous permettra de trancher entre l’une de ces solutions est la place dont vous disposez sur la page : Plus vous avez de champs (ou d’éléments sur la page) et plus vous aurez besoin de gagner de la place. La solution sera donc d’économiser des pixels en hauteur (en positionnant les intitulés sur la même ligne que les champs) ou en largeur (en positionnant les intitulés directement dans les champs).

11 commentaires sur “Et on reparle de l’emplacement des intitulés de champs de formulaire

  1. Il manque quand même le cas où on positionne les libellés au-dessus des champs, les champs étant répartis sur 2 colonnes (un peu comme sur la dernière capture d’écran). Pour ce qui est des libellés dans les champs, à moins d’être dérangé au moment de la saisie, le risque de se tromper est faible. Le dernier exemple semble être un bon mix…

  2. L’argument des libellés qui disparaissent est très pertinent, même si on est pas dérangé pendant la saisie, pour la simple et bonne raison que la majorité des gens qui utilisent des sites et outils Web ne sont pas informaticiens et qu’on a trop tendance à l’oublier.

    La dernière capture est un exemple un peu extrême de ce procédé (5 labels pour 11 champs…). Je dirais qu’il faut habillement mélanger les deux solutions (hors et dans les champs, l’un sans l’autre ou l’un avec l’autre). Mettre un intitulé dans un champ peut être simplement une indication de ce que ce champ doit recevoir, un exemple concret, contrairement au label qui pourrait être mal interprété parfois ou trop sommaire.

    Exemple de l’adresse :
    Premier champ souvent intitulé « Adresse 1 », commenté dedans avec « n° et nom de rue », second champ « Adresse 2 », commenté avec « bâtiment, escalier, n° d’appartement… »
    Bien sûr tout le monde connaît Adresse 1 et Adresse 2 me direz-vous, mais pensez aux non-informaticiens ! (et ce n’est qu’un exemple)

    Les commentaires en grisé dans les champs, ça ne coûte pas grand chose techniquement (on peut même les automatiser en JS en utilisant l’attribut title du champ) et ça peut aider un débutant de l’outil manipulé ou un débutant en informatique.
    Dans le cas d’un outil que l’on manipulerait tous les jours (application métier), les champs commentés peuvent devenir superflus avec le temps. On peut alors imaginer d’autres solutions comme un commentaire qui s’afficherait au roll-over…

    Pour finir je dirais que le label a une grande importance car est un élément d’accessibilité supplémentaire : si le formulaire est bien fait, un clic sur le label place le focus sur le champ.

  3. Dans le cas, « pas dans le formulaire », que pensez-vous des libellés placés à gauche mais alignés à droite ? Càd que les libellés sont le plus proches possible des champs auxquels ils se rapprochent ?
    La lecture est ainsi facilitée car la distance entre le libellé et le champs est diminuée.
    Je me souviens que c’était un conseil de mon prof d’ergonomie … mais cela remonte à quelques années déjà ;-)

  4. @ Christophe > Des intitulés positionnés au dessus des champs mais des champs distribués sur 2 colonnes ? Est-ce que ça ne revient pas au même en terme de place ?

    @ Matthieu > J’irais plus loin en disant qu’il faut un mix de trois composantes : Les « fieldset », les intitulés au dessus et les intitulés dans les champs. Je n’ai pas d’exemple sous la main mais on doit pouvoir obtenir un résultat satisfaisant pour un gros formulaire (plus de 15 champs). Sinon petite précision : Même un informaticien peut être distrait pendant la saisie d’un formulaire (si si, j’en connais personnellement un ou deux à qui c’et arrivé !).

    @ Pascal > Oui c’est l’emplacement que je privilégie depuis des années. Quel dommage que l’étude n’est pas comparée ces 3 alternatives…

  5. Je ferais toujours le même commentaire que j’avais fait pour l’article « Avons-nous encore besoin des intitulés de champs dans les formulaires » :

    —–« 1/ Un autre problème n’a pas été cité. Lors de la phase de validation, il est fréquent que l’internaute fasse une vérification de sa saisie.

    Dans les deux premiers exemples (champs sans label) on peut vérifier les infos saisies, mais pas leur validité dans le contexte, c’est à dire : “quelles infos me demande de remplir l’interface ?”. Pour faire simple, est ce que j’ai bien rempli mon Nom dans la case Nom et pas dans la case Prénom ?

    Les repères apporté sur http://www.culinaryculture.com/#signup sont un plus indéniable, mais on voit les limites : pictographier deux concepts proches (nom et prénom) n’ai pas aisé.

    2/ D’autre part, l’affordance des champs de saisie est diminuée. En effet, un champ dans lequel on est invité à saisir des données doit être vide, sinon cela signifie qu’il est déjà rempli (et donc n’invite pas à l’interaction). C’est essentiellement pour cette deuxième raison que je bannis toujours les intitulés dans les champs. »——–

    Par contre, je me pose beaucoup de questions sur la pertinence et le moyen de gérer des champs sur 2 colonnes.

    Je trouve cela très pratique en termes de conception, certes, mais très perturbant en tant qu’utilisateur.

    Avez-vous des retours d’expériences, des bonnes pratiques ou de la biblio sur le sujet ?

  6. @FredCavazza et @Pascal : Les labels en drapeau à gauche des champs n’est pas une bonne solution, car comme en typographie lorsque l’on aligne le texte à droite, le début de tous les mots ne sont pas alignés, ce qui oblige le regard à se promener de droite à gauche, c’est très perturbant. Luke Wroblewski l’évoquait dans cet excellent Slideshow sur le sujet (page 22) : http://www.lukew.com/resources/articles/webforms_lukew.pdf
    @Fredcavazza : Les fieldset bien sûr ne doivent pas être oubliés. Je dis toujours qu’il faut exploiter la richesse qu’offre HTML en matière de formulaire. Il y a de quoi faire des formulaires très très ergonomique avec les balises de formulaire et un peu de CSS (pour l’aspect focus par exemple), et même sans JS.

    @Jonathan : Votre remarque est très pertinente sur la relecture de la saisie, je la note ;) et c’est ce pourquoi je recommanderait d’écrire principalement des exemples de saisie ou des précisions sur la saisie dans les champs et de conserver des labels, comme je l’ai dit, l’exemple de l’article est vraiment extrême. Pour la remarque concernant l’affordance, les champs sont censés être grisés, et je pense que depuis longtemps les utilisateurs sont habitués à aborder des champs au contenu grisé qui s’efface au focus. Je ne pense pas que ce soit si gênant si cela ne s’applique pas systématiquement sur tous les champs et qu’il y a une logique et une cohérence dans l’utilisation de ce procédé. Comme toujours, il n’y a pas de règle d’or, il faut faire les choses intelligemment ;)

  7. Tout dépend bien entendu également du design du site où le formulaire est placé. Rien ne sert d’optimiser un tel élément si c’est pour le rendre illisible (oui, oui) de par son non sens avec le reste du site.

  8. @Matthieu : Le fait de lire de gauche à droite est perturbant ? Pourtant c’est ce que l’on fait tous les jours, je ne suis pas sûr de comprendre.
    Personnellement, j’ai appris pour l’accessibilité de mettre les labels à gauche des champs. Il est très important pour les utilisateurs spécifiques d’avoir une lecture de gauche à droite (S’ils ont un zoom écran par exemple, c’est plus simple)
    Mais je prends note de l’article et des commentaires.
    Et vais passer bien plus de temps sur mon prochain formulaire.
    Vincent

  9. Bonjour,

    Excellent cet article ! Les images sont très explicites. Je serais d’accord pour dire que le formulaire avec les intitulés au dessus des champs est bien plus efficace que celui avec les intitulés sur le côté gauche des champs.

    Par contre, je pense que le formulaire contenant les intitulés à la fois au dessus et dans les champs est surchargé et met à mal sa lisibilité.

  10. Bonjour,
    Moi j’aimerais un avis concernant les standards de saisie.
    Je m’explique :
    Je me prends la tête depuis des mois avec un collégue parce que mes formulaires de saisie sont validés (et fermés) avec la touche entrée (Submit quoi !).
    Il me soutiens qu’il ne faut pas faire comme ça et moi je lui soutiens l’inverse.
    Y-a-t-il un standard (j’ai mon idée mais j’aimerais des avis extérieurs) ?

Laisser un commentaire