Accueil > Articles > Optimiser l'ergonomie des formulaires web

Optimiser l'ergonomie des formulaires web

Les formulaires sont très fréquents sur les sites web et parfois complètement incompréhensible. Il existe une multitudes d'astuces pour améliorer la compréhension de ceux-ci, éviter que les utilisateurs fassent des erreurs et optimiser le durée nécessaire pour les remplir. Cet article présente plus de 60 astuces et recommandations avec des explications.

Structurer le formulaire

  • Dans le cas d'un formulaire pour se connecter, il est possible de faire apparaître le formulaire au survol ou avec un clic de souris. Si le design possède assez de place il est aussi possible de placer les champ pseudo + mot de passe directement dans le design d'un site web. Ça fait gagner du temps aux utilisateurs.
  • Lorsque le formulaire est long il est possible de le décomposer en plusieurs partie et de faire plusieurs pages distinctes.
  • Faire un nombre de pages réduit au minimum sur les formulaires qui font plusieurs pages. Ceci afin d'éviter de perdre du temps lorsque le formulaire est souvent utilisé et dans le cas où l'utilisateur à une faible connexion internet.
  • Les éléments liés doivent être proches les uns des autres. Si le formulaire est sur plusieurs pages, les éléments qui dépendent les uns des autres doivent être sur la même page. Si le formulaire est sur une page, les éléments liés doivent être visible sur le même écran sans avoir à scroller la page.

Choix des éléments à insérer

  • Ne pas utiliser le bouton "reset" (bouton pour réinitialiser le formulaire). Ce n'est pas parce que ce bouton peut exister qu'il doit forcément exister. Souvent les designers place ce bouton à côté de celui de validation du formulaire. Il en reste que l'utilisateur doit déterminer avec certitude quel bouton utiliser, car l'un valide le formulaire tandis que l'autre bouton détruit tout et il faut tout recommencer.
  • Ne pas utiliser de bouton "annuler" pour la même raison. Si c'est vraiment nécessaire il faut plutôt utiliser un bouton "retour". Attention à ne pas confondre le bouton "retour" et "annuler" sur un formulaire de plusieurs pages. Si c'est vraiment nécessaire il faut songer à mettre un message de confirmation au cas où l'utilisateur clique dessus par erreur.
bouton valider dans un formulaire web
Ne ppas utiliser de bouton annuler dans un formulaire web
  • Si on utilise un bouton "retour", il faut le mettre sous la forme d'un lien d'action secondaire. Le bouton d'action primaire reste le bouton d'envoi du formulaire. Il faut veiller à ce que le bouton d'envoi soit un bouton, tandis que l'action secondaire est un lien.
  • Afficher un minimum de champ à compléter. Voici une liste d'exemple possible:
    • Pour inscrire une date de naissance il est préférable d'avoir un seul champ à remplir (exemple au format JJ/MM/AAAA) plutôt que 3 champs distincts (pour le jour, le mois et l'année). Pour une date il est même conseillé d'afficher un calendrier pour choisir la date.
    • Utiliser un seul champ pour remplir le nom et le prénom (mais ça dépends des cas bien sûr).
  • Ne pas doubler les champs. Par exemple des formulaires demandent de re-écrire l'email pour s'assurer qu'il n'y a pas eu d'erreur (idem pour le mot de passe). Il est préférable d'afficher une fois chaque champ.
  • Sur un site d'ecommerce, permettre de pré-remplir l'adresse de livraison à partir de l'adresse de facturation d'un simple clic.
  • Lorsqu'il faut demander l'age d'un visiteur (cf. pour du contenu pour adulte), le plus simple et rapide consiste à demander l'age du visiteur en utilisant un champ où l'utilisateur entre son age à la place de la date de naissance. Tous les formulaires qui demandent une date de naissance sont trop fastidieux.

Positionnement des éléments

Position des champs du formulaire

  • Lister les champs les uns au dessus des autres. De même il convient de placer le label du champ juste au dessus de la zone à compléter. Un tel placement des éléments permet de scanner plus facilement et rapidement le formulaire pour les raisons suivantes:
    • L'utilisateur vois clairement s'il a oublié de remplir des champs.
    • L'œil n'a pas besoin de faire de zig-zag.
    • Ça respecte plus facilement la loi de proximité (cf. les éléments proches sont en rapport les uns des autres).
    • Ça respecte mieux la loi de Fitts.
comparatif de placement des éléments sur un formulaire
Comparatif de placement des éléments sur un formulaire web.
  • Si possible, placer tout le formulaire au dessus du pli (incluant le bouton d'envoi).
  • Dans le cas où il s'agit d'un formulaire important (exemple: formulaire pour acheter un produit) il faut placer 2 call to action : un au dessus du pli et l'autre en dessous.

Position du bouton d'envoi

  • Selon la structure du formulaire il faut placer le bouton d'envoi en bas à gauche ou en bas à droite.
comparatif d'un formulaire en 1 ou 2 colonnes
Comparatif de placement du bouton d'envoi selon la structure du formulaire.
  • Placer le bouton d'envoi en bas à droite si c'est un formulaire de plusieurs pages ou de plusieurs sections. C'est mieux car l’œil du visiteur parcourera les éléments en formant un "Z". De plus, nous lisons de la gauche vers la droite et de haut en bas, donc le bouton d'envoi est la dernière chose qui est vu par l'utilisateur. Si le bouton est situé à gauche (par exemple) le regard de l'utilisateur est obligé de retourner en arrière pour revenir sur ce bouton (ce qui fait perdre du temps).
placement du bouton sur un formulaire sur plusieurs pages
Placement du bouton sur un formulaire sur plusieurs pages.
  • Aligner à gauche le bouton d'envoi si c'est un formulaire simple d'une seule page. Ça associe le bouton avec les champs (qui sont aussi alignés à gauche) et ça évite que le visiteur perde du temps à chercher le bouton sur l'écran.
  • Centrer le bouton d'envoi n'est pas recommandé, sauf s'il fait toute la largeur du formulaire.

Call to action

  • Le bouton de validation doit avoir un intitulé personnalisé (exemple: "s'inscrire", "créer un compte", "envoyer le message", "commander", "valider ma commande" ...). Un bouton intitulé "Ok" ou "Envoi" ne veut pas signifier grand chose. Indépendamment du formulaire un bouton "ok" ne peut même pas être compris par les utilisateurs. Ils doivent même réfléchir avec attention pour prédire ce que le bouton va faire afin d'éviter d'effectuer une mauvaise manipulation.
  • Utiliser un poids visuel sur le bouton primaire. Différencier ce poids visuel entre le bouton primaire (exemple: "envoyer") et le bouton secondaire (exemple: "retour"). Il est possible d'utiliser une couleur sur le bouton principal et du gris (ou autre couleur neutre) sur le bouton secondaire.
Exemple de poids visuel sur le bouton primaire
Exemple de poids visuel sur le bouton primaire.
  • Si le bouton primaire est une action irrémédiable qui peut causer du tort (exemple: supprimer son compte utilisateur), il est préférable de mettre le poids visuel sur le bouton secondaire (le bouton "retour" ou "annuler") plutôt que sur le bouton primaire (bouton "supprimer").
  • Utiliser des liens pour désigner les actions qui font l'inverse d'un bouton. Par exemple pour publier du contenu: faire un bouton "Publier ce contenu" et un lien "Supprimer ce contenu". Placer le bouton et le lien à proximité, mais pas trop proche pour éviter les erreurs si l'utilisateur clique par inadvertance sur le lien.
  • Désactiver un bouton lorsqu'il n'est pas utilisable. Par exemple le bouton d'envoi ne peut pas être utilisé si certains champs requis ne sont pas rempli (évite indirectement certains problèmes de spam).
  • Ne pas cacher un bouton inactif. Ça surprend l'utilisateur lorsque le bouton apparaît, celui est susceptible de se demander s'il doit relire toute la page pour voir si d'autres éléments sont apparut et il arrive que l'utilisateur ne vois même pas le bouton apparaître (car il avait déjà scanné la page).
  • Utiliser un design spécifique pour montrer lorsqu'un bouton est inactif. Cette astuce est pratique pour ne pas afficher un bouton d'action de la même façon si on peut l'utiliser ou non. Le plus souvent il convient d'utiliser une couleur saturé ou neutre pour désigner le bouton en mode inactif.
  • Faire des boutons qui ressemblent à des boutons. Utiliser un effet de 3D, une ombre et des coins arrondis pour que ça paraisse plus réel.
  • Faire de gros boutons (mais pas trop gros non plus) avec des couleurs à fort contraste comparé au reste du design.
  • Utiliser des mots qui expriment le côté urgent et important (exemple: "S'inscrire immédiatement", "Demander un devis gratuit", "Acheter maintenant" ...). Autoriser des mots plus modérés dans certains cas pour éviter de faire fuir un visiteur (exemple: "Essayer la démo gratuitement", "Tester sans engagement pendant 5 jours" ...)
  • Si l'intitulé du bouton fait 1 ou 2 mots: utiliser des majuscules au débuts des mots. S'il y a plus de 2 mots ou 3 mots, utiliser une majuscule pour le premier mot puis que des minuscules.
  • Utiliser une icône dans le bouton (en plus de l'intitulé du bouton) pour illustrer le résultats de l'action (exemple: petit flèche vers la droite si le bouton envoi l'utilisateur sur une autre page, petite enveloppe si ça envoi un email ...).

Compléter le formulaire

  • Pré-remplir les champs lorsque c'est possible. Par exemple, si l'utilisateur a entré son code postal, il est possible de pré-remplir la ville et le pays. Il est aussi possible de pré-remplir le pays grâce à l'adresse IP du visiteur (voir le tutoriel "Connaître le pays d'un visiteur avec son adresse IP").
  • Suggérer une liste de résultats à l'aide des premiers caractères déjà entrés par l'utilisateur. Très pratique pour gagner du temps et éviter les erreurs lorsqu'il faut remplir un champ "ville" ou "pays". Sinon, faire une liste déroulante (un peu moins bien). Il faut éviter de laisser l'utilisateur entrer lui-même un tel champ. Si l'utilisateur entre lui-même ce champ, il faut vérifier s'il y a une erreur (notamment les erreurs de frappes).
Capture de Google suggest
Utilisation de Google suggest qui suggère une liste de mots-clés vis-à-vis des premiers caractères entrés.
  • Sur un formulaire pour se connecter: autoriser l'utilisateur à se connecter avec une adresse email ou un pseudo. S'il se souvient de l'un mais pas de l'autre, c'est un gain de temps pour lui.
  • Sur un formulaire pour se connecter: autoriser l'utilisateur à se connecter avec ses identifiants Facebook, Google, Twitter, OpenID ...

Utilisation du formulaire

  • Pré-sélectionner le premier champ du formulaire automatiquement.
  • Utiliser la balise HTML label. Cette balise permet de faire en sorte que si l'ont clique sur le texte qui labellise un champ, ça sélectionne automatiquement le champ associé ou coche la case associée.
utilisation d'un label dans un formulaire web
Utilisation d'un label sur une checkbox.
  • Ajouter un effet au survol de la souris sur les boutons. Permet de mieux comprendre qu'un bouton est un bouton et que c'est un élément dynamique qui va effectuer une action.
  • Ajouter un effet au survol de la souris sur les champs à remplir (champ texte, case à cocher ...). Permet de mieux associer les labels avec leurs champs associés. Dans le cas d'une case à cocher, c'est aussi pour mieux définir la zone cliquable (cf. le label de la case).
  • Afficher en surbrillance un champ lorsqu'il est sélectionné. C'est pratique pour visuellement voir quel champ est actif, notamment lorsque le visiteur navigue sur le formulaire avec un clavier. Si l'utilisateur quitte des yeux le formulaire puis retourne dessus, il perd moins de temps à savoir où il était rendu et déterminer quel champ était actif.
Champ sélectionné en surbrilliance
Champ sélectionné en surbrilliance
  • Afficher une aide pour chaque champ qui le nécessite. Le petit message d'aide doit être situé à proximité du champ concerné. S'il le faut, il ne faut pas hésiter à afficher un schéma ou une petite image. Par exemple pour les trois chiffres aux dos d'une carte bleu, il est possible d'afficher un schéma qui indique où sont situé ces chiffres sur la carte bancaire.
  • L'aide associé à un champ peut s'afficher automatiquement lorsque celui-ci est sélectionné. Il est aussi possible de placer un lien "aide" ou une icône "icône aide" et d'afficher les explications au survol de la souris. Il ne faut pas faire de lien cliquable car l'utilisateur peut avoir peur de perdre les informations déjà remplis si le lien ouvre une nouvelle page. Certes, certains liens ouvrent des pop-up, mais l'utilisateur ne peut pas le prédire et par défaut il a peur de perdre tout le travail qu'il viens juste de faire en remplissant chaque champ un à un.
  • Remplacer les captcha anti-robot par d'autres solutions plus ergonomiques. Il est possible d'afficher une case à cocher "je ne suis pas un robot". Cette case peut être générée en javascript pour éviter que les robots ne la lise. Il est aussi possible de cacher un champ intitulé "nom" au visiteur avec du CSS. Les visiteurs ne voient pas le champ qui est caché donc le laisse vide. En revanche les robots voient un champ intitulé "nom" donc il le remplisse par un nom aléatoire par défaut. Il suffit ensuite de valider le formulaire que si le champ reste vide (sinon c'est forcément un robot). Enfin, pour renforcer la sécurité pour éviter le spam il est possible d’empêcher a validation d'un formulaire si celui-ci est rempli en moins de 2 secondes (par exemple).
  • Possibilité d'indiquer l'intitulé des zones textuelles à l'intérieur du champ à compléter. Il faut que le nom du champ soit en gris sur fond blanc (ou texte avec couleur saturé selon le design). De plus, ce nom doit disparaître lorsque le champ est sélectionné et ré-apparaître si le champ est vidé.
comparatif de placement des libellés d'un formulaire
Comparatif de placement des libellés sur un formulaire web.
  • Si le nom du champ est à l'extérieur de la zone de texte, à l'intérieur il est possible d'indiquer la façon dont le texte doit être formaté. Voici des exemples:
    • S'il faut écrire une date, il est possible d'écrire en gris dans le champ: "JJ/MM/AAAA".
    • Si l'utilisateur doit entré un numéro de téléphone d'une certaine façon, à l'intérieur du champ il est possible d'inscrire en gris: "+33 212345678".
  • Si l'intérieur du champ est vide, il est possible d'écrire dedans si le champ est optionnel.
  • Ne pas utiliser d'astérisque rouge pour désigner les champs obligatoire. Ça rempli le formulaire de bruit visuel et parfois il n'y a même pas de légende pour expliquer à quoi ça correspond. A la place il est suggéré d'écrire avec du texte si les champs sont requis ou non. La meilleure solution consiste plutôt à indiquer seulement lorsque les champs sont optionnels (cf. voir astuce précédente).
  • Le formulaire ne devraient pas attendre le dernier moment pour vérifier l'intégrité des informations de chaque champs. Si l'utilisateur indique un nom d'utilisateur qui existe déjà, le formulaire devrait lui indiquer une erreur juste après avoir rempli le champ (avant qu'il ne soit trop loin sur le formulaire). Pour cela il est possible de vérifier les champs juste au moment où le champ est dé-selectionné (c'est-à-dire lorsque l'utilisateur passe au champ suivant). Chaque élément devrait alors avoir une petite indication visuelle pour savoir s'ils y a une erreur ou non (exemple une icône Famfamfam icône ok ou icône erreur).
  • Choisir judicieusement les intitulés des éléments et les types de champs (bouton "radio" différent des checkbox").
  • Afficher un calendrier lorsqu'il faut choisir une date. Ça évite tout problème de mauvaise saisie de la date et c'est plus facile et rapide à utiliser.
  • Ne pas masquer les mots de passe par des étoiles. C'est plus compliqué de se rendre compte d'une erreur. A la place, faire un bouton pour que l'utilisateur cache son mot de passe quelque seconde après l'avoir entré. Ou alors afficher les caractères pendants quelques millisecondes puis les remplacer à l'écran par des étoiles.

Design

  • Bien utiliser la loi de proximité pour montrer aisément les éléments qui sont en rapports et ceux qui sont complètement différents.
  • Éviter trop de bruit visuel. Garder un design sobre pour ne pas distraire inutilement les utilisateurs. Faire en sorte que le formulaire soit lisible: bon contraste, police d'écriture adapté au format web avec une taille de caractère raisonnable.
  • Lorsque le formulaire est découpé en plusieurs zones, penser à utiliser une ligne de séparation ou des couleurs distinctes pour bien délimiter les zones.
  • Idéalement il faut grouper les champs par petit groupe de 5 éléments environ. L'accroche visuelle est ainsi mieux réalisée.
  • Adapter la taille des champs à ce qu'ils peuvent contenir. Un champ "age" contient 1 à 3 caractères, donc il faut faire un petit champ. A l'inverse le champ "nom" doit être plus long car il peut parfois contenir plus de 20 caractères. Éviter de faire un champ trop petit par rapport à ce qu'il va contenir car c'est agaçant de devoir "scroller" à l'intérieur d'un champ texte. C'est aussi bien valable pour les champs une ligne (input text) que les champs de plusieurs lignes (textarea). Par exemple sur une page de contact, le champ qui contient le message doit être assez grand au cas où le visiteur souhaite écrire un long message.
comparatif de la taille des champs sur un formulaire
Comparatif de la taille des champs sur un formulaire.
  • Sauvegarder automatiquement les informations déjà saisie ou proposer une option pour le faire. Afficher cette option lorsque le visiteur souhaite quitter le formulaire. C'est particulièrement pratique lorsque les formulaires font plusieurs pages.
  • Faire des cases à cocher assez grandes. Au mieux il faut les faire plus grandes que la souris.
  • A la place d'une simple case à cocher pour s'inscrire à la newsletter, proposer à l'utilisateur l'aperçu d'une newsletter pour qu'il sache à quoi s'attendre. Si vous souhaitez être un site de qualité, il ne faut pas pré-cocher la case d'inscription à la newsletter.

Avant/pendant/après l'envoi

  • Si c'est un formulaire important qui n'est pas modifiable après (exemple: demande de visa, paiement sur un site d'e-commerce ...) alors faire une page qui récapitule les informations avec la possibilité de modifier et/ou de retourner sur les pages précédentes.
  • Afficher un message après l'envoi du formulaire pour savoir si l'action à bien été réalisée. Dans le cas d'un formulaire important, ré-afficher les informations saisies avec possibilité d'imprimer la page.
  • Dans certains types de formulaire, tel qu'un formulaire pour se connecter à un site, il faut rediriger le visiteur automatiquement sur la page où il était avant de se connecter. Si le formulaire de connexion redirige le visiteur sur la page d'accueil alors l'internaute est perdu et doit essayer de retrouver lui-même la page où il se situait (ce n'est pas pratique).
  • Sur un formulaire d'inscription il est possible de demander un pseudo d'utilisateur après que celui-ci se soit inscrit.

Gestion des erreurs

  • Faire des formulaires les plus intelligents possible pour éviter des petites erreurs courantes. Il est par exemple possible de comprendre lorsqu'un numéro de téléphone n'est pas entré dans le bon format (exemple: "06.12.34.56.78", "06-12-34-56-78", "06 12 34 56 78", "0612345678" ou même "+33(0)6.12.34.56.78")
  • Penser à toujours afficher les erreurs et à les expliquer. Ne pas afficher de messages en anglais ou de messages techniques.
  • Indiquer visuellement où se trouve l'erreur si ça concerne un champ en particulier. Et donner des explications pour résoudre le problème à proximité du champ erroné. Par exemple, si la date n'est pas entrée au bon format, alors indiquer quel format il faut utiliser.
  • Ne pas vider tout le formulaire lors d'une erreur. Les développeurs web doivent aussi penser à retirer les backslashs avant les guillemets (ils comprendront).

Bon courage pour la réalisation de vos formulaires. Vous n'avez maintenant plus d'excuses pour faire des erreurs d'utilisabilités sur ce type de pages. Et n'hésitez pas à partager cette page à vos collègues.


Article rédigé par Tony_ le 15/08/2011 à 15h15 dans la catégorie "Présentation" du site InfoWebMaster.fr.

Lire les 5 commentaires

Ajouter un commentaire