Ergonomie des formulaires en ligne

Les formulaires constituent un style d'interaction particulier qui comme les formulaires papier permettent de guider la saisie d'informations dans des champs spécifiques identifiés par des intitulés...

Les formulaires permettent notamment de rechercher des informations dans des bases de données bibliographiques ou commerciales, s'abonner à des listes de diffusion/discussion, s'identifier dans le cas d'accès réservés à divers services, remplir des bons de commandes … Bien que les formulaires soient un sujet visité depuis les années 80, sans avoir vocation à être exhaustif, il s'agit de présenter les recommandations qui pourront permettre d'éviter les principales erreurs.

Les avantages

De manière générale, les formulaires sont auto-explicatifs : ce qui doit être fait (la sémantique) et comment le faire (la syntaxe) sont explicites. Ainsi, il n'y a pratiquement aucun apprentissage préalable à l'interaction. L'interaction s'appuie sur la reconnaissance plutôt que sur le rappel de la sémantique et de la syntaxe ce qui la rend particulièrement adaptée à des utilisateurs grand public.

Par ailleurs, les formulaires fournissent un contexte qui explicite la signification d'un intitulé. Comment savoir par exemple si un intitulé tel que " Adresse : " nécessite la saisie du numéro civique, du nom de la rue ou de l'adresse entière (avec la ville et le code postale) si ce n'est par la présence des autres intitulés tels que " numéro ", " code postal ", " ville ". Les formulaires, comparativement au mode question/réponse permettent donc cette contextualisation.

Un formulaire de bonne qualité permet à l'utilisateur de savoir précisément quelle information il doit saisir et le cas échéant, comment saisir cette dernière dans les champs appropriés.

Les formulaires doivent être lisibles

La séparation des groupes par des espaces, des lignes, des couleurs ou autres indices visuels facilite la localisation :
L'accroche visuelle est facilitée si des sauts de ligne sont intégrés environ tous les 5 items.
Le nombre d'écrans pour les utilisations fréquentes et les systèmes lents doit être minimisé.
Les items liés ou dépendants doivent être présentés sur le même écran.
Après la validation du formulaire, il faut confirmer les informations importantes qui ont été saisies par un message explicite et non pas afficher une nouvelle page sans informer l'utilisateur que les informations qui ont été saisies ont bien été prises en compte.

Processus de traitement d'un formulaire

Cet exemple s'adresse plus particulièrement aux concepteurs. Il illustre le processus de traitement d'un formulaire d'inscription tenant sur une unique page Web (Lorsque les informations demandées sont sur plusieurs pages, il faut mettre en œuvre d'autres mécanismes, notamment pour récapituler les informations saisies avant leur soumission).

• 1 / L'internaute remplit le formulaire et le soumet.
• 2 / Les champs obligatoires et le format des données sont contrôlés au niveau du navigateur. Ce premier contrôle, même non exhaustif, permet d'éviter des échanges avec le serveur Web. Si des erreurs sont détectées, le formulaire est présenté en mentionnant les champs erronés et repositionnant le curseur par défaut sur le champ contenant une erreur.
• 3 / Les données sont envoyées au serveur et sont re-contrôlées. Cette re-vérification est très importante, car elle permet de garantir l'intégrité des données de la base et de filtrer des tentatives de piratage ou de destruction des données.
• 4 / Le système doit ensuite contrôler que les données ont effectivement bien été écrites. Si le système ne parvient pas à enregistrer les données après un certain nombre de tentatives, une page d'erreur est envoyée à l'internaute, même si ce cas de figure ne devrait jamais se produire.
• 5 / Un message de confirmation (e-mail) est envoyé avec le récapitulatif des informations saisies pour éviter le risque que l'internaute n'ait pas visualisé sa confirmation. Le mail est un système asynchrone permettant d'informer l'internaute. De plus, celui-ci appréciera de pouvoir conserver dans sa messagerie la trace de son inscription.
• 6 / Une page Web de confirmation avec le récapitulatif des informations saisies est renvoyée au navigateur Web de l'internaute.

A lire aussi

• Les champs de saisie
• La gestion des erreurs

Pour conclure

L'application de ces quelques recommandations doit permettre d'augmenter la qualité ergonomique de vos formulaires par un meilleur guidage des utilisateurs, la minimisation de leurs actions, une meilleure compatibilité entre le formulaire et leurs habitudes et leurs tâches et une meilleure gestion des erreurs, etc. Tout cela devrait se traduire par une utilisation plus simple, plus satisfaisante et avec des risques d'erreurs réduits.