Sur les sites Web, les formulaires sont essentiellement utilisés pour la gestion et l'interrogation de bases de données. Les formulaires permettent ainsi :

• De rechercher des informations dans des bases de données bibliographiques ou commerciales,
• De s'abonner à des listes de diffusion/discussion,
• De s'identifier dans le cas d'accès réservés à divers services,
• De remplir des bons de commandes,
• De recueillir des informations sur les internautes venus visiter un site,
• Etc.

Un certain nombre de recommandations ergonomiques existe pour la conception des formulaires. Bien que les études à l'origine de ces recommandations datent des années 80, bon nombre de ces recommandations sont toujours valides et d'actualité. L'objectif de cet article est de présenter ces recommandations en les illustrant. Il ne s'agit évidemment pas d'une présentation exhaustive de toutes les recommandations ergonomiques qui pourraient s'appliquer à la conception des formulaires. Il s'agit plutôt de présenter les recommandations qui pourront permettre d'éviter les erreurs encore trop courantes sur Internet.

• Les avantages


• Inconvénients


• La gestion des erreurs


• Il ne faut pas...


• Il faut par ailleurs...


• Les formulaires doivent être lisibles


• Processus de traitement d'un formulaire


• Pour conclure

Les avantages           Haut de page

Les formulaires présentent des avantages certains par rapport aux autres styles d'interaction. De manière générale, les formulaires sont auto-explicatifs dans la mesure où ce que l'on doit faire (la sémantique) et comment le faire (la syntaxe) sont explicites. De ce fait, 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. L'utilisateur qui désire interroger une base de données n'a à connaître ni sa structure ni la syntaxe du langage de commande pour pouvoir effectuer une requête. Les champs de la base qui peuvent être interrogés, tout comme la syntaxe du langage d'interrogation sont explicités. De ce fait, ce style d'interaction est particulièrement adapté à des utilisateurs grand public.

Un autre avantage des formulaires est qu'ils fournissent un contexte qui permet d'expliciter 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.

Dans l'exemple suivant (Figure 1) (critiquable à certains égards : espacements entre titres et champs, recherche exclusive dans les titres français ou anglais : ne puis-je obtenir tous les livres publiés par un auteur, que ceux-ci aient été traduits ou non ?, etc.) les champs pouvant être interrogés sont clairement identifiés (Auteur, Titre, Sujet, ISBN et éditeur). L'utilisateur n'a pas à les connaître pour pouvoir composer une requête.

Ce formulaire permet donc d'interroger la base de données correspondante tout comme on aurait pu le faire en langage de commande SQL de la manière suivante : (à noter que cette requête nécessite une connaissance de la sémantique de la base de données et de la syntaxe d'interrogation)

• SELECT Auteur, Titre, Editeur FROM Table_Livres WHERE Auteur LIKE 'Cohen' and Titre_langue="Français";

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.

Inconvénients           Haut de page

Sur la plupart des formulaires, toutes les informations ne sont pas " obligatoires ". Dans bien des cas cependant, il n'est pas facile d'identifier rapidement les champs qui doivent obligatoirement être renseignés.

     Il est primordial de distinguer clairement les champs de saisie obligatoires des champs de saisie optionnels (ou inversement). De manière générale, on indiquera les champs optionnels.

Les moyens permettant de distinguer ces champs de saisie sont variés. Le plus souvent un astérisque présent devant certains champs indique à l'utilisateur leur caractère obligatoire ou facultatif. Dans tous les cas, des consignes claires devront être présentées au début du formulaire et non à la fin.

Comment dois-je saisir l'information...

Il s'agit ici d'indiquer le format de saisie des données. Par exemple, l'inscription d'une date de naissance peut prendre plusieurs formes, selon le pays (ou la culture) dans lequel on se trouve : Par exemple, en France :

• JJ/MM/AA
• JJ/MM/AAAA
• JJMMAA
• etc.

Ces présentations guident les experts, mais sont peu pertinentes pour des utilisateurs novices. Il est donc parfois nécessaire de fournir un exemple concret : 15/01/2001. Sachant que des personnes d'origines diverses peuvent remplir le formulaire, la saisie devra donc être " guidée ", c'est-à-dire que l'on indiquera à l'utilisateur la manière de saisir l'information par des consignes appropriées.

Les champs devront être organisés, c'est-à-dire présentés dans un ordre qui soit pertinent pour les tâches utilisateurs. Ainsi par exemple, les champs relatifs à l'adresse postale devront être présentés dans un ordre auquel l'utilisateur s'attend. Dans ce cas cependant, une attention toute particulière devra être accordée non seulement à l'organisation des champs mais aussi à leur pertinence (compatibilité aux particularités des divers pays). S'agissant d'un site de commerce, la manière d'indiquer l'adresse de livraison des produits achetés sera fonction du pays de destination de ces objets. Dans certains pays les codes postaux comportent des chiffres et des lettres. Si le formulaire a été conçu pour des " acheteurs " français et que le champ " Code postal " fait l'objet d'une vérification automatique, des problèmes surgiront. De la même manière, l'organisation et la présentation des éléments de l'adresse varieront d'un pays à un autre.

En d'autres termes, les champs de saisie doivent être organisés : soit en fonction de la source des informations à saisir, soit en fonction de la sémantique des informations (adresse, code postal, ville, etc.), soit encore selon la séquence " logique " de remplissage du formulaire lorsqu'un tel ordre peut être établi, soit encore par importance des champs (champs obligatoires/facultatifs) ou encore par la fréquence de remplissage des champs.

Séparer les champs de saisie...

Pour faciliter l'exploration visuelle des formulaires, les champs de saisie doivent être groupés et les groupes séparés les uns des autres par des espaces, des cadres, des couleurs ou tout autre indice visuel.

La compatibilité du formulaire...

Le formulaire devra être compatible avec les caractéristiques des tâches utilisateurs (voir exemple des adresses postales plus haut). Lorsque les formulaires électroniques servent à renseigner une base de données à partir d'un formulaire papier, l'organisation du formulaire électronique (ordre des champs de saisie, intitulés des champs, etc.) devra correspondre à l'organisation du formulaire papier. Ce faisant, les risques d'erreurs seront réduits (p. ex., saisie d'informations dans des champs inappropriés), la recherche et la vérification des donnés seront aussi facilitées.

L'organisation des champs et des titres...

Quand doit-on aligner les titres des champs à gauche et quand doit-on les aligner à droite près des champs ?

Le positionnement des titres de champs par rapport à ces derniers dépend de règles simples (voir Mayhew, 1992). Lorsque les titres ne diffèrent pas en longueur de plus de 6 caractères, ceux-ci doivent être justifiés à gauche. Dans le cas contraire, et s'il n'est pas possible de les abréger, ils devront être alignés à droite (sauf s'il s'agit d'un formulaire de saisie d'informations à partir d'un formulaire papier).

De la même manière que les titres, les champs de saisie devraient être alignés à gauche, du moins en ce qui concerne les données alphabétiques. On verra par ailleurs que les délimiteurs (ex., " : ") des titres les plus longs ne soient pas séparés des champs de saisie par plus de 2 espaces blancs. à ce propos, l'exemple de la Figure 1 présente quelques défauts.

La longueur des champs...

Lorsque c'est approprié, la longueur des saisies attendues doit être explicitée (cf. Figure 2, " 4 caractères maximum). De plus, la longueur des champs devrait être adaptée au nombre de caractères attendu.

La gestion des erreurs           Haut de page

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. Sur ce point les choses ont évolué. Il y a peu de temps, un formulaire mal rempli ou rempli partiellement vous était retourné complètement vierge et accompagné d'un message d'erreur plutôt sommaire. L'utilisateur se voyait contraint de tout re-saisir sans avoir d'indication sur la nature de ses erreurs. Puis, la technologie aidant, les formulaires ont pu être validés chez le client (c'est-à-dire sa votre propre machine) avant d'être envoyés au serveur. Dans le cas de saisies partielles ou erronées, l'utilisateur n'est plus contraint de tout re-saisir. Toutefois les messages d'erreurs ne sont pas toujours aussi explicites qu'ils pourraient l'être.

Voici quelques recommandations qui permettraient d'augmenter la qualité ergonomique de vos formulaires :

Le message d'erreur relatif à une saisie non valide ne doit pas s'accompagner de l'effacement du contenu du champ concerné. Le curseur doit plutôt être positionné dans le champ de saisie, en attente d'une modification. Lorsque la portion des données erronée peut être identifiée, cette portion devrait être mise en évidence et directement modifiable par l'utilisateur. L'application de cette recommandation permettra une correction aisée et rapide des erreurs commises.

Notons aussi :

qu'il ne suffit pas d'indiquer les champs obligatoires

Lors de la validation du formulaire, les champs obligatoires doivent être contrôlés, c'est à dire de vérifier qu'ils ont été remplis.

 

qu'il ne suffit pas de vérifier que les champs obligatoires ont été remplis

Lors du contrôle, il faut vérifier la validité de la réponse lorsque cela est possible. Par exemple, le code postal doit comprendre 5 chiffres, l'adresse électronique prendre une forme équivalente à :

___@__.__

Il ne faut pas...           Haut de page

Il ne faut pas prendre en compte la casse des lettres lors des saisies (sauf cas particuliers)

Pour éviter des corrections inutiles, la validation des informations doit pouvoir se faire sans que la casse des lettres soit prise en compte. Par exemple, les formulations suivantes devraient être équivalentes :

• "OUI",
• "oui",
• "Oui".

Il ne faut pas présenter de combinaisons de chiffres et de lettres dans un même champ

Les transcriptions de lettres et de chiffres à partir de documents manuscrits sont source d'erreurs. Les exemples suivants présentent des confusions possibles :

• 2 et Z,
• I et 1,
• O et 0,
• B et 8.

Il ne faut pas multiplier inutilement les actions utilisateurs
par conséquent :

• il faut éviter les passages fréquents des minuscules aux majuscules,
• il n'est pas nécessaire de saisir des "0" précédents les nombres.

Il ne faut pas passer de façon automatique d'un champ de saisie à un autre avec des utilisateurs novices

Cette fonction ne doit être utilisée que pour les données de longueur fixe et avec des utilisateurs expérimentés

Il faut par ailleurs...           Haut de page

• Positionner le curseur dans le premier champ de saisie lors de l'affichage du formulaire.
• Faire correspondre le déplacement du curseur d'un champ à l'autre à l'ordre des champs. Un arrangement vertical est préférable à un arrangement horizontal.
• Pour valider un nombre de champs limité, par exemple un login et un password, la validation doit pouvoir se faire directement avec la touche entrée sans cliquer obligatoirement sur le bouton validation ce qui évite d'utiliser la souris.
• Les déplacements avant et arrière du curseur d'un champ à l'autre et à l'intérieur d'un même champ doivent être permis. Les zones de l'écran qui ne sont pas destinées à la saisie doivent être protégées.
• Lorsque les entrées de données sont pré-définies, le champ doit être présenté sous la forme de menus "pop-up" ou déroulant.

Les formulaires doivent être lisibles           Haut de page

Les longues listes d'options de menus devraient être entrecoupées de lignes blanches séparant des regroupements d'environ 5 éléments.

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 :`

• tous les pseudonymes que nous avons choisis étaient déjà pris. Lorsque le trafic est important sur un site et que l'inscription est obligatoire, il est recommandé de proposer une liste de pseudonyme lorsque le premier saisi est déjà enregistré,
• le mot de passe lors de l'enregistrement était codé alors que dans la validation il apparaissait en clair,
• lors de l'enregistrement il était demandé de confirmer par une deuxième saisie l'adresse électronique alors que celle-ci était présentée en clair.

Processus de traitement d'un formulaire           Haut de page

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 s'il n'est pas exhaustif, permet d'éviter des échanges avec le serveur Web. Si des erreurs sont détectées, on réaffiche le formulaire en mentionnant les champs erronés. On se repositionne par défaut sur le champs 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. Il existe encore trop de sites qui vous confirme votre inscription alors que vos données n'ont pas été correctement enregistrées. 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. Ce cas de figure ne devrait jamais ce produire, les concepteurs devrait prévoir des mécanismes de sauvegarde du type envoi d'un e-mail au webmaster avec les informations à saisir dans la base, écrire dans un fichier les données qui n'ont pu être enregistrées dans la base etc. Cela dit la mise en place d'un tel système est coûteuse et le plus souvent c'est à l'internaute que revient la prise en charge de sa ré-inscription en cas de problèmes techniques.

5 / Un message de confirmation (e-mail) est envoyé avec le récapitulatif des informations saisies. Il est nécessaire de confirmer par e-mail. On ne peut pas être sûr que l'internaute n'a pas fermé son navigateur ou eu un problème quelconque de connexion ne lui permettant pas de voir 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.

Pour conclure           Haut de page

L'application de ces quelques recommandations devrait permettre d'augmenter la qualité ergonomique (voir à ce propos : Bastien, Leulier, & Scapin, 1998; Bastien & Scapin, 1993; Scapin & Bastien, 1997) de vos formulaires en offrant un meilleur guidage aux utilisateurs, en minimisant leurs actions, en assurant une meilleure compatibilité entre le formulaire et leurs habitudes et leurs tâches, en assurant 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.