Création
d'entreprise

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 oeuvre 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


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.
Publié par Jeff - Dernière mise à jour le 14 février 2011 à 05:44 par boule97
Ce document intitulé « Ergonomie des formulaires en ligne » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Suggestions
  •  Ergonomie des formulaires en ligne
  •  Formulaire en ligne interactif en PDF (Résolu) » Meilleure réponse: bonjour, Il est possible de creer un formulaire en pdf . avec des champs que l'on peut remplir. Generalement l'option proposé dans ce cas est ensuite d'enregistrer ou d'imprimer le formulaire . Par ailleurs , les fichiers pdf peuvent em
  •  Formulaires en ligne - La gestion des erreurs » Fiches pratiques : Bien qu'une attention particulière soit apportée à la conception des formulaires, tout risque d'erreur ne peut être écarté. Pour cette raison, des mécanismes de gestion des erreurs devront être mis en place. Dans le cas de saisies partielles ou...
  •  Formulaires en ligne - Les champs de saisie » Fiches pratiques : Quelles données saisir ? Comment dois-je saisir l'information L'organisation des champs de saisie Séparer les champs de saisie L'organisation des champs et des titres La longueur des champs Quelles données saisir ? Sur la plupart des...
  •  Script html de formulaire de contact . . . (Résolu) » Meilleure réponse: J'ai trouvé ce code qui marche sur http://www.msp-business.com/tutoriel.html : Ce code est à insérer dans votre fichier index.html (entre <BODY> et </BODY>) : <FORM method=POST action=monformulaire.php target="_blank"> <input type=hidde
  •  Cv avec photo (Résolu) » Meilleure réponse: Diaboloviolette bonjour, Sous word 2007, tu sélectionnes ta photo, bouton droit souris : Habillage du texte, et tu choisis devant ou derrière le texte. Tu pourras déplacer ta photo où tu veux, notamment en face de tes coordonnées sur to
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?
Formulaires en ligne - Les champs de saisie