Rédiger un formulaire

Voici principes pour réaliser des formulaires efficaces.

1. Rédiger

Soignez vos intitulés 

  • Optez pour un mot et pas une phrase sauf si la phrase est indispensable à la compréhension.
  • Utilisez des minuscules autant que possible
    prénom et nom mieux que Prénom et nom 

Affichez des instructions claires et concises au début du formulaire

  • Sa raison d’être
  • Le nombre de pages
  • la durée estimée pour le remplir
  • Evitez absolument les durée de session (time out) car l’utilisateur risque de perdre le contenu du formulaire.
  • Demandez uniquement les informations indispensables.
    Pour cette raison, limitez également le nombre de champs obligatoires.
  • Expliquez clairement à quoi vont servir les données introduites. (La loi sur le respect de la vie privée oblige l’auteur du formulaire à mentionner explicitement le stockage des données à caractère personnel et le but poursuivi).
  • Permettez à l’utilisateur de sauvegarder le formulaire, de l’envoyer par email ou de l’imprimer.

Indiquer les informations obligatoires

  • Si le champ est obligatoire, ajouter  le caractère *, en rouge de préférence, avant ou après l’intitulé.
  • La signification de l’astérisque doit être précisée : p.ex. * = obligatoire
    Donnez impérativement cette précision avant de remplir le formulaire.
  • Si tous les champs sont obligatoires, précisez-le clairement en début de formulaire et n’utilisez pas les astérisques

2. Regrouper et ordonner les éléments similaires

  • Alignez bien les éléments
    Il vaut mieux placer les intitulés au-dessus du champ de saisie qu’à côté

L’idéal est de placer l’intitulé dans le champ

  • Adaptez la taille du champ aux données attendues
  • Pas de multicolonnage
                          
  • Comment traiter les très longs formulaires ? Scindez-les  en plusieurs pages
    Indiquez le nombre d’étapes et l’étape en cours (page 2/4 ou 40 % ou symbole graphique) et permettez de passer d’une page à l’autre : étape suivante, étape précédente, retour 

3. Choisir et bien utiliser les champs à saisir

Outre, les champs textuels, voici les principaux types de champs :

Boutons radio  

  • A utiliser quand le nombre d’options est limité.
  • Affichez l’intitulé à droite du bouton radio.
  • Soyez explicite: Oui, j’ai lu les conditions d’utilisation plutôt que Oui.
  • Sélectionnez une option par défaut (bouton pré-rempli) si c’est justifié SAUF si le visiteur doit manifester un choix volontaire ou si le choix par défaut peut être mal interprété.

Menus déroulants  

  • Lorsqu’il faut sélectionner une option parmi beaucoup… ou quand on manque de place pour les boutons radio.
  • Groupez et utilisez les retraits pour montrer la hiérarchie (ex : provinces / communes)

Cases à cocher  

  • A privilégier quand on peut sélectionner une ou plusieurs options.
  • Afficher l’intitulé à droite de la case à cocher.
  • Préférer 2 boutons radio plutôt qu’une seule case à cocher quand il faut choisir entre 2 options seulement.
    Ex : o masculin o féminin
    plutôt que [] masculin [] féminin

4. Valider sans se tromper

  • Un formulaire doit toujours être validé pour éviter les données erronées.
  • L’intitulé du bouton de validation doit indiquer clairement ce qui se passe : envoyer le formulaire plutôt que OK ou envoyer
  • L’utilisateur pourra également utiliser le bouton d’annulation s’il ne veut pas valider le formulaire, revenir à l’étape précédente et le quitter.
  • Faites en sorte que les boutons apparaissent graphiquement et se comportent comme des boutons.
  • Evitez le bouton reset. Il est rarement utile et souvent dangereux : l’utilisateur peut le confondre avec le bouton de validation et effacer toutes les données saisies.

5. Affichez de l’aide

  • A n’utilisez que si c’est vraiment nécessaire. Soyez plutôt plus explicites dans l’intitulé de vos boutons. Il vaut mieux les allonger que d’utiliser une aide.
  • Si l’aide est quand même nécessaire, utilisez alors un lien Aide vers une nouvelle fenêtre ou, mieux,  un système d’aide dynamique, qui apparaît lorsque l’utilisateur clique sur le champ texte ou y passe sa souris.

6. Des messages d’erreur clairs et utiles 

  • Indiquez directement sur le formulaire où se trouvent les erreurs.
  • Utilisez du rouge.
  • Expliquez le problème et comment le résoudre sans employer de jargon technique.
  • Placez le message en haut de la page, et non dans un pop-up ou une boîte de dialogue.
  • Distinguez clairement le message du reste de la page.

7. Pensez aux malvoyants

Rendez votre formulaire t consultable par les malvoyants en leur permettant de parcourir la structure au moyen de la touche de tabulation.

Sources :