Faire fuir vos visiteurs au moment du remplissage d’un formulaire est relativement facile, surtout si ce formulaire est un peu long. En relisant 5 ways to make sure that users will abandon your forms, je me suis rappelé d’un certain nombre de formulaires absolument horribles sur lesquels j’ai eu la malchance de tomber ces dernières années. Cela m’a donné l’idée d’écrire cet article sur les formulaires longs en une seule page, ainsi que son pendant pour les formulaires sur plusieurs pages, aussi bien comme aide mémoire que comme source d’information pour des développeurs qui seraient concernés par le problème.

Je ne prétends pas donner une solution à tous les problèmes de la terre. Cet article a pour but de répondre à une problématique en donnant un cadre de bonnes pratiques liées à la conception de formulaires longs à afficher sur une seule page. Le pattern de cet article est lui fortement inspiré du très bon UI Patterns.

Problème

L’utilisateur doit remplir un formulaire demandant de nombreuses informations disposés sur une seule page. Par exemple :

Formulaire de création de compte en 3 étapes

Le formulaires longs sur une seule page sont à utiliser quand :

  • Le moindre clic compte, et qu’un écran de trop signifie un abandon de panier
  • Proposer un formulaire sur plusieurs pages n’a aucun sens
  • Le produit transpose online une action hors ligne naturellement sur une page

Solution

Présentez à votre utilisateur un formulaire clair, aéré et bien ordonné. Celui-ci doit pouvoir d’un seul coup d’oeil comprendre quelles informations vont lui être demandées, de quoi elles traiteront, et combien de temps cela va lui prendre. Cela passe par :

  • Regrouper les champs du formulaire par grandes thématiques d’informations
  • Introduire ces grandes thématiques par un titre parlant, en rapport avec les informations demandées
  • Numéroter ces rubriques
  • Préférer l’affichage label + champ sur une seule ligne, quand c’est possible et que ça ne nuit pas à la lisibilité
  • Ne pas dupliquer la saisie des informations quand cela peut être évité

J’en rajouterai une un peu à part, car elle concerne tous les types de formulaires. Afin de faire passer les demandes d’informations inhabituelles, expliquez pourquoi vous les demandez. D’une part cela permet à l’utilisateur de comprendre, et cela lève en partie sa méfiance vis à vis d’une demande d’informations personnelles trop intrusive, et d’autre part, ça casse un peu la monotonie d’un formulaire trop long.

Vinéolia, formulaire d'inscription

Vineolia n’explique pas pourquoi la date de naissance des utilisateurs est exigée à l’inscription. Le site traitant d’alcool, ils doivent légalement vérifier l’âge de leurs utilisateurs. Malheureusement, comme ce n’est expliqué nulle part, il est facile de croire qu’ils cherchent simplement à récupérer des données personnelles à des fins commerciales.

Raisonnement

Que ce soit en ligne ou non, personne n’aime remplir des formulaires, en dehors peut-être des grilles de Loto. Côté conception, tout votre problème va donc être d’éviter que vos utilisateurs ne referment la fenêtre avant d’avoir cliqué sur le bouton valider. Vous allez donc pour cela devoir casser la monotonie du formulaire en lui donnant un rythme – un flow, comme dans le rap – qui poussera l’utilisateur à continuer.

Numéroter les grandes sections de votre formulaire va donner à votre utilisateur l’impression d’avancer en validant des étapes, exactement comme il le ferait dans un jeu. Utiliser des séparateurs visuels permet de renforcer encore cette impression de paliers. Éviter la duplication de la saisie des informations, par exemple en signalant d’une case à cocher que l’adresse de livraison est la même que l’adresse de facturation permet encore de réduire lesa saisie et ainsi la longueur du formulaire.

Ne tombez pas dans l’excès contraire : l’utilisateur doit rester concentré sur le remplissage du formulaire. Ne lui donnez donc aucune raison de relâcher son attention ou de quitter la page : liens externes, références à des sujets annexes… votre but reste qu’il clique sur ce satané bouton “valider”

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: