Une autre étude sur la mise en page des formulaires

Les formulaires ont toujours été  au coeur de nombreux débats dans le petit monde de l’ergonomie web. J’ai d’ailleurs déjà eu l’occasion de m’exprimer à ce sujet sur ce blog. L’auteur de référence sur ce thème est pour moi Luke Wroblewski avec son livre Web Form Design: Filling in the Blanks.

Malgré quelques différents, les avis convergent tous grosso-modo vers un ensemble de bonnes pratiques bien résumées ici : Web Form Design Patterns: Sign-Up Forms. Une récente étude vient relancer le débat avec des conclusions tout à fait intéressantes et surtout des données statistiques issues d’un test d’oculométrie pour cautionner le tout : Web form design guidelines: an eyetracking study.

Les enseignements de cette étude sont les suivants :

  • La mise en page doit être verticale (pas de formulaires avec des champs sur deux colonnes) ;
  • Les intitulés des champs sont lus plus facilement s’ils sont placés au dessus ;
  • Certains champs peuvent être groupés sur une même ligne  (exemple : date de naissance en 3 menus déroulants) ;
  • La chapitrage des formulaires est mieux distingué si les intitulés de groupe ont un traitement graphique distinct (avec la balise fieldset) ;
  • Mieux vaut indiquer les champs optionnels plutôt que les champs obligatoire (cela réduit le « bruit » des caractères parasites) ;
  • Un seul champ suffit pour les numéros de téléphone ou les champs numériques complexes (mieux vaut passer par du reformatage : Vive les assistants de saisie pour les champs de formulaire) ;
  • L’aide contextuelle doit être la plus proche possible (généralement à droite du champ) ;
  • Le nombre d’étapes doit être clairement affiché.

Des enseignements très instructifs qui pourtant ne vont pas forcément dans mon sens (j’ai toujours été un fervent defenseur des intitulés de champs alignés à droite).

Jusqu’à très récemment mon formulaire favori était celui de Remember The Milk (cf. Le formulaire parfait) :

RememberTheMilk

Mais j’ai récemment découvert celui de Ballpark qui est plus sophistiqué :

Ballpark

Bien évidement c’est une affaire de goût puisque ces formulaires sont tous les deux très bons mais j’apprécie énormément le jeux des couleurs ainsi que les têtières des groupes. Et vous ?

6 commentaires sur “Une autre étude sur la mise en page des formulaires

  1. Merci beaucoup pour ce post qui se veut synthétique et clair !
    Je suis également un grand partisan des libellés à gauche des champs MAIS il est aussi possible de les positionner au dessus. Selon Luke Wroblewski tout va dépendre du type de libellé !
    http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

    En fait, il indique que si le libellé est « familier » alors on peut le positionner au dessus sinon il est préférable de le conserver à gauche pour une meilleure association du field et du label.

    Après malheureusement la notion d’espace d’expression rentre aussi en compte. Si la zone est plutôt longue et étroite, on préférera un formulaire avec les libellés au dessus.

    Dans tous les cas, merci pour la qualité des posts.
    Bonne journée :)

  2. Le formulaire de Ballpark n’est pas si « parfait » que ça : je remarque qu’un click sur les labels ne permet pas d’accéder au champ associé.
    Sinon rien à redire, c’est propre (mention spéciale pour les titres des groupes de champs).

  3. Effectivement, une belle référence, cela donne des idées en tout cas.
    J’essaie actuellement de faire comprendre cela à un client qui ne jure que par sa mise en page sur 4 colonnes. Cet article devrait m’aider dans ma tâche. Merci

Laisser un commentaire

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 )

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 )

Photo Google+

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

Connexion à %s