Essentials pour transformer les prospects en conversions

Est-il possible de placer un formulaire dans deux colonnes?

montré que les formes à une seule colonne sont meilleures que celles à plusieurs colonnes. Pourquoi ça? La façon dont nous faisons défiler un site Web est similaire à la façon dont nous remplissons un formulaire: aller de haut en bas, rester concentré sur le contenu. Un formulaire avec des colonnes parallèles peut facilement induire les utilisateurs en erreur et les distraire. Pour conserver les utilisateurs dans le flux et ne pas interrompre l'orientation verticale, placez les champs les uns au-dessous des autres dans une seule colonne. Bien sûr, chaque règle a ses exceptions. Comme dans le cas ci-dessous, des champs courts ou logiquement contigus (numéro de mobile, ville, état et indicatif régional) peuvent être placés dans une ligne

Si le formulaire a une structure assez compliquée (comme la caisse dans une boutique en ligne ou la phase d'enregistrement dans une plateforme de prêt), il peut être divisé visuellement en groupes sémantiques, avec un espace supplémentaire ou des en-têtes. Cela donnera aux utilisateurs le sentiment de progresser dans la forme sans se sentir dépassés.

Où les étiquettes doivent-elles être placées?

Les étiquettes indiquent aux utilisateurs quelles informations appartiennent à un champ de formulaire donné, et elles sont généralement positionnées à l'extérieur du champ de formulaire. Tout récemment, il n'y avait que deux variantes pour le placement des étiquettes: au-dessus des champs et justifiées à gauche. Il y a quelque temps, une alternative est apparue: les designers ont commencé à animer des formulaires et à cacher des étiquettes dans des espaces réservés. Il y a eu beaucoup de disputes sur la meilleure façon de montrer les étiquettes, mais toujours pas de réponse définitive. Une chose est claire: le placement de l'étiquette dépend de la situation. Regardons attentivement chaque option

Placer des étiquettes au-dessus des champs

Ceci est le placement d'étiquettes le plus courant et, comme validé par la recherche UX de Google pour de bonnes raisons. Il s'adapte mieux aux tailles de smartphone, ce qui est essentiel pour le balisage responsive.

Justifier les étiquettes laissées

Cela peut être le meilleur choix si vous devez afficher des champs de saisie de données plus grands.

Les étiquettes justifiées à gauche obtiennent plus d'attention et ne se fondent pas dans d'autres champs. De plus, le formulaire de contact occupera moins d'espace verticalement. Mais gardez à l'esprit qu'une telle approche fonctionne bien uniquement pour les vues de bureau; pour les mobiles, la taille est un problème (l'écran est trop étroit pour une étiquette et un champ placés à gauche). Cela pourrait causer des problèmes aux utilisateurs, qui pourraient ne pas être en mesure de voir les données d'entrée dans des erreurs de frappe complètes ou ponctuelles avant de soumettre le formulaire. Pour éviter que des formulaires erronés ne soient soumis, vous devrez créer des prototypes supplémentaires pour rendre le site Web plus convivial pour les smartphones.

Placer des étiquettes à l'intérieur des champs (étiquettes alignées sur le terrain)

Les étiquettes interactives placées à l'intérieur du champ deviennent plus populaires auprès des concepteurs UX pour leur scannabilité avant de les remplir . L'animation peut être différente, mais le processus est le même: Après avoir cliqué sur le champ avec l'espace réservé d'étiquette, l'étiquette ne disparaît pas, mais se déplace vers le haut du champ, permettant à l'utilisateur d'entrer les données.

Les avantages de cette approche sont évidents: elle économise de l'espace et l'animation est compréhensible pour l'utilisateur. Mais l'animation sous forme n'est pas toujours la meilleure solution. Cela dépend du contexte de la forme. Si vous travaillez sur un formulaire avec très peu de champs (une boîte de connexion ou une boîte de newsletter), les étiquettes alignées en haut ne sont pas si nécessaires car il n'y a pas beaucoup d'informations que l'utilisateur doit rappeler. Cela fonctionne mieux sur les formes complexes avec plusieurs sections. Malgré les avantages de cette méthode, pensez aussi à la manière dont les sélections déroulantes vont ressembler à l'animation.

Néanmoins, les marques substitutives des labels interactifs gagnent un mile par rapport aux marques statiques. Lorsque l'on clique sur le champ, l'étiquette monte, restant visible, tandis que la statique disparaît tout simplement

Peut-on utiliser le texte d'espace réservé à la place d'une étiquette?

Il existe plusieurs façons de fournir des indices; l'un d'eux est une implémentation commune d'instructions dans des champs de formulaire. Malheureusement, les tests effectués par les utilisateurs montrent continuellement que les espaces réservés dans les champs de formulaire nuisent souvent plus à l'utilisabilité qu'à l'aide. Ils peuvent compliquer le processus de remplissage d'un formulaire d'une manière sérieuse, surtout si le formulaire comprend plus d'une douzaine de champs. Le texte de l'espace réservé qui disparaît stresse la mémoire à court terme des utilisateurs. Il est difficile pour les personnes de se souvenir des informations qui appartiennent à un domaine et de vérifier et corriger les erreurs. Cela impose également un fardeau supplémentaire aux utilisateurs ayant des déficiences visuelles et cognitives.

Comme nous l'avons vu, la difficulté est de garder le texte de l'espace réservé hors de vue lorsque l'utilisateur clique sur le champ pour le remplir. Sans étiquettes, l'utilisateur ne peut pas vérifier son travail avant de soumettre le formulaire. Ils pourraient facilement oublier quelles données ils doivent remplir dans le champ actuel et si les précédents sont exempts d'erreurs – il y a toujours un gros risque de fausse information. L'utilisateur devrait révéler le texte d'espace réservé en supprimant le texte dans chaque champ un par un, afin de vérifier que leur entrée satisfait à la description. En fait, beaucoup ne réaliseront même pas le potentiel d'erreur, et ils ne feront pas l'effort de revérifier.

Aussi, une telle approche ne serait pas confortable pour les utilisateurs qui se déplacent d'un champ à l'autre en appuyant sur la touche Tab, car ils ne s'habitueront pas à analyser les données dans le champ suivant avant d'y accéder. Texte d'espace réservé qui disparaît lorsque le curseur est placé dans le champ de formulaire irrite les utilisateurs qui naviguent avec le clavier.

Malgré les inconvénients, il y a des cas où l'utilisation d'une étiquette comme espace réservé est tout à fait appropriée. Par exemple, pour un abonnement à la newsletter, nous ne pouvons remplir qu'un seul champ, "Email".

Comment réduire la charge cognitive d'un formulaire

Espacer l'affichage

Une étiquette et son champ doivent être regroupés visuellement, afin de ne pas confondre les utilisateurs et de leur permettre de comprendre quelle étiquette appartient à quel champ. De même, évitez le remplissage lâche, où les étiquettes sont placées à égale distance entre deux champs.

Auto-focus Le premier champ de saisie

L'autofocus guide les utilisateurs vers le point de départ du formulaire. Nous vous recommandons de souligner le premier champ avec une couleur de bordure d'accentuation, une couleur de fond ou les deux. En appelant l'utilisateur pour le remplir, vous accélérerez l'enregistrement ou l'achat.

Ne jamais utiliser de majuscules

Étiquettes écrites en majuscules, en particulier dans des formes qui comprennent trois à quatre champs. Les lettres toutes capitalisées sont difficiles à lire. En outre, ils donnent l'apparence de cris.

Les boutons sont-ils considérés comme faisant partie de l'UX d'un formulaire?

Un bouton est destiné à indiquer aux utilisateurs de prendre une action. C'est pourquoi la conception des boutons doit toujours porter sur la reconnaissance et la clarté. Pensez à votre site Web ou à votre application en tant que partie d'une conversation lancée par un utilisateur occupé. Le bouton joue un rôle crucial dans cette conversation.

Le bouton devrait expliquer l'action à entreprendre

Une bonne boîte de dialogue ne consiste pas simplement à demander aux utilisateurs quelle action ils veulent effectuer. Il s'agit également de rendre chaque option aussi claire que possible. C'est pourquoi il est si important d'avoir une étiquette distincte pour chaque option, qui sert d'aide "juste à temps", donnant aux utilisateurs plus de confiance dans leur sélection de l'action correcte.

Nommez le bouton pour expliquer ce qu'il fait, plutôt que en utilisant une étiquette générique (comme "OK"). BettingExpert a reçu 31,54% de plus d'inscriptions en changeant un simple verbe en une phrase d'incitation à l'action. Utilisez un verbe autant que possible, au lieu de "Oui" ou "OK", car vos boutons auront du sens hors contexte avec le texte explicatif ou le titre. Gardez à l'esprit que votre CTA doit refléter l'intention de l'utilisateur. Par exemple, s'il s'agit d'un enregistrement, alors évidemment appelez le bouton "Enregistrer".

Séparer les actions primaires de celles secondaires

L'action principale associée à un formulaire doit avoir un poids visuel plus fort. Les actions secondaires doivent avoir le poids visuel le plus faible, afin de minimiser le risque d'erreur et d'orienter les gens vers un résultat positif. Les boutons d'action de base doivent être fortement marqués, alors qu'il suffit d'appuyer sur les boutons d'action secondaire.

Utilisez les boutons primaires et secondaires correctement. Si vous avez deux boutons, un primaire et un secondaire, différenciez-les visuellement pour réduire les erreurs. Étant donné que c'est plus important, le bouton principal devrait être plus visible.

Mettre en surbrillance les boutons

Ne pas activer le bouton tant que tous les champs de formulaire ne sont pas terminés. Cela peut être une excellente solution pour aider l'utilisateur à vérifier visuellement ses données avant de les envoyer.

Est-il possible de faciliter le remplissage d'un formulaire?

Ajouter le remplissage automatique

L'automatisation de l'entrée de l'utilisateur évite les erreurs en coupant les champs qu'il doit remplir. En outre, selon recherche de Google le remplissage automatique aide les gens à remplir les formulaires 30% plus rapidement. Si l'utilisateur est déjà enregistré avec votre service, remplissez automatiquement les données de son compte dans les champs appropriés à l'étape de la validation. En outre, sachez que vous pouvez remplir automatiquement les champs de texte de la ville et de la région en fonction du code régional ou des données de géolocalisation. Ne pas oublier de laisser ces champs disponibles pour l'édition pour donner le contrôle aux utilisateurs.

Ne pas oublier les entrées masquées

Ceci est un plugin qui formate automatiquement un champ. Une telle solution convient bien aux dates, heures, numéros mobiles et plus encore. Ce plugin rend le remplissage d'un formulaire beaucoup plus facile. Les utilisateurs ne poseront pas plus de questions car tout est clair pour eux.

Soyez inventif

Utilisez la longueur du champ comme indice pour la réponse. Cela est logique pour les champs qui ont un nombre limité de caractères, tels que le champ de numéro de mobile, l'adresse de domicile et l'indicatif régional.

Évitez les sélections déroulantes avec seulement deux ou trois options

Au lieu des listes déroulantes, utilisez les boutons radio pour faire passer votre message rapidement et ne pas ralentir l'utilisateur. Tout doit être clair sans clics supplémentaires.

Valider les formulaires

La validation des formulaires est cruciale . Distinguez les champs où des erreurs sont détectées et expliquez pourquoi le champ n'a pas été validé

Aussi, explique toutes les exigences pour les données et leur format. Si le mot de passe d'un utilisateur doit inclure six symboles, mentionnez-le. Ne faites pas deviner les utilisateurs. Rendre le processus maniable et compréhensible.

Ajouter des commodités pour éviter les erreurs courantes dans le champ Mot de passe

Cela peut être un aperçu du mot de passe ou une autre possibilité pour les utilisateurs de vérifier leurs données avant de les envoyer. En outre, si votre service a des exigences particulières pour les mots de passe, informez-en les utilisateurs avant qu'ils ne remplissent le champ.