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

L’une des règles principales en design, et qui s’applique également à vos formulaires : Less is more.
Le moins fait le mieux.


‍

Il faut savoir que plus le nombre de champs à remplir sera important, plus vous aurez de risque que votre utilisateur abandonne sa saisie.

Nous avons d’ailleurs fait le test chez certains de nos clients : en supprimant 4 champs seulement, nous avons réussi à augmenter le taux de conversion de 3,5%.

‍

Il est donc primordial d’utiliser uniquement les champs dont vous avez nécessairement besoin. On oublie les champs facultatifs au maximum.
Jamais l’internaute ne doit se demander pourquoi vous avez besoin de telle ou telle information.
Luttez contre le “au cas où”.
‍

Un exemple concret : Si votre équipe commerciale contacte uniquement vos utilisateurs par mail, vous n’avez aucun besoin de leur demander leur numéro de téléphone.

‍

La disposition de vos labels et de vos champs prennent une place important dans l’expérience utilisateur. L’information doit être facilement lisible par vos utilisateurs.
Un sens de lecture doit être facilement identifiable.

Positionnez vos labels au dessus de vos champs pour faciliter la lecture

‍

Dans vos formulaires, organisez vos champs de haut en bas  

Effectivement, il y aura davantage de scroll, mais la lisibilité sera considérablement améliorée pour vos utilisateurs. Ils n'auront aucune confusion quant à l'ordre des champs à remplir.

‍

Il existe plusieurs moyens pour simplifier la saisie dans vos formulaires et les rendre plus intuitifs et agréables pour vos utilisateurs.

‍

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

Un place quoi ?

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 livvraison)

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é.

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.

Pour assurer une bonne expérience utilisateur (UX), il est essentiel de décliner les formulaires avec plusieurs état d’intéraction afin de fournir des retours à l'utilisateur sur ses actions.


On recense plusieurs états :

• É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.

‍

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.

Une fois que votre utilisateur a rempli son formulaire, n'oubliez pas cette étape cruciale. Où atterrit-il ensuite ?

‍

Idéalement, une page de confirmation est recommandée.Cette page peut récapituler une partie de sa saisie ou au moins lui indiquer clairement que ses réponses ont été envoyées avec succès.

‍

Cette page de confirmation peut également être utilisée pour évoquer des délais de réponses, rassurer l'utilisateur quant à sa saisie et le réorienter vers d'autres aspects du produit ou du service.