Conseils d’ergonomie pour la conception d’un formulaire web

Créer un compte client, passer une commande, faire une demande d’informations… : les formulaires sont omniprésents sur le web.

Pour ménager une bonne expérience utilisateur, il convient de concevoir une interface rapide à remplir, avec des risques d’erreur réduits au minimum. Nos conseils.

La priorité : la lisibilité du formulaire

Simplicité et sobriété doivent être les deux maîtres-mots lors de la conception d’un formulaire web.

L’internaute ne doit se poser aucune question. Autrement dit, les informations demandées sont limpides et justifiées, la lecture n’est pas brouillée par des styles chargés.

L’organisation et la mise en page

• Un formulaire sur une ou plusieurs pages (« wizard ») : le choix est déterminé par la complexité du formulaire. S’il est réparti sur plusieurs pages, on indiquera sa longueur (« Etape 1/3 » par exemple), pour permettre à l’internaute d’évaluer le temps nécessaire à sa saisie ;
• L’ordre d’affichage : les informations demandées sont classées par ordre logique ou d’importance. Si des groupes de champs se distinguent, ils sont réunis sous un intitulé explicite, et signalés graphiquement (ligne séparatrice, espacement…) ;
• L’alignement des champs : la bonne compréhension du formulaire passe par l’alignement des champs, les uns au dessous des autres ou selon une lecture en « Z » ;
• L’emplacement des intitulés : pour les sites grand public, l’intitulé est placé de préférence hors du champ, soit au dessus (aligné sur le champ qu’il qualifie) soit à  gauche du champ (dans ce cas, il est aligné sur la marge gauche de la page ou sur la colonne de champs). L’insertion des intitulés à l’intérieur des champs est à réserver à des utilisateurs experts ;
• La taille des champs : adapter la taille des champs à la réponse attendue facilite le travail de compréhension et limite les risques de mauvaises saisies. Ainsi, un âge nécessitera 1 à 3 caractères ; un code postal, 5 caractères. Dans le cas des champs libres (nom, adresse mail…), la longueur du champ sera plus importante : l’internaute doit pouvoir visualiser l’intégralité du contenu saisi, sans avoir à le faire défiler ;
• La nature des champs : les réponses libres plus ou moins longues nécessitent un champ ligne ou texte. Les réponses pré-définies peuvent être listées et sélectionnées via un bouton radio (un choix unique parmi plusieurs options) ou des cases à cocher (plusieurs choix possibles). Si les réponses pré-définies sont trop nombreuses, le menu déroulant (un ou plusieurs choix) présente un gain de place.

Faciliter le remplissage et limiter les risques d’erreur

• La saisie : pour faciliter le repérage au sein du formulaire, le champ en cours de saisie peut être signalé par un fond de couleur ;
• Les champs obligatoires/optionnels : les champs obligatoires sont signalés par un astérisque (sans oublier sa légende !). Selon la logique de classement retenue, les champs optionnels peuvent sinon être regroupés en fin de formulaire ;
• La date : la solution la plus simple et la plus rapide est l’affichage d’un calendrier. Sinon, un champ unique (JJ/MM/AAAA) reste préférable à trois champs distincts (jour, mois, année) ;
• L’aide : certaines erreurs sont certaines de se produire (par exemple, un mot de passe avec obligatoirement un chiffre ou un nombre minimum de caractères). Dans ce cas, un message d’aide doit être inséré à côté du champ concerné. Trois méthodes pour le faire : de manière permanente dans la page ; de manière automatique, dès que l’internaute commence sa saisie ; au survol de la souris sur un picto « ? » (un lien clicable serait un frein, l’internaute pouvant craindre d’être orienté sur une nouvelle page et de perdre le contenu de son formulaire) ;
• Favoriser les réponses fermées : les boutons radio et les cases à cocher présentent moins de risque d’erreur que les champs libres ;
• Mettre en avant les réponses fréquentes : il peut être pertinent de pré-remplir les champs qui appellent fréquemment la même réponse. Ou encore, dans le cas d’un menu déroulant, de placer l’option principale en premier ;
• « Sauvegarder » : dans les formulaires très longs, l’option « Sauvegarder » est utile si l’internaute a besoin d’interrompre sa saisie et de revenir ultérieurement ;
• Désactiver le bouton « Valider » : le formulaire ne peut être validé que s’il a été correctement rempli ;
• Faciliter le passage d’un champ à l’autre : les utilisateurs experts apprécieront de passer d’un champ à l’autre grâce aux raccourcis claviers ou d’être automatiquement transféré au champ suivant une fois la saisie du précédent terminée.

La validation

• L’emplacement du bouton « Valider » : pour éviter que l’internaute ne cherche le bouton « Valider », ce dernier est positionné dans le prolongement logique du chemin suivi par l’internaute : en bas à gauche si les champs sont tous alignés à gauche, en bas à droite si le formulaire est réparti sur plusieurs pages. Attention à ce que le bouton « Valider » ne soit pas confondu avec les boutons « Annuler » ou « Retour ». Pour éviter les clics d’erreur, on veillera à les placer à une distance suffisante et/ou à les distinguer graphiquement (couleur, bouton/lien texte…) ;
• L’intitulé du bouton « Valider » : il explicite le résultat de l’action (« Envoyer le message », « Valider ma commande »…). Il pourra être enrichi d’un picto (une enveloppe pour signifier l’envoi d’un message par exemple) ;
• La pré-validation : dans le cas de formulaires importants, une étape récapitulative propose à l’internaute de vérifier une dernière fois ses informations et si besoin, de retourner en arrière pour faire des corrections (sans perdre pour autant ce qu’il avait rempli) ;
• La validation : une fois le formulaire validé, un message informe de la réussite ou non de son action. Selon les cas, on proposera la possibilité d’imprimer la page et/ou on enverra un mail récapitulatif par mail ;
• La double validation : le problème du double clic (et du double envoi) peut être évité en affichant une barre de progression. Il signale à l’internaute qu’une action est en cours.

Les erreurs

• Vérifier le formulaire : on choisira, de préférence, de vérifier le bon remplissage du formulaire au fur et à mesure de la saisie. Si les erreurs sont signalées seulement après validation du formulaire, elles seront signalées toutes en même temps (et non l’une après l’autre) ;
• Signaler les erreurs en temps réel : l’erreur peut être signalée à l’internaute par l’affichage d’une coche verte ou d’une croix rouge à côté du champ de saisie ;
• Signaler les erreurs après validation : les erreurs sont toutes signalées, en même temps. Une alerte avertit du problème en haut de page, pour justifier à l’internaute le rechargement de la page. Les champs à corriger sont repérables immédiatement grâce à un encadrement et/ou un fond de couleur (rouge ou orange par exemple). Une mention, placée à côté du champ mal renseigné, explique la nature de l’erreur. Les explications ne doivent pas être données dans une pop up mais être intégrée à la page, pour permettre à l’utilisateur d’y revenir dès que besoin. Attention également à ne pas effacer le contenu du formulaire au moment du rechargement de la page : l’internaute ne doit pas avoir à refaire le travail de saisie une deuxième fois ;
• Les messages d’erreurs : aucune erreur ne doit être signalée sans qu’une explication ne vienne donner la solution. Les messages, pour être utiles, sont clairs et en aucun cas techniques ou jargonneux.