7 conseils pour une meilleure conception de formulaire de contact (avec exemples)

Une meilleure conception des formulaires de contact commence par la convivialité. Le but d'un formulaire est évident: vous avez besoin d'informations de la part de l'utilisateur. Le formulaire doit être suffisamment intuitif pour que les utilisateurs sachent exactement quoi faire et ne se laisseront pas distraire pendant le processus.

Les meilleurs formulaires de contact sont faciles à consulter et incluent des éléments facilement utilisables que les utilisateurs peuvent utiliser sans y penser. (Cela semble un peu plus facile que parfois.) Mais heureusement, nous avons une sélection de conseils pour vous aider à concevoir de meilleurs formulaires de contact.

1. Faites-en une colonne

Les formulaires verticaux fonctionnent bien car les utilisateurs sont habitués au défilement. Cela facilite la visualisation du début et de la fin du formulaire.

Quoi de plus facile? Tabulation verticale dans un formulaire ou remplissage d'éléments à travers l'écran? La création d'un formulaire avec une seule colonne verticale est la solution la plus simple pour de nombreux utilisateurs, car ils ne doivent penser qu'à une seule action: parcourir l'écran à travers le formulaire.

Le peut fonctionner pour des champs similaires, tels qu'une réponse courte pour un nom, une adresse électronique et un numéro de téléphone. Cela peut également bien fonctionner pour des éléments tels qu'un écran de paiement.

Cette forme fonctionne également mieux avec les formats réactifs afin que la forme ait la même forme sur différents périphériques, offrant une expérience utilisateur plus cohérente. Cela peut être particulièrement important avec les formulaires de commerce électronique ou de paiement, car vous ne voulez pas que l'expérience change, ce qui pose des questions sur la validité et la crédibilité du formulaire.

2. Grouper le contenu de manière logique

De petits blocs de questions ou de champs de formulaire regroupés visuellement peuvent faciliter la compréhension d'un formulaire. Conservez les éléments similaires ensemble (tels que les informations d'adresse ou les champs de paiement) et regroupez les éléments avec leurs étiquettes et tout autre texte d'instruction. Les utilisateurs ne doivent jamais se demander à quel champ une étiquette ou une instruction se rapporte.

Les regroupements logiques de contenu créent un flux pour le formulaire, dans lequel les utilisateurs peuvent anticiper les informations à venir. Cela rend l'expérience facile et agréable.

3. Placez les étiquettes au-dessus du contenu

La plupart des outils de création de formulaires vous offrent de nombreuses options pour placer des étiquettes ou des info-bulles. Résistez à la tentation d'être trop créatif et placez les étiquettes au-dessus du champ où l'information circule. C'est le placement le plus courant et le plus utilisable pour les étiquettes.

De plus, ce placement se convertit facilement à d'autres appareils. Pensez au formulaire sur un téléphone plutôt que sur un bureau, par exemple. Si le formulaire précède l'étiquette, vous pouvez planifier les informations à insérer dans le champ avant même d'y accéder, et ces informations resteront affichées jusqu'à ce que le champ de formulaire soit complet. Mais si l'étiquette est en dessous du champ, vous pourriez vous retrouver coincé dans un schéma de défilement vers le bas, puis de nouveau vers le haut pour voir les instructions et remplir le formulaire.

Bien que cela puisse maintenant sembler un gros problème, cela peut être frustrant pour les utilisateurs. Et avec des formulaires plus longs, cela peut entraîner des erreurs dans tout le formulaire. C’est un problème majeur d’utilisabilité dans la conception de votre formulaire de contact.

4. Ne demandez pas trop d'informations

Moins les utilisateurs sont engagés et fidèles, moins ils acceptent de champs pour mener à bien une action.

Les formulaires les plus courts sont plus susceptibles d'être remplis complètement que les formulaires longs qui demandent des informations inutiles. (Avez-vous vraiment besoin de saisir le type de carte de crédit que vous avez sur une page de paiement? La réponse est non, le numéro indique le type de carte, évitez donc que les utilisateurs entrent cette information inutile.)

Moins les utilisateurs sont engagés et fidèles, moins ils acceptent de champs pour mener à bien une action. Pour les nouveaux utilisateurs, il est correct de demander une adresse électronique. Attendez un email de confirmation (une fois qu'ils sont un peu plus investis) ou un suivi pour développer les informations recueillies en incluant un nom, un code postal ou un anniversaire.

Les formulaires simples et courts ont des taux d'engagement plus élevés que les formulaires de contact longs et exhaustifs. Concevoir de manière appropriée.

5. Rendre le bouton évident

Assurez-vous que la micro-copie dans le bouton vous indique exactement ce qui se passe

Une fois que l'utilisateur a rempli chaque champ du formulaire, l'action finale est-elle évidente? Trop souvent, la création d'un bouton facile à voir est l'étape oubliée de la conception de formulaire. Le bouton doit être clairement visible. Utilisez une couleur spécifique au bouton final et assurez-vous que la micro-copie à l'intérieur du bouton vous indique exactement ce qui se passe (soumission, paiement complet, etc.).

Astuce Bonus: Si vous utilisez un captcha ou un autre type de défi humain, placez-le entre le dernier champ du formulaire et le bouton d'envoi. (Il n'y a rien de plus énervant que de cliquer sur Soumettre uniquement pour que le captcha vous oblige à répéter l'action ou, pire, vous oblige à recommencer.)

Oh, et un autre conseil qui va sans dire? informer les utilisateurs quand un formulaire est rempli avec succès! Un simple? Merci? le dialogue suffit souvent.

6. Utiliser les types de champs appropriés

Un bon concepteur de formulaire sait qu'un type de champ ne convient pas à toutes les informations. Faites correspondre le type de champ aux données collectées pour permettre aux utilisateurs de remplir les formulaires plus facilement. Vous n'utiliseriez pas de menu déroulant pour un numéro de téléphone, n'est-ce pas?

Bien que ce soit une de ces astuces qui semble totalement évidente, cela arrive souvent trop souvent.

Pensez à ce champ dans un formulaire de contact: le meilleur moyen de me contacter est par email ou par téléphone. L'utilisation d'un bouton indique clairement que l'utilisateur doit en sélectionner un. L'utilisation d'un menu déroulant est une action trop complexe pour un choix. Et vous n'avez certainement pas besoin de cela comme champ de réponse courte.

L'utilisation du type de champ approprié facilitera non seulement les formulaires pour les utilisateurs, mais simplifiera également la collecte et l'analyse de vos données.

7. Valider les données si possible

Vous n'aimez pas simplement quand un formulaire vous signale des erreurs au fur et à mesure, plutôt qu'à la fin?

N'aimez-vous pas quand un formulaire vous informe d'erreurs comme vous allez plutôt qu'à la fin? Non seulement vous pouvez voir et corriger l'erreur, mais cela vous fait gagner du temps et vous évite des maux de tête.

Utiliser la validation sur les formulaires de contact est un must. De la confirmation qu'une adresse électronique suit le format correct à la validation du nombre de chiffres pour un code postal ou un numéro de téléphone, ces petites choses peuvent faire une grande différence.

Et si vous ne le faites pas, vous êtes dans la minorité. Une étude du Baymard Institute montre que 60% des formulaires utilisent la validation en ligne. Il ne s’agit donc pas simplement d’un outil d’utilisabilité, il est en train de devenir rapidement un modèle d’utilisateur généralement accepté (et des attentes).

Conclusion

Les deux types de formulaires les plus populaires dans les projets de conception de sites Web sont probablement les inscriptions par courrier électronique et les formulaires de contact. Commencez par vous assurer que ces formulaires sont correctement configurés et modifiez leur conception pour les rendre plus utilisables. (Si vous remarquez beaucoup plus d'engagement, cela fonctionne probablement.)

Les mêmes concepts peuvent être appliqués aux formulaires tout au long de la conception, ainsi qu'aux enquêtes, aux pages de paiement et à la collecte de données. Ces concepts s'adaptent à tous les types d'éléments de site Web où l'utilisateur doit entrer des informations pour mener à bien un processus.