Les 8 clés d'un formulaire design pour maximiser vos conversions et améliorer l'expérience utilisateur

Un formulaire de contact, un formulaire de paiement, ou un formulaire pour créer du lead, tous ont le même objectif : être remplis et créer du lien avec les utilisateurs. Nous vous dévoilons quelques règles qui vous aideront à améliorer considérablement votre UX, et donc votre taux de complétion.

1. Pour le design de vos formulaires : Less is more

En matière de design de formulaire il existe une règle d’or : moins il y a de champs, plus l’expérience est fluide.
Chaque champ supplémentaire augmente le risque d’abandon.
Chez certains clients, la suppression de seulement 4 champs a permis d’améliorer le taux de conversion de 3,5 %.

• Ne conservez que les champs indispensables.
• Bannissez les champs « facultatifs».
• Exemple : si vos commerciaux contactent uniquement par e-mail, inutile de demander un numéro de téléphone.

‍

2. Organisation et positionnement des champs de vos formulaires

La disposition influence directement la lisibilité et le confort.

• Placez les labels au-dessus des champs pour une lecture claire.
• Organisez vos champs de haut en bas plutôt qu’en colonnes : cela peut rallonger le scroll, mais simplifie la compréhension et évite les zigzags visuels.

‍

‍

3. Faciliter la saisie

Quelques bonnes pratiques rendent la saisie intuitive et agréable :
‍

Un formulaire aux labels toujours visibles

Cela permet à vos utilisateur de garder du contexte tout au long de sa saisie, et d’identifier très facilement quel champs correspond à quoi

‍

Des tailles de champs adaptées pour une bonne UX

‍Aidez votre utilisateur à comprendre ce qu’il doit remplir en jouant avec la taille des champs. Si quelques caractères sont nécessaires, aucune utilité d’avoir un champ qui prend toute la largeur de votre écran.


⚠️ Attention néanmoins à ne pas avoir 10 tailles de champs différents dans votre formulaire ! On en préconise au maximum 3.

‍

Importance du placeholder dans vos formulaires

Le placeholder c'est un libellé grisé qui offre un exemple à votre utilisateur pour l'aider à comprendre vos attentes.
Son rôle principal est d'assister l'utilisateur en lui fournissant des indications, mais il ne devrait jamais contenir une information cruciale.
Il sert aussi à signaler que le champ n'a pas encore été rempli. Lors de la rédaction de ces placeholders, soyez attentif à maintenir l'inclusivité pour tous les utilisateurs.

‍

Autres astuces
pour vos formulaires design

Votre objectif principal est que votre utilisateur passe le moins de temps possible lors de sa saisie.

Cela passe par plusieurs moyens comme par exemple :

• Éviter de répéter les champs de mot de passe lors de la création de compte
• Afficher un oeil permettant de rendre visible les données sensible (ex : mot de passe)
• Penser à l’auto-complétion sur des champs complexes (ex : adresses), ou si certains données sont déjà hébergées dans votre base de données
• Faciliter la saisie au clavier et sur mobile (faire en sorte de paramétrer le passage au champs suivant au clic sur tab ou sur “Retour”)
• Pré-remplir les champs dont on a connaissance (et réutiliser les informations du profil utilisateur quand c’est possible)
• Permettre d’enregistrer des données utilisateur sur son compte (ex : Adresse de livraison)

4. Champs obligatoire ou facultatif, que choisir ?

Une question qui nous est souvent posé lors de la conception d’écran : Est-ce qu’on doit afficher les champs facultatifs, ou les champs obligatoires avec une étoile rouge ou les 2 ? 


Notre réponse : Le majoritaire l’emporte.


Si vous avez d’avantage de champs facultatif (ce que l’on ne préconise pas), alors on viendra indiquer uniquement les champs obligatoires.



Si à l’inverse vous avez une majorité de champs obligatoire, on indiquera les champs facultatif.



Dans tous les cas nous préconisons :

• De ne pas faire les 2, les informations viendraient se recouper et surcharger l’écran
• D’expliciter en toute lettre “Obligatoire” ou “Facultatif” pour une question d’accessibilité
• De privilégier l’affichage des champs facultatifs, car le sentiment de contrainte est moins grand et ils sont souvent en plus faible quantité.

5. Organisation et regroupement des champs

Nous recommandons de commencer par demander des informations générales pour progresser vers des détails plus spécifiques.
Cela permet à l'utilisateur de s'acclimater progressivement au contexte, créant ainsi un sentiment de sécurité. Évitez de solliciter des informations personnelles et trop intrusives dès le départ avant même de connaître son nom.
Cette approche est moins intrusive, plus délicate, et semble plus respectueuse.

Si votre formulaire comporte de nombreux champs, il est recommandé de les regrouper par sujet afin de réduire la charge cognitive pour l'utilisateur.

‍

6. États des champs et cas d’erreurs

Un bon formulaire doit prévoir plusieurs états pour guider l’utilisateur :

• État Enable : C'est l'état neutre qui inclut généralement un placeholder
• État actif : C'est l'état lorsque l'utilisateur a cliqué dans le champ et est en train de saisir
• Etat focus : Utilisé pour la navigation au clavier
• État disable : C'est l'état verrouillé qui indique à l'utilisateur qu'aucune saisie n'est possible
• État read-only : Généralement, il est rempli d'une information, en lecture seule, mais non modifiable
• État validated : Une fois que l'utilisateur a rempli son champ, on lui indique que tout est correct
• État error : Utilisé pour indiquer une erreur sur le champ

‍

Les cas d’erreurs sur les formulaires

Les cas d'erreurs jouent un rôle crucial dans l'expérience utilisateur, permettant d'indiquer une mauvaise saisie ou un champ oublié.
Il est essentiel d'adopter une approche pédagogique, en fournissant des informations précises sur l'erreur, tout en maintenant un ton positif.

7. Le handicap et l’assistance vocale

Lors de la conception de vos formulaires, vous vous devez d’être inclusifs en tenant compte des personnes handicapées et des assistants vocaux.

1. Une conception accessible et lisible pour vos formulaires

• Utilisez des labels descriptifs : Assurez-vous que chaque champ de formulaire a un label clair et descriptif. Les personnes utilisant des lecteurs d'écran dépendent fortement des labels pour comprendre le contexte et la signification des champs.
• Utilisez une mise en page claire : Organisez le formulaire de manière logique, avec une structure visuelle facile à suivre. Évitez les designs trop complexes qui pourraient désorienter les utilisateurs.

‍

2. Rendre vos formulaires compatibles avec les lecteurs d'écran

• Testez avec des lecteurs d'écran : Assurez-vous que votre formulaire fonctionne correctement avec les lecteurs d'écran populaires, tels que VoiceOver (iOS), TalkBack (Android), ou JAWS (Windows). Les utilisateurs aveugles ou malvoyants dépendent de ces outils pour naviguer sur le web.
• Ajoutez des informations contextuelles : Fournissez des informations contextuelles supplémentaires, si nécessaire, pour aider les utilisateurs à comprendre la finalité des champs ou des actions.

‍

3. Prise en charge de la navigation au clavier

• Assurez-vous que la navigation au clavier est intuitive : Certains utilisateurs préfèrent naviguer à l'aide du clavier plutôt qu'à la souris. Assurez-vous que tous les éléments du formulaire peuvent être atteints et activés en utilisant uniquement le clavier.
• Mettez en surbrillance les champs actifs : Lorsque les utilisateurs naviguent à l'aide du clavier, mettez en surbrillance visuellement les champs de formulaire actifs pour indiquer où ils se trouvent.

‍

4. Tester vos formulaires avec des utilisateurs divers

• Engagez des utilisateurs avec des handicaps : Pour obtenir des retours pertinents, incluez activement des personnes avec différents types de handicaps dans le processus de test. Cela peut aider à identifier des problèmes d'accessibilité que vous pourriez ne pas avoir envisagés.
• Prenez en compte les retours des utilisateurs : Soyez réceptif aux retours des utilisateurs et apportez les modifications nécessaires pour améliorer continuellement l'accessibilité du formulaire

‍

5. Compatibilité avec les assistants vocaux

• Conception vocale naturelle : Lors de la conception pour les assistants vocaux, assurez-vous que les interactions vocales sont naturelles et intuitives. Évitez les instructions complexes et favorisez des commandes simples et directes.
• Testez avec des assistants vocaux populaires : Assurez-vous que votre formulaire fonctionne correctement avec des assistants vocaux couramment utilisés tels que Siri, Google Assistant, ou Alexa. Testez différentes accents, prononciations et styles de commandes vocales.

‍

8. Design de formulaire et fin de parcours

Ne négligez pas l’étape finale. Une page de confirmation est essentielle pour :

• rassurer l’utilisateur,
• récapituler ses données (au moins partiellement),
• indiquer les délais de traitement,
• proposer des actions complémentaires (navigation vers d’autres services, par exemple).

‍

‍