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

Combien d’entre vous ont pesté face à un formulaire mal pensé ? Trop long ? Avec des text fields peu accessibles ?

Étant un composant d’interface le plus couramment utilisé, les text fields sont représentés sous différentes tailles, formes et styles.

Mais comment les optimiser afin de rendre l’expérience utilisateur agréable lorsque celui-ci est confronté à un formulaire ?

Ici, l’objectif est de minimiser les efforts demandés aux utilisateurs afin de rendre la saisie rapide et intuitive.

Ainsi, c’est par un retour d’expérience que je vous partage ces préconisations via 5 articles différents.

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.

Préconisation 1 : Bien choisir le style des text fields

“Quels sont les styles de text field à éviter ?”

Exemple 1 / Le style filled :

Ce style de text field a un faible taux de clic en raison :

• D’une ligne horizontale de 1 pixel facile à manquer.
• D’une zone de saisie peu délimitée visuellement.
• D’une confusion avec un titre et son séparateur de ligne.

Ces contraintes augmentent ainsi le temps nécessaire d’interaction des utilisateurs.

Exemple 2 / Le style background color :

Hormis le fait que ce text field a un fort taux de clic en raison du background faisant office de focus sur le composant, ce design peut faire allusion à un bouton et non à un champ de saisie.

Dans la même idée, la couleur en background de l’input peut aussi faire allusion à un champ désactivé. L’utilisateur peut penser que le champ texte est déjà saisi (manque de contraste concernant le label).

Cependant, dans ce cas de figure, ce style peut être adapté en fonction du design globale du formulaire. Par exemple, s’il y a une dizaine de champs par écran.

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

Dans ces deux exemples, on remarque que les champs de saisie peut être perçus différemment d’un design à un autre. Augmentant ainsi le temps de lecture et d’interaction des utilisateurs.

De plus, cela peut aussi impacter l’accessibilité par le manque de contraste (Au regard des attentes des référentiels d’accessibilité : WCAG, RGAA…).

“Quel est le style du text field idéal ?”

Le style outlined :

Ce style de text field a un fort taux de clic en raison :

• D’une bordure faisant office de focus sur le composant.
• D’une mise en évidence de l’action effectuée lors de la saisie.
• D’un design simple et épuré.

Optimisation :

En fonction du design de votre interface, ajouter une couleur en background du formulaire peut être envisageable afin d’augmenter le contraste des text fields. Cela permet d’interagir immédiatement avec la zone de saisie sans hésitation.

“Comment harmoniser le style de vos text fields et vos boutons ?”

Dans certains cas, il est possible de se retrouver avec un style de text field et de bouton identique.

Dans cette situation, il faut se poser la question : “Quel est l’objectif principal du workflow ?” Dans un formulaire, c’est avant tout saisir et valider l’information.

Dans cet exemple, les text fields et le bouton “Next” sont des actions prioritaires. Ici, le style du bouton « Back » n’est pas adapté car :

• Il peut prêter à confusion avec le style du text field en raison de leur ressemblance.
• Il n’est pas une action prioritaire mais secondaire.

Point d’amélioration :

Retirer la bordure du bouton « Back » afin de le différencier avec les text fields. On peut ainsi remarquer que l’action « Back » passe au second plan d’un point de vue action.

J’espère que cet article vous a permis de vous engager dans une réflexion autour du style de vos text fileds.

Rendez-vous pour le prochain article, dans lequel je parlerai de la 2ème préconisation : “Afficher correctement les labels”. 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.

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.