Aller au contenu

Formulaire, les bonnes pratiques

8 mai 2024 · 11 min

Personne n’aime remplir des formulaires.
Il est pourtant difficile de s'en séparer : 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 la longueur des formulaires, nous pouvons 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.

Groupement visuel

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 les séparant visuellement par un espacement verctical large.

Placez les champs dans une seule colonne

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

Pour éviter de manquer des champs 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 la taille

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 avec des balises 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 permet 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 virtuel

L'auto complétion

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

  • given-name pour le prénom
  • family-name pour le nom de famille
  • email pour l'adresse 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 claviers virtuels 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ée, il fut un temps, retaper son email ou son mot de passe pour être sûr qu'il soit correct. Si le besoin de s'assurer de la validité des saisies demeure, l'autocomplétion anticipe l'arrivée d'erreurs et la fonction dévoiler mon mot de passe sont moins rébarbatives et plus simples pour l'usager.

Donner un titre explicite aux champs

Nommer les champs de sorte que les utilisateurs comprennent ce qui leur est demandée. Cela signifie s'assurer que les termes utilisés sont connus et les plus communs 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 apparaissent en gris clair dans le champ lorsqu'aucune information n'est encore saisie. Dans certains cas, elle est utilisée pour spécifier le nom du champ ou le 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'assurer 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 celle des champs de saisie, doit permettre aux usagers de les identifier comme tels. Dans certains systèmes de design ou sites web, on recourt à une seule ligne pour les afficher. Cela porte à confusion avec les séparateurs visuels et peut être apparenté à un titre de sous-section.

Les longs formulaires

Les formulaires considérés comme long — au-delà de 12 champs — doivent être séparé en parties. Ces derniers devraient être sauvegardés pour ne pas perdre la progression. Ces derniers peuvent être complétés en plusieurs fois par les usagers, il faut anticiper cet usage.

Les champs spécifiques

Les sélections multiples

Pour afficher une selection multiples dans un formulaire, il y a plusieurs composants :

Apparence Détail
Case à cocher
Selecteur carré utilisé pour les choix multiples. Certaine règles sont à notées :
- Pas d’option précoché, (séléction d'une taille 44 par défault),
- Pas de logique inversé (cocher pour ne pas s’abonner
Exemple: Accepter les conditions d'utilisation, fitres et facettes de recherche, choix d'options
Commutateur
Pour activer ou désactivé une fonctionnalité.
Exemple: Gestion de mes préférence de diffusions (Sms email, application...), mode nuit.

Les sélections unique

Apparence Détail
Bouton radio
Sélecteur circulaire utilisé pour les choix unique.
Exemple: civilité, choix du moyen de paiement
Liste déroulante
Sélecteur à choix unique. Si la liste est inférieur à 6 éléments, privilégier les boutons radio.
Exemple; pays de livraison, motif de contact.

Les listes déroulantes longues

une liste déroulante sans priorisation vs une avec une section fréquent

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

Champ document

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 pas plus sécurisée.

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

Report d'informations

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 formes 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 applications 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 retrouvé 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 acceptable, il est possible d'ajouter des modales pour prologner les sessions ou de recommecencer une session la où la précedente 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.

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.

Informer les usagers du traitement

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.

Évaluer les formulaires

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.

Retour aux articles

Entre 25 et 2500 caractères