Fermer

avril 6, 2018

Essentials pour transformer les prospects en conversions

Essentials pour transformer les prospects en conversions - Smashing Magazine


Aimes-tu remplir des formulaires? Je ne pensais pas. Ce n'est pas ce que nous voulons d'un service. Tout ce que l'utilisateur veut, c'est acheter un billet, réserver une chambre d'hôtel, faire un achat et ainsi de suite. Remplir une forme est un mal nécessaire qu'ils doivent affronter. Est-ce que cela vous décrit? Alors, qu'est-ce qui affecte réellement l'attitude d'une personne à soumettre un formulaire?

Les champs de formulaire sont en fait l'outil le plus important pour l'interaction utilisateur-service, quel que soit le formulaire utilisé – formulaire d'abonnement ou formulaire étape par étape

Dans cet article, nous examinerons les questions les plus courantes des stagiaires en design de notre société. Vous trouverez ci-dessous des FAQ et des réponses sur la façon de rendre les formulaires de site Web conviviaux, ainsi que des astuces pour éviter les interactions réduites.

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

 Le cas approprié de placer des champs dans une ligne
Placer des champs dans une ligne. ( Grand aperçu )

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.

 Simplifier la perception des formes avec une structure compliquée en les divisant en groupes sémantiques
Diviser les formes en groupes sémantiques. ( Grand aperçu )

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.

 Avantage de placer des étiquettes au-dessus des champs
Placer des étiquettes au-dessus des champs. ( Grand aperçu )

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.

 Avantage de placer des étiquettes justifiées à gauche
Placer des étiquettes justifiées à gauche. ( Grand aperçu )

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.

 Avantage de placer des étiquettes interactives
Placer des étiquettes interactives. ( Grand aperçu )

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.

 Inconvénient de placer du texte d'espace réservé à la place des étiquettes
Texte réservé à la place des étiquettes. ( Grand aperçu )

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

 Avantage de placer un texte d'espace réservé à la place d'étiquettes
Texte d'espace réservé à la place d'étiquettes dans un formulaire d'abonnement. ( Grand aperçu )

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.

 Les étiquettes regroupées visuellement simplifient la perception d'un formulaire
Les étiquettes regroupées visuellement. ( Grand aperçu )

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.

 Mettez en surbrillance le champ pour boucler le processus de remplissage
Auto-focus sur le premier champ de saisie. ( Grand aperçu )

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.

 Inconvénients d'utiliser des étiquettes écrites avec des majuscules
Étiquettes écrites avec Caps Lock. ( Grand aperçu )

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

 Appel à l'action dans le bouton
Le bouton devrait expliquer son action. ( Grand aperçu )

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.

 Séparer l'action de base des boutons secondaires
Le bouton principal devrait être plus visible. ( Grand aperçu )

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.

 Composez le bouton jusqu'à ce que toutes les données soient remplies
N'insistez pas sur le bouton tant que les données ne sont pas remplies. ( Grand aperçu )

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.

 Ajouter une fonction de remplissage automatique pour simplifier le processus de remplissage des formulaires
Le remplissage automatique est basé sur les données de géolocalisation. ( Grand aperçu )

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.

  Implémenter le plugin pour insérer automatiquement le format correct dans le champ
Astuces fournies par l'entrée masquée. ( Grand aperçu )

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.

 Fournir plus de conseils pour simplifier la perception du formulaire par les utilisateurs
répondre. ( Grand aperçu )

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

 Utiliser des boutons radio sans avoir besoin de clics supplémentaires
Utiliser des boutons radio au lieu de tables déroulantes. ( Grand aperçu )

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é

 Singularisez les champs où des erreurs sont détectées avec la fonction de validation de formulaire
Form Validation. ( Grand aperçu )

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.

 Rendre disponible l'aperçu du mot de passe
Empêcher les erreurs dans le champ mot de passe. ( Grand aperçu )
À propos, en remplissant le champ de mot de passe, assez souvent, l'utilisateur fera face à un problème connu – par exemple, le verrouillage des majuscules est sur – et a oublié à ce sujet. Nous vous recommandons d'avertir les utilisateurs d'un bouton de verrouillage des majuscules pressé pour empêcher les formulaires abandonnés ainsi qu'une association négative avec le site Web.

 Avertir les utilisateurs du bouton de verrouillage des majuscules pressé
Le bouton Verr Maj est enfoncé. ( Grand aperçu )

Autoriser les utilisateurs à utiliser les médias sociaux

La connexion sociale pourrait être un outil très puissant; Cela fait gagner beaucoup de temps aux utilisateurs. Si vous proposez une inscription rapide en utilisant les médias sociaux, n'oubliez pas d'assurer les gens de la sécurité de leurs données de médias sociaux et d'expliquer exactement quelles informations vous avez besoin. En outre, informez les utilisateurs que vous n'utiliserez pas leurs données sans autorisation . Juste pour renforcer leur sentiment de sécurité, vous pouvez ajouter une icône de verrouillage. Restez du côté de l'utilisateur et veillez à sa sécurité.

 La connexion sociale permet aux utilisateurs de gagner énormément de temps
Autorisation via un compte de médias sociaux. ( Grand aperçu )

L'emplacement de l'utilisateur influence-t-il l'UX d'un formulaire?

Oui, souvenez-vous des différences locales. Si un service est conçu pour deux marchés locaux et plus (comme les États-Unis, l'Europe et l'Asie), soyez sensible à la diversité des différences entre eux. Il n'est pas surprenant que les noms de champs, d'astuces, d'intrants et autres varient en fonction de la région.

Voici quelques éléments auxquels il faut prêter attention:

  • Chaque pays a son propre format numérique.
  • Les États-Unis disent le code postal, alors qu'en Europe, c'est le code postal
  • Le champ "state" n'est nécessaire qu'aux États-Unis.
 Tenir compte des différences locales lors de la conception des formulaires
formes avec des différences locales. ( Grand aperçu )

Conclusion

Comme nous pouvons le voir, concevoir un bon formulaire d'inscription est délicat. Le design UX est important . Pour améliorer l'expérience utilisateur, le concepteur doit se mettre à la place de l'utilisateur. Ne risquez pas de décevoir les utilisateurs ou de perdre un temps précieux à essayer de comprendre comment fonctionne votre formulaire. Rendez votre formulaire clair dès le début, avec des étiquettes visibles placées en dehors des champs de formulaire vides. Les formulaires sont une partie importante de nombreux objectifs de conversion, alors assurez-vous que vos utilisateurs puissent les passer rapidement et avec précision.

 Editorial de Smashing (da, ra, al, yk, il)



Source link