Le formulaire est un élément primordial pour l’utilisateur car il est souvent le point d’entrée d’un site/application mais peut malheureusement rapidement se transformer en porte de sortie.
Le formulaire, c’est l’étape où l’on demande gentiment à l’utilisateur de nous fournir des informations en échange de lui fournir un service ou des informations par la suite.
Maintenant la question à se poser, c’est comment correctement construire un formulaire, comment optimiser sa forme, et comment trouver le bon compromis entre qualité des données récupérées et complexité de saisie.
Ce premier billet va se concentrer sur ces problématiques et sera suivi d’un autre qui s’attardera sur les contrôles, le comportement et les interactions avec l’utilisateur.
Evitez la soupe de HTML
On voit encore trop souvent des formulaires sans aucune valeur sémantique alors que le HTML met à votre disposition les éléments qui vont bien.
Les <label> associent un libellé à un champ du formulaire et apportent de base des fonctionnalités intéressantes.
Si le label est cliqué, la saisie se positionne sur le champ en question ou bien la checkbox est cochée…
Les <label> maximise l’accessibilité de votre formulaire en fournissant aux lecteurs d’écran des informations relationnelles.
La balise <fieldset> vous servira a regrouper de façon thématique un ensemble de champs.
Celle ci pourra être complétée par un champ <legende> afin de libeller ce regroupement.
Penser à utiliser à bon escient l’attribut size et maxlength de vos champs, celui-ci donne une idée concrète à l’utilisateur du format de donnée attendue et vous évitera d’ailleurs que l’utilisateur soit confronté à un contrôle sur la longueur du champ saisi.
Ex: Un numéro ISBN aura une taille fixe et moins importante qu’un champ Titre du livre par exemple. L’utilisateur pourra alors cerner très rapidement ce qui est attendu.
Quels champs choisir selon la donnée visée ?
Sur ce point là, je vous invite à consulter la traduction de “Should I use a drop-down ? Four steps for choosing form elements on the Web” de Sarah Allen et Caroline Jarrett.
Cet article vous explique la méthodologie pour choisir tel ou tel élément dans un formulaire.
Regrouper l’information
Afin d’améliorer la lisibilité et la clarté d’un formulaire, il est important de regrouper les informations qui vont ensemble et de définir un ordre logique dans lequel on va afficher ces regroupements.
Les champs doivent donc être regroupés dans des catégories basées sur la nature sémantique des éléments.
On peut alors faire apparaître des coupes dans le processus afin de morceler la saisie.
Les champs dont la probabilité de remplissage est moindre ou optionnels, peuvent être groupés dans une dernière catégorie à la fin du formulaire.
Pour des formulaires avec un nombre de données assez important, on peut opter pour une pagination du formulaire et donc définir une séquence de différents formulaires.
Le formulaire est meilleur si l’utilisateur peut envisager la taille du formulaire d’un simple coup d’oeil (Evitez donc un effet de scroll trop important).
Le formulaire sous forme de “wizard” a cependant un inconvénient pour l’utilisateur: Celui d’ignorer la durée de renseignement réelle.
Dans le cas d’un formulaire paginé, on prend soin de faire figurer un fil d’Ariane (beadcrumb) ou une navigation par onglet afin de permettre à l’utilisateur de naviguer aisément entre les pages.
Indiquer les informations obligatoires
La lisibilité d’un formulaire passe aussi par sa capacité à discerner facilement les informations qui sont obligatoires de celles qui sont optionnelles.
Dans cette optique, on affiche clairement les champs obligatoires par une convention homogène à tout le site.
On utilise généralement l’astérisque (*) et l’on peut également le coupler avec une balise acronym:
<label for="login">Identifiant <acronym title="obligatoire">(*)</acronym></label>
On préférera positionner la légende avant le formulaire afin de respecter l’ordre de lecture de haut en bas.
Informer son visiteur sur le type de donnée attendue
Il ne faut pas hésiter à proposer des messages explicatifs clairs et détaillés avant toute action.
La prévention vaut mieux que la répression.
Un utilisateur bien informé de ce qu’il doit saisir fera mécaniquement moins d’erreurs dans son processus de remplissage.
Comment disposer ses champs et labels
On évoque ici la question existentielle que chacun se pose, et beaucoup d’ergonomes apportent des réponses variées. En ce qui concerne la disposition du label au dessus ou à coté du champ, je suis tenté de préférer une lecture linéaire ce qui place donc vos labels à gauche du champ de saisie.
Pour ce qui de l’alignement du label, pour ma part je retiendrai une seule méthode qui consiste à minimiser l’espace entre un label et le champ de saisi.
Si vos labels ont une taille relativement similaire, on pourra aligner les labels à gauche tandis que dans le cas contraire, on préféra aligner à droite les labels.
Les boutons primaires et secondaires
Après avoir lu une étude sur comment faire apparaître vos boutons primaires et secondaires et comment les disposer, je vais donc vous résumer ce qu’il faut en retenir.
Disposer vos boutons dans le même alignement horizontal que vos champs afin de conserver un sens de lecture de haut en bas cohérent.
Dans le cas où vous utiliseriez plusieurs boutons, le bouton primaire (Ex: Valider) et le bouton secondaire (Ex: Annuler) doivent être disposés l’un à coté de l’autre ce qui évite d’emprunter un axe horizontal trop marqué.
Il est préférable de différencier visuellement vos 2 boutons afin que l’utilisateur détecte d’un simple coup d’oeil le bouton associé à l’action.
Pour cela, on pourra faire apparaitre ces 2 boutons de cette façon:
Erreurs à ne pas faire sur un formulaire
Evitez d’utiliser trop de menu déroulant dans la mesure du possible, car une étude a montré que l’utilisateur concentre d’abord son attention sur cet élément ce qui dans certains cas n’est peut être pas l’effet recherché.
Chassez définitivement l’idée de vouloir faire figurer un bouton Reset sur un formulaire.
J’en croise encore sur pas mal de formulaires, et ce bouton n’apportera rien à votre visiteur si ce n’est potentiellement une frustration énorme d’avoir effacé toutes ces données par erreur.
Évitez de trop ajaxifier vos processus de saisi!
En effet, ne connaissant pas le niveau d’expertise de l’utilisateur potentiel, il vaut mieux s’en remettre à des processus de saisi que l’utilisateur connaît et a l’habitude de manier.
Conclusion
En résumé, il faut garder en mémoire que le formulaire doit impérativement prendre en compte les problématiques de lisibilité et d’organisation visuelle afin de mettre en confiance l’utilisateur et de lui faciliter le processus de saisi.
Si vous voulez une astuce pour vérifier que votre formulaire respecte toutes ses règles de rendu et que celui ci semble correctement optimisé visuellement, pensez à appliquer un filtre de flou gaussien afin de vous imprégner d’une vision globale et vérifier que le découpage est correct.
Ressources complémentaires:
4 Commentaires
[...] de Taillac propose sur son blog un excellent article sur l’ergonomie des formulaires. A lire [...]
Excellent article
(ou première partie de dossier)
Je l’avais mis en favoris/de coté, pour le lire plus tard, il va y rester ^^
Vivement la 2e partie
Très bon article, avec que des bons conseils dedans
je retiens surtout la présence d’un fil d’Ariane sur les formulaires, qu’on ne retrouve que trop peu…
Très très bel article et très clair.
Cependant, il semble que le Css ne permet d’agencer les formulaires que sur une seule ‘colonne’ d’input. Pardon si je fais erreur mais je m’interesse au CSS depuis peu et je suis encore néophyte.
Je cherche donc un ‘didacticiel’ ou une présentation form avec colonnes.
Dans le cas des labels juste devant les input et ca sur deux colonnes , ca pose probleme !