7 secrets pour concevoir de grandes formes
Presque chaque conception de site Web comprend un certain type de formulaire. À partir de la simple collecte d'adresses électroniques pour vous inscrire à un bulletin d'information ou de la notification à des formulaires de collecte de paiements complets, il est impératif que vous conceviez un formulaire facile à utiliser et à comprendre.
Les normes de conception de formulaires évoluent également. Alors que de nombreux formulaires incluaient plusieurs colonnes et demandaient beaucoup d'informations, la plupart des meilleures pratiques suggèrent maintenant de garder les formulaires aussi simples que possible. Et il y a aussi beaucoup à la conception. Un bon formulaire peut être scanné, ne nécessite pas beaucoup de saisie et inclut un étiquetage et un formatage intelligents pour aider les utilisateurs à remplir les formulaires correctement la première fois.
Voici quelques secrets pour vous assurer de concevoir un formulaire que les utilisateurs remplissent réellement.
1. Rendez-le facile à numériser et à lire
Vous savez que les utilisateurs scannent les sites Web pour glaner des informations et déterminer les actions qu'ils entreprendront ou que le contenu et la conception les intéressent ou non. La même chose est vraie pour les formes. L'utilisateur doit être en mesure de dire quelles informations sont nécessaires d'un coup d'œil et de fournir une explication claire de la nature du formulaire et de la manière de le soumettre.
Un formulaire hautement numérisable comprend les éléments suivants:
- Contraste: Le texte doit être court et facile à lire. Évitez beaucoup de couleur et tenez-vous-en aux couleurs foncées sur les combinaisons de texte claires.
- Regroupement et espace: regroupez des informations similaires sur des formulaires plus longs. Lors de la collecte d'informations sur le paiement, par exemple, regroupez les informations sur les clients, les informations de paiement et les informations d'expédition. Trois blocs plus courts sont plus faciles à digérer qu'un long. Utilisez l'espacement intelligent pour que les étiquettes soient connectées au champ qu'elles expliquent, plutôt que l'espacement uniforme entre les éléments de texte et de champ.
- Fini clair / appel à l'action : Rendez le bouton grand et facile à voir. La microcopie à l'intérieur du bouton devrait indiquer aux utilisateurs ce qui se passera, tel que "soumettre", "payer maintenant" ou "passer à l'étape suivante". N'oubliez pas de fermer la boucle de rétroaction et de laisser savoir aux utilisateurs quand un formulaire est correctement soumis.
2. Envisager des étiquettes flottantes
Il y a eu beaucoup de débats sur l'opportunité ou non d'utiliser le texte de conseil dans les champs de formulaire. Le principal problème est que trop souvent, ce texte ne disparaît pas en un clic et que les utilisateurs doivent le supprimer activement pour commencer à taper. C'est étrange.
En outre, le Nielsen Norman Group trouvé les champs vides peuvent attirer l’attention et aider les utilisateurs à saisir les informations plus clairement.
Si vous ressentez le besoin d'utiliser des astuces, envisagez une solution interactive en flottant des étiquettes. Incluez vos informations d'étiquette dans les champs de formulaire afin qu'elles ressemblent à du texte d'espace réservé, mais laissez le texte s'animer et passer à la position supérieure gauche lorsqu'un utilisateur survole ou clique sur le champ. L'étiquette ou le conseil ne disparaît jamais et l'utilisateur ne tente pas de remplir le formulaire. (De plus, la petite animation est une surprise amusante pour les utilisateurs.)
3. Utiliser des masques de terrain
Les masques de terrain peuvent fournir certains des mêmes indices et indices de forme, mais sans entraver la facilité d'utilisation. Un masque de champ n'apparaît qu'une fois qu'un utilisateur a activé un champ et fournit un indice d'analyse supplémentaire pour savoir quelles informations sont nécessaires. Le masque peut aider l'utilisateur en formatant automatiquement les informations dans le but d'éviter les erreurs susceptibles d'entraîner la soumission du formulaire.
Un bon exemple de masque de terrain en action est les numéros de téléphone. Considérez les options de format multiples:
- (000) 000-0000
- 000-000-0000
- 0000000000
Comment un utilisateur sait-il qui fonctionnera? Le champ de formulaire spécifie et ajuste le format en tant que type d’utilisateur, de sorte qu’il n’a pas à y penser et qu’il doit uniquement saisir des chiffres. (Cela évite également de devoir basculer d'un clavier à un autre sur un appareil mobile.)
4. Rendre les formulaires compatibles avec le clavier
Vous n'avez aucun moyen de savoir quel type d'appareil un utilisateur rencontrera sur votre formulaire, mais il devrait être tout aussi facile à remplir de toute façon. Considérez tous les différents types de claviers qui pourraient envoyer des informations au formulaire et ajuster les champs pour détecter et utiliser l'option appropriée.
Sur les ordinateurs de bureau, les utilisateurs doivent pouvoir entrer un formulaire et remplir chaque champ sans avoir à cliquer sur une souris. Avancez automatiquement d'un champ à l'autre à la fin ou utilisez les onglets ou entrez pour vous déplacer. W3.org a un ensemble solide de recommandations clavier pour vous suivre.
Sur les appareils mobiles, faites correspondre le type de clavier aux données requises. Si l'entrée concerne des lettres, affichez le clavier alpha; pour les nombres, ouvrez l'option numérique. De Google: "Les utilisateurs de l'application apprécient les applications qui fournissent un clavier approprié pour la saisie de texte. Assurez-vous que cela est implémenté de manière cohérente dans l’application plutôt que pour certaines tâches seulement, mais pas pour d’autres. "
5. Optez pour le format vertical
Les formulaires verticaux sont plus faciles pour les utilisateurs que les formats à colonnes multiples. La règle de la meilleure pratique consiste à s'assurer que tous les champs peuvent tenir sur l'écran sans faire défiler de haut en bas.
La seule exception concerne les formulaires très courts, dans lesquels un utilisateur doit uniquement saisir une adresse électronique, un nom et une adresse électronique. Deux colonnes côte à côte suivies d'un bouton d'appel à l'action peuvent fonctionner correctement dans cette situation tant que la boîte aux lettres est suffisamment longue pour permettre aux utilisateurs de voir toutes les lettres de leur adresse.
N'oubliez pas de commander des éléments logiquement sous une forme verticale. Si vous collectez le prénom, le nom, l'adresse e-mail et la couleur des cheveux de cette manière.
6. Limiter la dactylographie
Utilisez autant de solutions de pré-remplissage que possible avec des formulaires. Rien n'est plus agréable que d'ajouter une adresse et après les premiers taps, l'API Google se déclenche et propose des options d'adresse.
Cela fait trois choses:
- Cela facilite la tâche des utilisateurs, en particulier sur les mobiles.
- Cela permet de limiter le nombre de champs nécessaires.
- Cela peut aider à éliminer certaines erreurs de l'utilisateur, telles que les erreurs de frappe.
Considérez la même chose avec les adresses électroniques, de sorte que les utilisateurs reçoivent des domaines de messagerie populaires après le symbole @. Lorsqu'un utilisateur tape [email protected] .... le champ suggère automatiquement [email protégé] .
7. Keep It Short and Sweet
Vous allez être tenté de demander aux utilisateurs beaucoup d’informations sous forme de formulaires. Résistez à la tentation!
Ne demandez des informations vitales que dans des formulaires. Il est plus probable que les utilisateurs remplissent des formulaires nécessitant moins d’engagement. Si vous avez besoin de plus d'informations ultérieurement, vous pouvez les envoyer par courrier électronique à partir de votre liste pour demander des informations supplémentaires. (En tant que personne ayant déjà adhéré, l'utilisateur est plus susceptible de communiquer avec vous pour le moment.)
Évitez les champs optionnels. Ne demandez pas d'informations redondantes. N'utilisez pas plusieurs champs où vous pourriez en utiliser un (numéros de téléphone par exemple).
Conclusion
Donnez aux utilisateurs quelque chose en retour pour remplir un formulaire. Rendez-le amusant ou intéressant. Merci à l'utilisateur.
Créer un formulaire facile à lire et à utiliser augmentera vos chances de collecter des données et de transformer un visiteur de site Web en utilisateur récurrent.