Comment bien placer des labels dans leur zone de texte
Par Anthony T
Il existe plusieurs manières de disposer les labels sur les formulaires. En général, les designers web les placent soit au‑dessus, soit à gauche des zones de texte. Mais jusqu’à récemment, personne ne pensait à les insérer à l’intérieur. On commence à rencontrer de plus en plus fréquemment des formulaires de ce genre. Plus ils gagnent en popularité, plus les designers web auront tendance à les utiliser. Mais avant d’opter pour cette méthode, quelques points sont à connaître.
En plaçant vos labels à l’intérieur des zones de texte, vous apportez à votre formulaire de nombreux avantages. Pour commencer, vous réduisez la longueur et la largeur du formulaire. Puisque le label se trouve à l’intérieur, vous disposez de davantage d’espace à l’extérieur de la zone de texte pour réaliser un agencement plus compact. D’autre part, le nombre de fixations visuelles nécessaires entre le label et la zone de texte diminue. Les deux éléments étant superposés, une seule fixation suffit pour trouver le label et la zone à laquelle il appartient. Le formulaire devient alors plus lisible et plus rapide à remplir, tout en donnant une impression générale de sobriété et de simplicité. Il ne semble pas surchargé, ce qui le rend plus attrayant pour les utilisateurs.
Reconnaissance visuelle contre mémoire
Placer les labels à l’intérieur des zones de texte apporte autant d’avantages que de défis. La principale difficulté est de permettre la reconnaissance visuelle plutôt que l’usage de la mémoire. Lorsque l’utilisateur commence à remplir une zone de texte, le label qui se trouve à l’intérieur disparaît. Lorsqu’il revient sur le formulaire, il est difficile pour lui de reconnaître les informations qu’il a entrées. Sans aucun indice sur le type d’information figurant sur le formulaire, l’utilisateur est obligé de se rappeler les labels correspondant aux données qu’il a saisies, ce qui augmente la charge cognitive de sa mémoire.
Groupes et intitulés
Afin que l’utilisateur puisse reconnaître facilement le type d’information qu’il saisit, vous devez regrouper vos zones de texte en fonction des informations qu’elles contiennent et attribuer un intitulé clair à chaque rubrique. Par exemple, les informations de livraison et de paiement sont différentes. Il est donc important de ne pas réunir ces zones de texte. Répartissez‑les plutôt dans deux rubriques séparées ayant chacune un titre. L’utilisateur pourra ainsi plus facilement identifier la zone correspondant aux informations de livraison et celle correspondant aux informations de paiement.
Des rubriques secondaires sont également nécessaires si vous créez un grand nombre de zones de texte. Par exemple, les informations de livraison contiennent généralement des données concernant la personne et d’autres concernant l’adresse. En regroupant les zones correspondant à ces deux catégories dans deux rubriques secondaires, vous aidez l’utilisateur à les distinguer une fois le formulaire rempli.
Messages d’erreur
La plupart des messages d’erreur sur les formulaires indiquent à l’utilisateur qu’il a laissé un champ vide ou saisi des informations non valides. Si les labels sont placés à l’intérieur des zones de texte, ces messages d’erreur standards ne suffisent pas. Lorsqu’un utilisateur rencontre un message d’erreur indiquant qu’une information n’est pas valide dans la zone de texte qu’il a remplie, cela ne lui est pas très utile puisque le label correspondant a disparu. Résultat : ne sachant pas à quoi s’applique l’information située dans la zone de texte, l’utilisateur a plus de difficultés à corriger sa saisie. C’est pourquoi le message d’erreur doit mentionner l’information saisie pour chaque zone de texte. Indiquer simplement qu’une zone de texte n’est pas valide n’aide pas l’utilisateur à reconnaître et à corriger l’information. Vous devez adapter chaque message d’erreur à chaque zone de texte. L’utilisateur sera ainsi capable de la corriger sans voir le label.
Feed‑back visuel
Placer les labels à l’intérieur des zones de texte représente un autre défi : le feed‑back visuel reçu par l’utilisateur. Ce feed‑back doit se déclencher lors de la sélection et de la saisie d’informations dans la zone de texte, mais également lors de la suppression d’informations et de la désélection de la zone. Si vos zones de texte sont bien conçues, les utilisateurs pourront remplir votre formulaire sans aucun problème.
Sélection d’une zone de texte et saisie
La première fois qu’un utilisateur pose les yeux sur votre formulaire, les labels doivent être gris afin de se différencier du texte noir qui s’affiche lors de la saisie. Ils doivent disparaître au moment où l’utilisateur commence à taper, mais pas lorsqu’il sélectionne la zone de texte à l’aide de la souris. La zone de texte doit plutôt être mise en évidence et le label doit s’estomper, indiquant ainsi qu’il va disparaître au moment de la saisie. Le label ne doit pas disparaître complètement avant que l’utilisateur ne commence à taper : certains utilisateurs risquent de sélectionner une zone de texte et d’oublier quelles informations ils doivent y entrer. En laissant le label visible jusqu’à la première frappe, vous évitez à l’utilisateur de faire appel à sa mémoire pour se souvenir du label.
Suppression d’informations et désélection de la zone de texte
Lors de la suppression d’informations et de la désélection de la zone de texte, celle‑ci doit revenir à son état d’origine. Le label doit donc réapparaître. Dans certaines zones de texte, le label ne réapparaît pas, même si la zone est revenue à son état d’origine. Le label doit réapparaître lorsque l’utilisateur supprime les informations et désélectionne la zone de texte afin qu’il puisse le lire à nouveau si nécessaire.
Placer les labels à l’intérieur des zones de texte apporte son lot d’avantages et de difficultés. Si vous y parvenez, votre formulaire aura l’air plus propre, plus simple et plus léger que la plupart de ceux rencontrés sur le web. Les utilisateurs seront impressionnés par la vitesse et la facilité avec laquelle il se remplit. Mais parvenir à ce résultat demande du travail. Cet article ne le fera pas pour vous, mais il peut vous mettre sur la bonne voie afin qu’au bout du compte, vous n’ayez plus à vous inquiéter de rien.
À vous de jouer
- In-Field Labels jQuery Plugin
- jQuery Form Labels Plugin
- Making Forms Convert Through Awesome Inline Labels
http://uxmovement.com/forms/how-to-pull-off-putting-labels-inside-textboxes