Conseils pour des formulaires efficaces et agréables

Il nous est tous déjà arrivé de perdre patience en remplissant un formulaire : beaucoup trop long, intitulés incompréhensibles, erreurs de fonctionnement, informations qui ne nous semble pas utiles ou trop personnelles.

Dans cet article je souhaite revenir sur quelques grands principes à suivre pour concevoir vos formulaires :

  • En termes d’UX (expérience utilisateur) & d’ergonomie
  • En termes de design

Gardez toujours à l’esprit que ce qui est le plus important, c’est de garantir une expérience positive à vos utilisateur•ices. Vos formulaires bien conçus seront remplis et validés, en évitant les abandons en cours de route. De plus, toute expérience d’utilisation agréable renforcera la confiance de vos utilisateur•ices en votre marque.

Au long de l’article certains noms sont ajoutés en anglais en italique pour les personnes habituées aux termes anglais.

Les principes d’UX et d’ergonomie en 4 étapes

1) Clarté de l’information, compréhension, et neutralité

Expliquez à vos utilisateur•ices quel est l’objectif de ce formulaire. Cela doit être explicite au premier coup d’oeil : vous recueillez des informations dans le cadre d’un projet ? C’est un sondage ? A quoi sert ce sondage ? Est-ce pour créer un profil sur une application ?

Précisez à quoi va servir l’information recueillie 🧐, et plus particulièrement lorsqu’elle peut sembler à première vue inutile ou sans lien avec l’objet du formulaire. Ex : pourquoi demandez-vous la date de naissance de la personne ? Pour cela utilisez un texte d’aide à placer juste sous le libellé ou sous le champ (exemple visible plus bas dans l’article).

Si une information n’est pas absolument indispensable, ne la demandez pas. Plus votre formulaire est court, mieux c’est 😉 ! Vous pourrez toujours demander des informations complémentaires plus tard une fois le premier contact établi.

Terminologie : si votre formulaire est destiné au grand public, utilisez des mots simples ou donnez des précisions si vous employez des termes techniques. S’il est adressé à une cible plus précise (ex : pour un métier en particulier), vérifiez que les termes techniques correspondent bien aux usages habituels de cette cible.

Personnalisation : n’hésitez pas à personnaliser les titres de vos boutons, de vos titres, pour faire ressentir à vos utilisateur•ices qu’ils ne sont pas sur un énième formulaire lambda.

2) Mise en forme selon le type d’informations demandées

exemple imagé sur la visibilité des libellés de champs

Les libellés des champslabel

Ils doivent toujours rester visibles : si votre utilisateur•ice souhaite se relire, comment faire si le libellé n’est plus présent pour vérifier que la réponse donnée correspond bien à l’information demandée ?

exemple imagé d'un texte fantôme (

Les textes d’exemple ou « texte fantôme »placeholder

À utiliser pour proposer des exemples de réponses, ou pour préciser le format attendu. C’est intéressant pour les questions ouvertes, et à utiliser avec parcimonie pour ne pas influencer les réponses ou surcharger.

exemple imagé d'un champ avec masque

Dates et horaires

Utilisez les masques de champs plutôt que les calendriers ou horloges qui ne sont pas toujours optimisés sur mobile ni très accessibles.

Les indicateurs de validation

Mettez en évidence les erreurs de remplissage directement sur le champ ou élément concerné, en précisant la correction à apporter. Lorsque c’est possible techniquement, afficher les erreurs directement au fur et à mesure que l’utilisateur•ice remplit les champs.

(psst, on me glisse à l’oreille que les formulaires google utilisent cette fonctionnalité).

Les choix exclusifs – lorsque l’utilisateur•ice doit sélectionner uniquement un des choix proposés

S’il y a peu d’options proposés : utilisez des boutons de type radio, ainsi toutes les options sont visibles en même temps.

Si les options sont nombreuses : préférez l’utilisation d’une liste déroulante – select, qui affichera toutes les options disponibles au clic.

Si cette liste est vraiment très longue, ajoutez un champ de recherche pour accéder directement à l’option souhaitée, ou divisez en plusieurs catégories d’options (plusieurs listes déroulantes, de boutons radio ou mixez les deux).

Les choix multiples – l’utilisateur•ice peut faire un ou plusieurs choix

Utilisez des cases à cocher – checkbox – et précisez s’il y a un nombre maximal ou minimal d’options à choisir.

Ajoutez également un champ « autre » lorsque c’est possible (parfois de très bonnes idées ou informations peuvent être recueillies via ce champ).

Les champs d’ajout de pièce jointe

Précisez :

  • les formats de fichiers autorisés
  • le poids maximum
  • s’il est possible d’ajouter d’autres pièces jointes
  • s’il est possible de sélectionner plusieurs fichiers à la fois

Et ajoutez un moyen de supprimer le fichier ajouté.

Le type de champ

Vérifiez que chaque champ déclenche bien l’ouverture du bon clavier sur mobile : le clavier numérique quand on demande un numéro de téléphone par exemple.

Champs obligatoires ou optionnels

Vos champs obligatoires doivent être clairement visible au niveau des libellés : soit en ajoutant un astérisque “*” si vous souhaitez garder quelque chose de discret, soit avec un texte entre parenthèses – (optionnel) / (obligatoire).

3) Navigation & validation

Soyez attentif à ce que votre formulaire soit accessible et utilisable par tout le monde.

Vos utilisateur-ices doivent pouvoir passer d’un champ à un autre en utilisant la touche tabulation (important pour les personnes mal-voyantes mais très utile pour tout le monde).

Lorsqu’une vérification d’identité spécifique est demandée (type captcha par exemple), proposez une alternative sonore et des visuels adaptés (suffisamment contrastés et assez grands).

Adaptez votre conception et votre design aux outils de navigation disponibles : si vous proposez un formulaire pour une console de jeux, vous n’aurez accès qu’aux flèches et à un bouton de validation et de retour, donc dans cet exemple, proposez plutôt des cases à sélectionner que du texte à saisir 🎮.

💡 Pour plus d’informations et de conseils sur les sujets d’accessibilité et de l’inclusivité, je vous recommande chaleureusement les contenus de Jojo de Bleu Renard Studio : @bleurenard_studio

Pour vos formulaires mais aussi pour tous vos projets en général, ce sont les besoins de vos utilisateurs et utilisatrices qui comptent avant tout. Nous sommes sans cesse sollicités au quotidien, il est donc important de créer un formulaire qui donne envie d’être rempli, sans heurts, et en prenant le moins de temps possible.

Floating labels or not floating labels ? (pour ceux qui ne connaissent pas testez dans l’exemple ci-dessous !)

Ça peut sembler super stylé, et plus “fun”, mais à utiliser avec parcimonie, plutôt sur les formulaires ayant moins de 10 champs. Parfois rien ne vaut de bon libellés et champs fixes, dont vous pouvez customiser l’apparence.

Pourquoi ? Le mouvement d’animation peut être perturbateur, et le champ peut donner l’impression d’être déjà rempli. De plus cette technique présente demande une attention particulière au niveau technique pour assurer que votre formulaire soit toujours bien utilisable sur tous les navigateurs et tous les types de devices sans bugs. Toutefois si votre cible apprécie, ne vous en privez pas non plus 😉.

See the Pen Floating label boostrap simple by TessQuietP (@TessQuietP) on CodePen.

4) Cas spécifiques : formulaires longs

Possibilité 1 :

Scindez vos formulaires en plusieurs sections ou plusieurs pages, en incluant :

  • un élément visuel représentant les étapes et l’état d’avancement du remplissage, avec si possible de petits messages d’encouragement à mi-parcours et proche de la fin.
  • un titre à chaque étape pour indiquer de quoi il s’agit. Ex : les informations personnelles, les informations de livraisons, etc.
  • des boutons de validation intermédiaires, dont l’intitulé doit être bien clair.

Possibilité 2 :

Masquez certains champs qui seront affichés au fur et à mesure selon ce que la personne choisie comme option, c’est la logique conditionnelle.

RGPD

Ce n’est pas l’objet de cet article mais plutôt un petit aide-mémoire : n’oubliez pas les mentions RGPD en bas de vos formulaires et les informations correspondantes dans vos pages de mentions légales 📝.

Gagnez du temps pour concevoir vos formulaires avec des recommandations adaptées à vos besoins

Les principes de design

1) Niveaux d’information

Libellé ou contenu : mettre en avant le plus important des deux

Si votre formulaire est destiné à être utilisé très régulièrement par les mêmes personnes, alors c’est le contenu qui doit primer, car elles auront petit à petit mémorisé les libellés (par exemple pour une personne utilisant quotidiennement un même formulaire de saisie de données).

Inversement, si votre formulaire sert à accueillir de nouveaux utilisateur•ices, vos libellés doivent être bien visibles (par exemple un questionnaire de satisfaction client).

État des champs et des boutons

Les différents états des éléments de vos formulaires doivent être visuellement reconnaissable, dont :

  • État par défaut
  • Au survol – hover
  • Au clic
  • Au focus
  • Rempli / coché – with value / checked
  • Inactif – disabled
  • Invalide – invalid/error

La personne renseignant le formulaire doit voir quand elle peut cliquer, taper du texte, etc.

Vous pouvez aussi modifier l’état du bouton d’envoi du formulaire : si toutes les réponses n’ont pas encore étés données, le bouton peut rester grisé ou avec une opacité réduite (inactif – disabled), et revenir à son état « par défaut » lorsque le formulaire a été complété.

2) Structure

Dimensions

Les champs

Adaptez la largeur de vos champs au type de contenu attendu : champ date court, champs texte avec de l’espace pour plusieurs lignes si on demande un commentaire (textarea). Pour la hauteur, on est en moyenne autour de 40px à 50px.

Taille des boutons radios et cases à cocher

Ils doivent être suffisamment grands pour être facilement utilisables sur tous les supports tactiles (mobiles, tablettes …). Je design généralement des cases de 20px par 20px minimum.

Taille des textes

On recommande généralement de ne pas descendre en dessous de 12px (ou équivalent em ou rem), à adapter selon la police de texte et la graisse choisie, mais aussi selon votre cible (ex : adolescents vs personnes âgées). Dans le doute, faites tester à plusieurs profils de personnes.

Enfin, espacez vos éléments ! Pour faciliter la lecture d’une part, et pour l’utilisation en tactile également.

Alignements

Justifiez à gauche et à droite pour éviter un effet “escalier”, et essayez d’avoir des types de taille standard pour vos éléments : 100% de la largeur, 70%, 50%, 30%, ce qui vous permet de composer votre formulaire facilement en gardant une esthétique harmonieuse.

Centrez le formulaire dans la page, il n’est pas utile ni agréable d’avoir des champs qui prennent toute la largeur de la page. De cette façon vous concentrez le regard de vos utilisateur-ices.

Pour les choix : si peu d’options sont proposées et/ou si les intitulés sont courts, on peut les aligner sur une seule ligne, sinon il vaudra mieux un affichage en colonne.

3) Couleurs & contrastes

Optez pour des couleurs tranchées, des contours de champs entiers et évitez de trop modifier l’aspect initial des cases à cocher, boutons radio etc….

Il est parfois tentant de ne garder qu’une bordure du bas pour vos champs textes, d’utiliser des gris très clairs, ou des couleurs pastel, mais pour que votre formulaire soit le plus accessible possible et facilement compréhensible par tous ce n’est pas recommandé.

Si vous faites ce type de choix de design, assurez-vous que ce soit adapté à votre cible. Vous pouvez aussi mixer : si vous simplifiez le design des éléments, gardez un contraste fort, ou si vous utilisez des couleurs claires, gardez des tailles importantes et des contours.

Petit tips performance & éco-design : davantage de modification de l’apparence de base d’un élément sous-entend souvent davantage de code : plus vous restez proche de l’état initial de vos éléments de formulaires, plus votre code sera « propre » et léger 🍃.

Gardez les formes, couleurs et polices de textes les plus originales pour les zones purement visuelles et décoratives.

Pour tester le contraste de vos éléments, il existe plusieurs outils en ligne gratuits, tels que Contrast Finder ou Color contrast (et hop un joli post sur le sujet contrastes et accessibilité de Bleu Renard Studio).

Les couleurs spécifiques et éléments graphiques :

Vous pouvez utiliser des couleurs dans la gamme des verts pour la validation, et rouges ou orangés (moins agressif 😉) pour les erreurs. Toutefois comme évoqué plus haut, cela doit venir en complément de l’information textuelle. Vous pouvez ajouter des pictogrammes, comme une croix, un check ou une flèche, qui seront utiles pour les daltonien-es par exemple.

4) Soyez créatifs !

J’ai détaillé dans cet article les grands principes pour les formulaires dits « classiques », mais n’hésitez pas à sortir du cadre ! Ajoutez de l’interactivité, concevez votre formulaire comme un jeu, notamment sur la mise en forme, du moment que l’information demandée reste claire.

Testez, améliorez, demandez des retours et des suggestions !

See the Pen Untitled by TessQuietP (@TessQuietP) on CodePen.

See the Pen emojis choice – wip by TessQuietP (@TessQuietP) on CodePen.

Échangeons sur le sujet 🤗

Pour construire des formulaires à votre image dans vos projets, ou si vous avez des questions :

Comments are closed

© 2021 Yellowazo