formblog

Étude sur l’ergonomie des formulaires

Les formulaires, bien que très présents sur le web sont souvent peu accueillants ou compliqués, voir complètement incompréhensibles et agaçants. Voici un récapitulatif sur comment améliorer ceux-ci, faire baisser le taux d’erreur et limiter l’abandon lors de leur remplissage.

Mais avant, un petit rappel sur qu’est-ce que l’ergonomie :

L’ergonomie (du grec « Ergon » signifiant « travail » et « Nomos » règles) web est un concept qui repose sur deux notions clés que sont l’utilité et l’utilisabilité.

L’utilisabilité (« Usability » in english), rassemble trois critères :

  • L’efficacité : Le résultat recherché est t-il bien atteint?
  • L’efficience : Ce même résultat est t-il atteint rapidement et avec facilité ?
  • La satisfaction : L’internaute a t-il eu plaisir à naviguer sur le site ?

Et un petit rappel sur 2 points à identifier dès le départ :

  • Déterminer le public cible du formulaire en ligne,
  • Déterminer la fonction du formulaire en ligne,

Passons aux choses sérieuses :

1- Soigner le visuel global,

2- Prendre en compte la loi de la proximité (selon laquelle notre cerveau regroupe inconsciemment les éléments proche graphiquement ou physiquement) et les études d’eye tracking.

Exemple sur la loi de la proximité

3- Bien séparer les différentes zones visuellement (pagination, séparation, bloc) afin de le rendre plus intuitif en regroupant les infos allant ensemble et par la même occasion d’alléger le tout en évitant la succession interminable de champs (catégoriser les informations et effectuer un tri). Permettre de revenir en arrière pour modifier ses informations en cas de formulaire à étape.

separation

4- Adapter la taille des champs à l’information qu’ils doivent contenir au final. Un espace de 5 caractères indiquera inconsciemment à l’utilisateur qu’il doit y mettre son code postal (Attention un champ trop petit peut rendre la saisie et la relecture désagréables !).

taille-champ

5- Mettre en valeur le champ actif pour aider l’utilisateur à se localiser (surtout pour les formulaires de taille conséquente). On conseille aussi un traitement pour le survol d’un champ !

selection

6- Indiquer les champs obligatoires, si l’utilisateur les loupe avant d’envoyer son formulaire, il sera confronté à un message d’erreur (souvent frustrant) et devra y retourner. De plus cela l’aide à se rendre compte de la charge de travail.

obligatoire

7- Casser la monotonie en traitant certains éléments de façon différente.

calendrier

« Datepicker » pour un champ date

fourchette-prix

Réglette pour une fourchette de prix

8- Ajouter une phrase d’aide SI NÉCESSAIRE ! Attention à ne pas surcharger la page d’informations. Inutile d’écrire “Ici écrivez votre nom”. En revanche, il peut être judicieux d’indiquer un “votre mot de passe doit contenir au moins un chiffre”.

9- Ne pas mettre de bouton effacer près du bouton valider (une erreur est si vite arrivée…). De plus, on souhaite rarement effacer son formulaire, ce bouton est bien souvent complètement inutile.

choix-btn

10- Forcer un format de remplissage pour éviter les erreurs, mais attention aux indications d’erreur en cours de saisie. L’utilisateur peut se sentir déconcentré voir agressé quand les alertes sont trop grossières et imposantes !

11- Favoriser listes déroulantes, boutons radio et cases à cocher aux champs libres. Dans certains cas il vaut mieux éviter le risque de se retrouver avec une information non utilisable. (Cases à cocher et boutons radios doivent pouvoir être sélectionnables en cliquant aussi sur leur libellé).

case-a-cocher

12- Valider les champs renseignés au fur et à mesure (et pourquoi pas même afficher un pourcentage d’avancée : http://git.aaronlumsden.com/progression/).

13- Autoriser le pré-remplissage quand on en a la possibilité. Par exemple : Remplir le nom et prénom d’un formulaire de contact sur un site où l’utilisateur est déjà connecté ou présélectionner un pays selon la localisation de votre utilisateur.

14- Signaler les erreurs de plusieurs manières mais toujours avec précision. Pour signaler une erreur, on utilise souvent la couleur rouge. C’est une convention que l’on peut appliquer sans problème, à condition de ne pas tout miser dessus : pensons aux utilisateurs qui ont des troubles de la vision des couleurs et ajoutons une icône par exemple. On choisira de préférence un fond rouge pâle avec du texte foncé plutôt que du texte rouge vif en petits caractères, afin d’optimiser la lisibilité.

erreur

15- Proposer un récapitulatif des informations envoyées en dernière étape et changer graphiquement la page une fois le formulaire envoyé, pour avoir une vraie sensation d’action, puis envoyer une confirmation par courriel.

16- Ne pas baisser les bras sur l’accessibilité ! Pensez à tous les utilisateurs.

17- Hiérarchiser les infos par leur taille et leur traitement graphique (Exemple de poids visuel sur le bouton primaire).

boutons

Exemple de poids visuel sur le bouton primaire à gauche, qui saute plus à l’oeil que le lien à droite.

Le cas particulier du formulaire d’inscription :

1- Obliger la répétition des données importantes telles qu’email et mot de passe pour être sur qu’elles ne comportent pas d’erreurs (Attention, ceci n’a d’utilité que si on désactive le copier/coller, sinon l’usager risque de copier/coller sa bourde).

repetition

2- Il est préférable d’utiliser le mail comme identifiant qu’un nom d’utilisateur (pas de doublon et moins d’oubli).

3- Encourager les technologies de générateur de mot de passe et de mémorisation du mot de passe.

4- Découper l’inscription en deux. Une première étape rapide avec l’essentiel pour se connecter puis une autre (généralement à la 1ère connexion ou au passage dans son compte) avec plus de détails.

5- Éviter les capcha illisibles. Le système de la question peut-être une bonne alternative.

securite

6- Rendre le bouton d’inscription toujours très visible et si possible y ajouter quelques mots (Que ce soit pour rassurer l’utilisateur sur la confidentialité de ses infos, indiquer qu’un produit est échangeable sous 30 jours, lui présenter des avantages, bref, donnez-lui envie et confortez-le !)

7- Ne pas cocher l’inscription à une newsletter par défaut. Ça vous énerve donc ne l’infligez pas…

Le cas particulier du formulaire de connexion :

1- Proposer la connexion automatique,

2- Proposer à l’utilisateur de le rediriger sur la page où il se trouvait si celui-ci se connecte depuis un autre point d’entrée que la page d’accueil,

3- Proposer la récupération du mot de passe. Oui, il arrive de chercher plus de 10min comment récupérer son mot de passe. Rien de pire pour perdre votre utilisateur.

Comment savoir si son formulaire est enfin bon ?

Rien ne vaut les tests utilisateurs et l’audit analytique afin de combiner les données statistiques et la vision de l’utilisateur.

En cas d’échec, ce n’est pas l’utilisateur qu’il faut blâmer, c’est que le formulaire ne l’a pas bien accompagné. Beaucoup considèrent qu’un bon formulaire est celui qui “prendra l’internaute par la main et le guidera en toute simplicité”.

Étude sur l’ergonomie des formulaires 5.00/5 (7 votes)

A propos de Sarah BELLEVEGUE

Développeur web front end à Canal-web. Membre de l'équipe depuis 2011.

4 commentaires

  1. Simon@Réseau social d'entreprise

    Etude intéressante sur un domaine qui me semble négligé par la plupart d’entre nous. Merci de pointer certaines choses très agaçantes comme les captcha illisibles ! Pour ma part, je préfère ceux qui présentent un petit exercice de logique ou d’observation.

  2. Nadine Cohen

    tres bon article qui resume les points importants de la creation d’un formulaire. Sarah a reussi a mettre l’accent sur beaucoup d’erreurs a ne pas faire. Merci beaucoup.

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>