Formulaire, les bonnes pratiques

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 ?

Sommaire

• Les bonnes pratiques générales
• Maintenir l'engagement
• Ergonomie et accessibilité
• Gestions des erreurs
• Traitement et retour utilisateur
• Évaluation des formulaires

Les bonnes pratiques générales

Faire court

Pour réduire la longueur des formulaires, nous pouvons identifier les champs qui ne manqueront pas s'ils 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

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 vertical large.

Placez les champs dans une seule colonne

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

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 attendus.

Choisir les bons types 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 la valeur 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) Il exisge la saisie entière du site, précédé du "http(s)://". Cette règle va générer des messages d'erreurs chez les usagers qui saision le nom de domaine et non l'adresse web. Utiliser un champ "text" peu s'avèrer plus adapté.
date	Affiche un calendrier. Idéale pour choisir une date proche (de quelques mois)
Pour une date d'anniversaire	Les inputs de type date ne sont pas adapté pour les dates d'anniversaires. Il est long d'aller chercher une date lointaine dans les calendrier proposé par les navigateurs. Pour cela il convient d'ajout un champs libre qui ajoutera automatiquement les "/" pour faciliter la saisie. Voir le code <label for="anniv">Date de naissance (jj/mm/aaaa) </label><input id="anniv" type="text" maxlength="10" inputmode="numeric" autocomplete="bday" onkeyup="addSlash(event, this)"> <script> function addSlash(event, input) { if (event.key !== 'Backspace') { let value = input.value; let out = value.replace(/\D/g, ''); let len = out.length; if (len > 1 && len < 4) { out = out.substring(0, 2) + '/' + out.substring(2); } else if (len >= 4) { out = out.substring(0, 2) + '/' + out.substring(2, 4) + '/' + out.substring(4, 8); out = out.substring(0, 10); } input.value = out; } }
search	Affiche un bouton "rechercher" pour lancer la recherche depuis le clavier virtuel

L'autocomplé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 est disponible sur le navigateur Chrome et sur les claviers virtuels iOS.

Les suggestions de saisies

Pour les champs textes et de ceux chercher, il est possible de joindre une liste de saisies sugerées. Cela aider les usagers à saisir plus rapidement et avec moins d'effort des informations.

<label for="produit">Rechercher un sac</label> <br><input list="list-produit" id="produit" name="produit" type="search"/><datalist id="list-produit"><option value="Sac en bandouillère "><option value="Banane"><option value="Saq à dos"><option value="Sac de sport"><option value="Sac de voyage"><option value="Sac à roulette"><option value="Sacoche"><option value="Cartable"><option value="Sacoche de vélo"><option value="Sac à main"></datalist>

Ne pas recourir aux doubles saisies

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 son mot de passe sont moins rébarbatives et plus pratiques 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

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

Les placeholder sont des indications qui apparaissent en gris clair dans le champ lorsque 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

L'apparence des composants, en particulier celle des champs de saisie. Elle 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 peuvent-être apparentés à 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 sélection multiple dans un formulaire, il y a plusieurs composants :

Apparence	Détail
	Case à cocher Sélecteur carré utilisé pour les multiples choix. Certaines règles sont à prendre en compte : - Pas d’option précoché, (sélection d'une taille 44 par défaut), - Pas de logique inversé : cocher pour ne pas s’abonner Exemple : Accepter les conditions d'utilisation, filtres et facettes de recherche, choix d'options
	Commutateur Pour activer ou désactivé une fonctionnalité. Exemple : Gestion de mes préférences de diffusions (Sms email, application...), mode nuit.

Les sélections uniques

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érieure à 6 éléments, privilégier les boutons radio. Exemple : pays de livraison, motif de contact.

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 Antarctique ou possède une Acura.

Champ document

Spécifier le format (pdf, jpg, png...) et le poids maximum avec une limite haute avec un moyen de compresser le fichier en guise de message d'erreur. Champs mots de passe

Champs mots de passe

Comment allier bonne expérience utilisateur et création de mot de passe sécurisé ? De nombreux sites demandent un mot de passe avec au moins 8 caractères, 1 lettre, 1 chiffre, 1 caractère spécial. Cette consigne contraignante n'est pas efficace. La plupart des usagers vont placer les caractères requis à la fin, les modèles de craquage de mots de passe sont entraînés pour tester ce type de compositions, ce qui ne les rend pas davantage sécurisées.

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