Aller au contenu

Formulaire, les bonnes pratiques

8 mai 2024 · 11 min

Personne n’aime remplir des formulaires.
Nous ne pouvons pourtant pas nous en passer : système de connexions, création de compte, renseignement pour une commande ou pour une démarche en ligne...
Mais alors comment faciliter et améliorer ces passages obligés de nombreux parcours web ?

Les bonnes pratiques générales

Faire court

2 forumualaire, un longs un court

Pour réduire le nombre de champs des formulaires, vous pouvez identifier les champs qui ne manqueront pas s'il sont absents. Ou définir des champs à compléter plus tard dans le parcours. L'adresse de livraison peut être demandée seulement lors du passage d'une commande et non à la création d'un compte.

Regrouper visuellement les éléments qui vont ensemble

2 forumualaire, un sans groupement visuel, l'autre

Pour aider le travail de compréhension par les utilisateurs, on peut regrouper visuellement les informations qui font partie de la même catégorie : partie identité, partie coordonnée, partie condition... Ce regroupement peut s'effectuer de 2 manières différentes :

  • En ajoutant un titre aux sous-parties avec la balise legende pour le titre et fieldset pour contenir les champs de la sous-partie.
  • Ou en séparant visuellement par un espacement large.

Placez les champs dans une seule colonne

2 forumualaire, un avec 2 colonnes, l'autre avec une

Pour éviter de sauter des lignes et mieux guider le regard, nous allons placer nos champs dans une seule colonne.
Il peut exister des exceptions comme pour l'indicatif téléphonique et le champ numéro de téléphone.

Ajuster leur taille par rapport au contenu attendu

2 forumualaire, un avec des champs de taille identique, l'autre non

Pour renforcer la compréhension des informations attendues de chaque champ, il est recommandé d'ajuster visuellement la longueur de ces derniers. Mon champ « adresse email » sera plus long que mon champs « code postal » où seul 5 caractères sont attendu.

Choisir les bons type de champ

Les formulaires sur le web sont écrits en Html. Les balises champs ont des propriétés appelées attributs, parmi elle l'attribut type permet de spécifier la typologie de l'information attendue : si c'est une adresse email, un nombre, un numéro de téléphone ou un texte.

Si l'attribut et bien renseigné, cela a pour conséquence d'afficher un clavier virtuel adéquat à la saisie :

Apparence d'un clavier virtuel en fonction de l'attribut type=""
type détail rendu sur iOS
text Affiche un clavier texte et les fonctionnalités de saisie vocale et la barre de suggestion
number Affiche la ligne des chiffres en haut du clavier
tel Affiche un clavier numérique avec le symbole +
email Affiche un clavier texte et les symboles @ et .
url Affiche le . le / et l'extension web du pays (.fr)
date Affiche un calendrier
search Affiche un bouton "rechercher" pour lancer la recherche depuis le clavier de saisie

Auto complétion

C'est l'attribut clé pour réduire le temps de remplissage des champs. Pour le mettre en place, il faut utiliser l'attribut autocomplete="" et prendre la valeur correspondant à la donnée souhaité :

  • given-name pour le prénom
  • family-name pour le nom de famille
  • email pour l'email
  • tel pour le numéro de téléphone

Voir la liste complète sur la Mdn

Il n'est pas interprété par tous les navigateurs. Cependant il fonctionne très bien sur le navigateur Chrome et sur les clavier iOS.

affichage de l'autocompletion de chrome et des clavier iOS

Ne pas recourir aux doubles saisies

Une double saisise de mot de passe vs une seule saisie

Cette approche fut très prisé il fut un temps, retaper son email ou son mot de passe pour être sur qu'il soit correct. Si le besoins de s'assurer de la validité des saisies demeure, l'autocomplétion anticipe l'arrivée d'erreurs et la fonction dévoiller mon mot de passe sont moins réberbatif et plus simple pour l'usager.

Donner un titre explicite aux champs

Nomer les champs de manière à ce que les utilisateurs comprennent ce qui leur est demandée. Cela signifie s'assurer que les termes utilisé sont connu et les plus commun pour désigner l'information attendue.

Champs requis et optionnel

Une double saisise de mot de passe vs une seule saisie

Les champs de saisie sont requis ou optionnel. Le marquage de cette information doit s'effectuer en toute lettre pour informer l'utilisateur d'un champ optionnel. L'usage de l'astérisque pour les champs requis n'est pas dans le vocabulaire de l'ensemble des internautes, son usage n'est pas à privilégier.

Limiter les placeholders

2 champs avec uniquement un placeholder vs 2 champs avec des étiquette et une description

Les placeholder sont des indications qui apparietre en gris clair dans le champs lorsque d'aucune information n'est encore saisie. Dans certain cas elle est utilisé pour spécifié le nom du champs ou un format attendu par un exemple.
Le problème de cette approche, c'est qu'une fois complété, il nous est plus possible de s'assuerer du bon emplacement ou du bon format des informations pour la relecture.

Apparence

un champs qui resemble un intertitre vs un champ qui ressemble à un champ

L'apparence des composants, en particulier ce des champs de saisie doit permettre aux usagers des les identifier comme tel. Certain système de design ou site web on recours à une seule ligne pour les identifer. Cela porte à confusion avec les séparateur visuelle et peuvent être identifier comme un titre de sous-section.

Les longs formulaires

Les formulaire considérés comme long - au-delà de 12 champs - doivent être séparer en parties, ces dernière devrais être sauvegardé pour ne pas perdre la progression déjà validé.

Les champs spécifiques

Radio, groupe de button ou select

Case à cocher

Pas d’option précoché (taille 44)

Pas de logique inversé (cocher pour ne pas s’abonner

Les listes déroulantes longues

Comme pour les pays où les marques de voitures faire une section « populaire », peu de personnes de votre audience ne réside en Afganistan ou pocède une Acura.

Pouvoir compresser les fichiers envoyés (pas de limites trop basse de poids ou de format) Spécifier le format

Champs mots de passe

Comment alier bonne expérience utilisateur et création de mot de passe sécurisé ? De nombreux site demande un mots de passe avec au moins 8 caractères, 1 lettre, 1 chiffre, 1 caractère spécial. Cette solution plutôt contraigante n'est pas efficasse. la plupart des usager vont placer les caratères requis à la fin, les modèles de craquage de mots de passe sont entreiner pour tester se type de compositions ce qui les rends vulnérable.

L'option la plus recomandé est la suivante : 12 caractères minimum.
cette mesure permet de réduire la charge mental de l'utilisateur pour créer et se souvenir de son mot de passe. Cette approche résite aux attaques "brute-force". Pour la rendre à l'épreuve des attaques "dictionnaire", il est posible de tester les mots de passe pour vérifier s'il figure dans le dictionnaire ou s'il faut partie des 1000 mots de passe les plus utilisées.

Aide à la saisie

Dans le cas ou un report d’information est nécessaire, expliciter où et comment trouver la donnée demander.

Fournir un support

Il existe une mutitude de cas particulier et les utilisateur peuvent rencontré des difficultés à remplir et a soummettre un formulaire. Pour cela vous devez fournir un support, une Faq, un tutoriel, un contact email, téléphonique.

Pour les informations sensibles, expliquer pourquoi vous en avez besoin

Il arrive d'avoir besoins d'informations relativement sensible. Cela peut-être un numéro de téléphone ou une information relative à la santé, la sexualité ou la religion.
Si cel-ci est essentiel au bon fonctionement du dispositif, il faut expliciter l'usage qui en sera fait et pourquoi cela est nécessaires.

Maintenir l'engagement

Jauge de progression

Les jauges de progression sont une des application de l'effet Zeigarnik. Il s'appuie sur notre bias humain à vouloir terminer des actions en cours. Elles sont régulierement utilisé dans les tunnels d'achat ou les application comme Duolingo pour nous inciter à terminer notre série de cours.

Motiver en donnant les avantages à terminer le formulaire

Les utilisateur on tendance à vite se décourager. Pour maintenir leur attention à terminer la saisie communiquer quelques avaatages à terminer la complétion : V Optimiser la visiblité de votre vidéo...

Ergonomie et accessibilité

Utiliser des éléments natifs

Les personnes en situation de handicap moteur ou visuelle naviguent de manière linéaire ou clavier ou à la synthèse vocale. Penser un formulaire qui leurs est accesible c'est :

Taille des champs et boutons

Pour les écrans tactiles ou pour les personnes atteinte de trouble moteur les éléments interractif doivent avoir une zone clicable entre 8mm et 1cm au minimum.

0 limites de temps

Certains sites on des sessions limité en temps pour des raisons de limites techniques ou de disponibilité de produits comme la Sncf. Sur cette dernière l'on doit recommencer la sélection d'un billet de train si on prends plus de 30 min à choisir notre place.
Dans cas d'une limite techniques, la durée des sessions doit être prolongé pour prermettre aux utilisateurs d'avoir le temps et de ne pas se retouvé a ressaisir les information déja soumise du à la limite de sessions.
Pour le cas des limites produits, la limitation des sessions et inévitable, pour la rendre plus accpetable, il est possible d'ajouter des modales pour prologner les sessions ou de recommecencer une session la où la précesdnete s'est terminées.

Les Capchas

Les capchas sont des testes de vérification conçu pour différencier les robots des humain. Ils prendent la forme d'image où il faut séléctionner les zones contenant des passages piétons, des feux de circulation ou encore des vélos.
Cette technologie est aujourd'hui dépassé par les robots mais elle continue de ralentir et exaspèrer les usagers. Elle est même bloquante pour celle en situation de handicap visuelle.

Gestions des erreurs

Pas de champs désactivés, ça empêche les feed-back

Les bouton de submition on 2 role, vérifier la conformité du formulaire et l'envoyer à un serveur. Si ce dernier est désactivé j'usqua ce que mon formulaire soit conforme, cela empléche les utilisateurs d'obtenir un retour : ce champs requis n'est pas rensegné ou l'adresse email n'est pas conforme.

Des messages d’erreurs qui permettent de trouver les problèmes

Vérification orthographique

L'attribut spellcheck="true" permet de sousligner les mots mal orthographiés. il est pertinant de l'utiliser sur tout les champs de saisie qui ne sont pas composées de nom propore comme les noms, les prénoms ou les villes.

Évaluer les forumulaires

Les tests utilisateurs

Concevez un prototype en Html et soummettez a des usagers représentatifs de votre audience. Notez les dificultés et les indications qui aurait pu les réduires pour itérer le prototype interractif.

Taux d'abandon

Ce taux se calcule avec l'écart du nombre d'usager ayant remplis au moins 1 champs et ce qui l'on terminé. C'est un indicateur clé pour réaliser un baromètre mensuel ou entre 2 évolutions.

Chronomètrer le temps de remplissage médian

Les tecnologie on pour objectif initial de nous faire gagner du temps. C'est aussi l'objectif de notre formulaire. Comme pour le taux d'abandon, nous allons chronométer le temps médian entre la saisie du premier champs et la soumision.

Traitement et retour utilisateur

Page de relecture

Pour des soumission de dossier ou de procédures où la modification ne peuvent-être appliqué après l'envoie, ajouter une page de relecture pour confirmer les données saisies avant l'envoie

Envoyer une copie par email

Donner la possibilité à l'utilisateur de recevoir une copie de son envoie avant la soumission de son formulaire.

Sécuriser les saisies

Les données transmises par les formulaires sont convoitées par des acteurs économiques et des groupes de piratage. Pour garantir l'intégrité et limiter les risques d'expositions des informations des usagers, il est recommandé de mettre en place ces procédures :

Informer les usagers du traitemnet

En cas de réussite de l'envoye du formulaire, afficher un message bine visible et explicite de succès. Ce dernier peut être complété par le détail des étapes suivantes et les éventuels délais.

Retour aux articles

Entre 25 et 2500 caractères