Bon, vous connaissez tous cette recommandation ergonomique, relative aux formulaires:
« Distinguez les champs obligatoires des champs optionnels »
Une recommandation globalement bien respectée. Reste à savoir comment opérer cette distinction car aujourd’hui le bon design d’interface se joue dans le détail. 4 cas et quelques illustrations …
L’affaire est plutôt contextuelle, la règle plutôt simple et très précise avec une déclinaison, selon moi, en 4 cas:
- Cas 1: Tous les champs obligatoires
Indiquez par un texte global, explicite et apparent, au dessus du formulaire par exemple « Tous les champs sont obligatoires ». Rien sur les champs, comme vous pouvez le voir sur les illustrations en fin de billet (première bonne pratique, ebay, google…). Oui je sais, beaucoup de sites ecommerce n’appliquent pas cette règle !
- Cas 2: Seulement quelques champs obligatoires et une majorité de champs optionnels
Indiquez les champs obligatoires et une astérisque rouge (accompagnée d’une petite légende, en haut, c’est mieux ou en bas, par exemple * Champs obligatoires). Classique.
- Cas 3: Seulement quelques champs optionnels et une très grande majorité de champs obligatoires
Indiquez uniquement les champs optionnels par un texte, à droite de la zone de saisie, par exemple (Optionnel) ou (Facultatif), comme sur l’exemple d’Apple. Cela rejoint les travaux de Luke Wroblewski, pour lesquels le critère « Concision » est mis en avant. Aucune indication pour les champs obligatoires
- Cas 4: A la fois pas mal d’éléments obligatoires et optionnels
Vous avez là deux possibilités. Soit essayez de faire des regroupements en indiquant le caractère obligatoire ou non sur les libellés de catégories, par exemple « catégories 1 : (obligatoire); Catégorie 2 : (Obligatoire); Catégorie 3 (Optionnel) », soit plus classiquement, indiquez (cas 2) les champs obligatoires avec une astérisque rouge (accompagnée d’une petite légende, en haut, c’est mieux ou en bas).
Mais là encore, n’oubliez pas qu’une autre recommandation ergonomique consiste à ne demander que le minimum, juste ce qu’il faut d’informations : concision et simplicité, avant tout !
Quelques illustrations de ces 4 cas au travers de bonnes pratiques ou de formulaires à optimiser :
Bonne pratique (cas 1)
Bonne pratique (cas 3)
Bonne pratique
Bonne pratique
Formulaire à optimiser (optionnels indiqués par l’astérisque grise : risque de confusion avec champs obligatoires)
Bonne pratique (cas 4)
Formulaire à optimiser (surcharge visuelle, gras, astérisque)
Formulaire à optimiser (uniquement des champs obligatoires et tous indiqués)
De mon côté j’aurai eu tendance à toujours garder la même règle (par exemple un astérisque pour les champs obligatoires et rien pour les champs optionnels) afin qu’il n’y ait pas besoin de chercher et comprendre la règle propre à chaque cas lorsqu’une personne se trouve devant un formulaire.
Je comprends l’argument concision et simplicité. Néanmoins, comme je ne suis pas un ergonome, je suis intéressé par comprendre pourquoi c’est plus simple de faire plusieurs cas plutôt qu’un seul ? N’est-ce pas finalement plus simple pour l’utilisateur d’avoir juste un seul cas ?