Conception de formulaires web : le guide des meilleures pratiques

Pour nombre de sites web, les formulaires représentent la principale interaction entre le site web et l’utilisateur. Pourtant, on continue à rencontrer des formulaires qui sont à l’expérience utilisateur ce que les cailloux dans les chaussures sont à la marche à pied. Voici les bonnes pratiques à suivre pour des formulaires aux petits oignons.

Une règle transversale : indiquez clairement les champs obligatoires.

Champ de saisie de texte

  • Positionnez le nom de l’étiquette au-dessus du champ de saisie et non dans la zone de saisie
  • Positionnez le texte d’aide sous l’étiquette du formulaire
  • Adaptez la taille de la zone de saisie aux informations attendues

Formulaire web : saisie de texte

Champ à format spécifique (email, téléphone, mot de passe, date…)

  • Expliciter le format attendu
  • Mot de passe : donner la possibilité de l’afficher en clair
  • Date : préférer la saisie plutôt qu’une sélection, en étiquetant les zones de saisie (JJ/MM/AAAA)

Cases à cocher : quand plusieurs choix sont possibles

  • Placez le texte d’aide sous l’étiquette du champ
  • Placez les cases à cocher à gauche de l’étiquette et listez les options verticalement.
  • Indiquez clairement que l’utilisateur peut sélectionner plusieurs options.
  • Utilisez une seule case à cocher lorsqu’un utilisateur doit indiquer son accord (par exemple, les termes et conditions).
  • Pensez à ajouter une option «Autre».
  • Rendez les cases à cocher faciles à cocher, avec une hauteur cible d’au moins 44 pixels.
    Les cases à cocher doivent TOUJOURS être carrées.

Formulaire : les cases à cocher (plusieurs réponses possibles)

Boutons radio : quand un seul choix est possible

  • Placez le texte d’aide sous l’étiquette du champ.
  • Positionnez les boutons radio à gauche de l’étiquette et listez les options verticalement.
  • Indiquez clairement que l’utilisateur ne peut sélectionner plusieurs options.
  • Pensez à ajouter une option «aucun».
  • Organisez les options en commençant par les plus courantes. Si cela introduit un biais, utilisez l’ordre alphabétique.
  • Rendez les boutons radio faciles à appuyer, avec une hauteur cible d’au moins 44 pixels.
  • Les boutons radio doivent TOUJOURS être ronds.

Formulaire : bouton radio (une seul choix possible)

Sélection dans une liste

Nota bene : à utiliser en dernier recours. On ne voit pas toutes les options d’un coup et la sélection est parfois complexe lors d’une navigation au clavier ou sur un écran tactile.

Boutons

  • Le texte du bouton décrit l’action exécutée par le bouton.
  • Ne donnez pas trop de choix à l’utilisateur. Utilisez un seul bouton principal pour l’action majeure de chaque page.
  • Placez le bouton là où les utilisateurs l’attendent. Il s’agit généralement du bord gauche du formulaire, directement sous le champ final.
    Formulaire : bouton d'action
  • Rendre les boutons potentiellement destructeurs comme « Annuler » moins visibles pour l’utilisateur.
  • Évitez les boutons désactivés. Ils ont un contraste médiocre et peuvent prêter à confusion.
  • La soumission du formulaire est suivie d’un message indiquant la réussite ou non de l’action souhaitée.

Messages d’erreur

  • Afficher le texte d’erreur au-dessus du champ de saisie.
  • Utilisez une icône rouge, un message d’erreur et une bordure rouge pour mettre en surbrillance le champ qui nécessite une attention particulière.
  • Utilisez un langage conversationnel positif avec une voix active. Allez droit au but.

Formulaire : message d'erreur

Formulaires complexes

  • Précisez à l’avance le temps nécessaire ainsi que la nature des données et des documents exigés
  • Annoncez la liste des différentes étapes
  • Affichez l’étape en cours
  • Permettez de revenir à l’étape précédente sans perdre de données
  • Autorisez le copier / coller de données

Formulaire complexe : indiquer les étapes

Le récap à emporter (cliquer sur l’image pour l’agrandir)

Formulaires : bonnes pratiques UX (choblab.com)

Sources

4.7/5 - (19 votes)