5 préconisations afin d’optimiser la saisie de vos formulaires — Partie 2

Combien d’entre vous se sont fatigués à lire et à compléter des formulaires ? À ne pas comprendre l’information à saisir ?

Les labels constituent l’information majeure de vos formulaires. Ils se doivent être compréhensibles, lisibles mais aussi accessibles.

Dans ce second opus, c’est par un retour d’expérience que nous allons aborder l’affichage du label des text fields de vos formulaires.

Préconisation 2 : Afficher correctement le label de vos text fields

“Quels sont les styles de label à éviter ?”

Exemple 1 / Label positionné sur la gauche :

Ce style de label est à éviter en raison :

• D’une lecture non-linéaire : droite / gauche / droite.
• D’une augmentation du temps de lecture.
• D’une adaptation mobile peu optimale. Surtout, si le label est long.

Point d’amélioration :

• Placer le label au-dessus de l’input.

Exemple 2 / Label trop long :

Ce style de label est à éviter en raison :

• D’un label pouvant être tronqué.
• D’une augmentation du temps de lecture.

Point d’amélioration :

• Utiliser un adverbe afin d’avoir un label plus court.

Exemple 3 / Label sur deux lignes :

Ce style de label est à éviter en raison :

• D’une augmentation de la largeur de la zone de saisie.
• D’une augmentation du temps de lecture.

Point d’amélioration :

• Utiliser un adverbe afin d’avoir un label plus court.

“Quel est le style de label idéal ?”

Le label au-dessus du champ de saisie :

Afin que le style de label soit idéal, celui-ci doit être :

• Parfaitement visible.
• Concis (utiliser un adverbe).
• Positionné au-dessus de l’input pour une lecture du haut vers le bas lors de la saisie.

Nota : Placer le libellé au-dessus du text field permet de réduire les mouvements des yeux de l’utilisateur lors de la lecture, augmentant ainsi la vitesse de saisie.

“N’oublions pas le Placeholder”

D’un point de vue informatif, le placeholder a un seul objectif : présenter une aide précise lors de la saisie d’un champ. Ainsi, il est considéré comme :

• Secondaire.
• Une simple aides à la saisie, si il est nécessaires à la compréhension des données attendues.

Nota : D’un point de vue accessibilité, le placeholder n’est pas pris en compte par les synthèses vocales et de plage braille. De plus, la couleur par défaut du texte n’est pas suffisamment contrastée au regard des attentes des référentiels d’accessibilité (RGAA, WCAG...).

“Quels sont les usages à éviter ?”

Dans cet exemple, l’usage du placeholder n’est pas adapté car :

• Il fait doublon avec le label.
• Cela demande de retenir le texte dès celui-ci effacé lors de la saisie.

Point d’amélioration :

• Retirer le placeholder “Nom”. Dans ce cas de figure, l’attribut fait doublon et n‘apporte aucune aide précise afin de saisir le champ correctement. De plus, l’utilisateur passera plus de temps sur ce champ lors de la lecture.
• Placer la notion “Champ obligatoire” en tant que texte d’assistance + astérisque à droite du label. De ce fait, l’utilisateur ne sera pas obligé de retenir les champs obligatoires lors de la saisie.

“En résumé, qu’est-ce qu’on en pense ? “

Afin d’utiliser le placeholder à bon escient, il est nécessaire de se poser la question : Est-il possible de renseigner correctement le champ sans faire d’erreur ?

Cela permet ainsi d’éviter d’utiliser un placeholder sur des champs de saisie tel que le “Nom” ou le “Prénom” par exemple.

Dans cet exemple, le placeholder est adapté car :

• Il permet de montrer un exemple de saisie correct.
• Il n’est pas nécessaire à la compréhension du champ de saisie.
• Il ne demande pas à retenir le format de saisie une fois celui-ci effacé.
• Il est utilisé à bon escient.

J’espère que cet article vous a permis de vous engager dans une réflexion autour de l’affichage des labels de vos text fileds.

Rendez-vous pour le prochain article, dans lequel je parlerai de la 3ème préconisation : “Indiquer de façon claire les messages d’erreur”. N’hésitez pas à me suivre pour ne pas manquer la suite.

Envie d’échanger sur le sujet ? Partager vos expériences ?

N’hésitez pas à me contacter ou/et à laisser des commentaires sur cet article. Dans le cadre de mes activités de veille UX/UI chez InTech, je suis toujours intéressé pour échanger avec des acteurs de tous horizons afin d’étoffer mes connaissances et partager des bonnes pratiques.

Remerciements à toute la Squad UX/UI d’InTech : Aurélie, Candice, Célie, Julien, Laurine, Nicolas, pour leur participation à la réflexion de cet article.e.

Plan des 5 préconisations :

• Bien choisir le style des text fields.
• Afficher correctement les labels.
• Indiquer de façon claire les messages d’erreur.
• Utiliser les inputs types.
• Structurer les formulaires en mode web et mobile.