Erreurs de conception que vous faites avec les formulaires mobiles et comment les corriger

Les visiteurs mobiles hésitent toujours à agir. Redéfinissez vos formulaires mobiles et éliminez les frictions et la frustration qui en découlent qui empêchent vos visiteurs de tendre la main ou d'acheter quelque chose.

De plus en plus d'utilisateurs se tournent vers le Web mobile, à la fois sous la forme de sites Web mobiles et d'applications Web progressives . Et bien que Google ne cesse de nous dire de créer des expériences Web axées sur les mobiles il y a juste un problème:

Les utilisateurs mobiles continuent d'être réticents à convertir sur mobile.

Aujourd'hui, je comme pour voir comment vous pouvez améliorer la conception de vos formulaires sur mobile. Peut-être que si nous pouvons accélérer et améliorer la manière dont les utilisateurs mobiles se connectent aux marques (ou achètent auprès d'elles), nous pourrons peut-être résoudre ce problème de faibles taux de conversion mobile.

Concevoir de meilleurs formulaires pour mobile

Bien que les rapports de référence trimestriels de Kibo ne mesurent que les performances du commerce électronique, je le considère toujours comme une bonne référence pour ce qui se passe sur le Web aujourd'hui. Et dans son dernier rapport Kibo continue de signaler une tendance alarmante.

Les consommateurs affluent vers les sites Web mobiles et les PWA en masse – plus que jamais auparavant. C’est la bonne nouvelle.

Au quatrième trimestre 2020, seulement 32,49% des les visites étaient sur ordinateur. Le mobile, en revanche, représentait une part beaucoup plus importante du trafic, 53,55% des visiteurs provenant de smartphones.

Malheureusement, les taux de conversion ne reflètent pas la même tendance. Bien qu'il soit clair que la confiance des consommateurs dans l'expérience mobile augmente, ils ne peuvent pas tout à fait surmonter cet obstacle final, comme le montrent les données suivantes:

Malheureusement, les taux de conversion sont beaucoup plus faibles sur les mobiles, malgré le nombre beaucoup plus important de visiteurs mobiles que de bureau.

Il existe probablement un certain nombre de facteurs qui contribuent à cette disparité. L'un est des vitesses plus lentes et des risques de sécurité plus importants sur les mobiles. Cela dit, le développement des PWA a fait un bien meilleur travail pour traiter ces problèmes.

Honnêtement, il est plus probable qu'il soit tout simplement trop difficile ou fastidieux de convertir sur un écran plus petit.

Alors, voici quelques-uns ce que vous pouvez faire pour faciliter le remplissage de formulaires pour contacter, planifier, essayer ou acheter sur mobile:

1. Rendre le formulaire facile à trouver

Au lieu de se concentrer uniquement sur la promotion des relations par courrier électronique avec les clients payants, les marques peuvent utiliser d'autres formulaires pour établir stratégiquement des relations avec les visiteurs et les prospects par courrier électronique. L'un des moyens les plus courants de le faire est d'offrir un bulletin d'information.

Mais que se passe-t-il lorsque le formulaire est difficile à trouver?

Prenez celui-ci sur le site Web Entrepreneur :

Bien que le gros bouton bleu puisse aider les visiteurs à repérer le formulaire, je crains qu'il se fond trop dans le thème sombre. De plus, ce formulaire apparaît dans le pied de page du site Web mobile, qui nécessite beaucoup de défilement pour y accéder. Si vos taux d'inscription au formulaire mobile sont faibles, le problème peut être aussi simple que le placement.

Vous trouverez un meilleur exemple du même type de formulaire d'abonnement sur le site Web mobile Moz :

Ce formulaire de newsletter a en fait sa propre page. Cela n'a pas besoin de se produire avec chaque formulaire de votre site mobile, car vous pouvez tout aussi facilement placer cette section capturée dans un espace dédié sur la page d'accueil. Cependant, cette option vous montre à quel point cette forme est plus invitante lorsqu'on lui donne de l'espace pour respirer.

Moz prend le temps de faire de cette forme une invitation chaleureuse et accueillante. Il indique alors parfaitement où se trouvent le champ de formulaire et le bouton. Il n'y a pas de fusion ou de masquage des éléments du formulaire. Tout est ouvert.

2. Supposons que vous deviez tout épeler

Il est très facile de perturber l'expérience mobile. Afficher une fenêtre contextuelle au mauvais moment. Placez un bouton trop haut sur la page. Utilisez des couleurs à faible contraste. Parfois, ce ne sont que les petits hoquets qui créent des frictions dans l'expérience mobile. Et vos formulaires sont remplis de minuscules «choses».

Regardons la façon dont le texte est présenté et comment cela pourrait ralentir quelqu'un en remplissant un formulaire ou créer de la frustration alors qu'il ne devrait pas y en avoir.

un formulaire d'inscription à la newsletter sur le site Pure Formulas :

[19659007] Il y a quelques problèmes avec le texte. Mais concentrons-nous sur l’absence de contexte pour l’instant.

Pour commencer, il n’ya pas de description. En d'autres termes, qu'est-ce que les abonnés obtiendront lorsqu'ils s'inscriront:

• Mises à jour par e-mail sur les nouveaux produits?
• Recommandations personnalisées?
• Remises exclusives?

Il suffit d'une phrase ou deux pour expliquer pourquoi cela vaut la peine d'échanger ses coordonnées pour ces e-mails. Sans cela, il est beaucoup plus facile de transmettre cette offre.

Il y a la question de savoir comment les étiquettes sont traitées. Ils ne doivent jamais être à l'intérieur des champs, mais plutôt directement au-dessus d'eux. De cette façon, personne ne risque de placer son curseur dans le champ, de perdre de vue l’étiquette et d’oublier ce qu’il devait remplir en premier lieu. Certes, c'est une forme assez simple, donc cela ne se produira probablement pas ici, mais on ne sait jamais.

The Vitamin Shoppe a un meilleur exemple à suivre:

Accordé, Le Vitamin Shoppe place l'étiquette «Adresse e-mail» dans le champ. Cela dit, il fournit des informations utiles au-dessus du formulaire qui permettent aux visiteurs de savoir ce qu'ils obtiennent en retour.

En tant que meilleure pratique, je vous recommande de fournir un contexte pour n'importe lequel de vos formulaires mobiles. Ce n’est pas comme si vos visiteurs ne savaient pas comment remplir des formulaires en ligne. Cependant, certains éléments d'un formulaire diffèrent d'un site à l'autre. De plus, ce n’est jamais une mauvaise idée de définir des attentes et de leur faire savoir ce qui se passera après avoir cliqué sur le bouton et envoyé leur soumission.

3. Renforcer la validation des erreurs

C’est ennuyeux de prendre le temps de remplir quelque chose pour se rendre compte que vous avez manqué un champ ou que vous avez fait quelque chose de mal. Personne n'a le temps pour une mauvaise validation des erreurs lorsqu'il s'agit de formulaires, mobiles ou autres.

Pourtant, lorsque quelqu'un remplit le formulaire d'abonnement sur le site Web Nielsen Norman Group et que quelque chose ne va pas, il n'entend jamais

Lorsqu'un visiteur remplit le formulaire, aucune validation n'est fournie. Dans l'exemple ci-dessus, la seule information que j'ai fournie était une seule lettre dans le champ «Nom». Lorsque j'ai cliqué sur le bouton «S'abonner», la soumission s'est déroulée sans problème et sans message de confirmation non plus. Pour être honnête, je ne suis même pas sûr que ce formulaire fonctionne… et ce n'est pas la réponse que vous voulez que quiconque ait à l'un de vos formulaires.

Au lieu de cela, votre formulaire doit toujours fournir une validation tandis que le formulaire est en cours de remplissage. Si vous le souhaitez, vous pouvez modéliser la validation de votre formulaire après celle de Salesforce :

Il s'agit d'un formulaire d'inscription à un rapport Salesforce. Lorsqu'un champ est ignoré ou mal rempli, il devient rouge, affiche une icône d'avertissement et affiche un message qui invite le visiteur à résoudre le problème. Lorsqu'un champ est correctement rempli, une coche verte apparaît.

Cette stratégie est excellente car elle utilise non seulement la couleur pour fournir une validation rapide aux visiteurs, mais elle utilise également du texte et des icônes à des fins d'accessibilité.

Pour plus de temps -consuming des formulaires, vous voudrez peut-être aussi intégrer une sécurité intégrée.

Pour ce faire, vous devrez rendre le bouton d'envoi inactif jusqu'à ce que tous les champs soient correctement remplis. Ensuite, tous les champs sont remplis et les problèmes résolus, le bouton passera d'une conception inactive (généralement grise ou décolorée et non cliquable) à active (de couleur vive et cliquable).

4. Oversimplify with Automation

Moins vos visiteurs auront à faire de travail – cliquer, faire défiler, revenir en arrière, etc. – plus ils seront confiants quand viendra le temps de cliquer sur le bouton à la fin du formulaire.

Quand possible, utilisez l'automatisation et d'autres étapes de simplification pour les aider.

Par exemple, il s'agit d'un formulaire sur le site Web Booking.com :

Une fois le champ «Adresse e-mail» sélectionné, j'ai commencé à saisir mon adresse e-mail . Lorsque je suis arrivé au «@», cela m'a donné un certain nombre d'options de remplissage automatique, ce qui m'a évité d'avoir à taper le reste.

La ​​commutation automatique du clavier par champ est une autre fonctionnalité cruciale à inclure dans chaque forme que vous concevez. De cette façon, les utilisateurs n'ont pas à se soucier de mettre les noms en majuscules, de localiser le pavé numérique pour les numéros de téléphone ou de taper «@ gmail.com» à chaque fois.

Il existe un autre moyen de simplifier la façon dont vos formulaires mobiles sont remplis .

Lorsque vous avez quelque chose avec un composant heure / date, vous pouvez faire ce que Massage Envy a fait:

Ce formulaire supprime complètement les champs traditionnels. Lorsque vous demandez aux invités de choisir une date, un calendrier leur est présenté avec les options disponibles. Et, en dessous, il y a des boutons avec des plages horaires disponibles.

De cette façon, les invités n'ont pas à basculer entre leur propre calendrier et cette application pour effectuer une réservation. Il est intégré directement dans le formulaire pour eux. De plus, les boutons de plages horaires et les filtres / tri disponibles sur la page suivante réduisent le nombre d'options parmi lesquelles choisir:

Il existe, bien sûr, d'autres moyens de simplifier le nombre de saisies par vos utilisateurs dans vos formulaires mobiles. Prenez les formulaires de paiement, par exemple. Plutôt que de les forcer à saisir leur adresse de facturation et leur adresse postale, car elles sont probablement identiques, incluez simplement une case à cocher qui duplique les informations.

Conclusion: donnez un coup de main à vos visiteurs et clients chaque fois que vous le pouvez. Bien qu'il soit vraiment important de commencer avec un formulaire attrayant, rien de tout cela ne signifiera rien s'ils perdent constamment des clics et du temps avec un formulaire inefficace.

Conclusion

Les utilisateurs étant si réticents à convertir sur mobile , nous devons faire tout ce qui est en notre pouvoir pour éliminer les obstacles qui se dressent sur leur chemin. Pensez à la grande différence que cela ferait pour les visiteurs qui, autrement, entreraient sur votre site sur mobile et termineraient l'expérience sur ordinateur (s'ils se souviennent même de le faire).

En concevant vos formulaires de manière à ce qu'ils soient aussi faciles à remplir que ils sont sur des appareils plus grands, vous ne ferez qu'ajouter à la liste croissante des raisons pour lesquelles le mobile est le meilleur pour l'expérience utilisateur.