Optimisation des formulaires pour les appareils mobiles - Les formulaires

Les formulaires sont utilisés sur les sites Web pour collecter des informations auprès des utilisateurs. Les sites utilisent ces informations pour effectuer des transactions et des enregistrements, ou pour effectuer d'autres tâches telles que la soumission d'une demande d'indemnisation en ligne.

Lorsque vous concevez des formulaires pour des appareils mobiles, il est important de garder à l'esprit l'expérience du mobile physique. Si vous rendez votre formulaire lent à charger ou trop compliqué, vos visiteurs abandonneront probablement le formulaire au milieu, ou même avant qu'ils ne commencent.

Gardez ces bonnes pratiques à l'esprit lors de la conception de vos formulaires adaptés aux mobiles:

• Gardez des formulaires courts et doux. Rendez vos formulaires faciles à remplir en minimisant le nombre de champs obligatoires. Avoir un champ pour "Nom" plutôt que deux champs pour le prénom et le nom est un bon exemple d'un moyen facile de rendre votre formulaire un champ plus court.

  Demandez trop et vous risquez de ne rien obtenir du tout.

• Quand ils ne peuvent pas être courts, créez des formulaires multipages. Si vous devez avoir un formulaire long, divisez-le en plusieurs pages, ne présentez que quelques champs au-dessus de la ligne de flottaison sur chaque page ("au-dessus du pli" signifie avant de commencer à défiler) incluez clairement les boutons Suivant afin que les visiteurs n'aient pas à faire défiler excessivement. Une barre de progression peut également aider les utilisateurs à rester fidèles aux formulaires mobiles multipages.

• Faites en sorte que le bouton Soumettre et les champs du formulaire correspondent à la taille du doigt. Vos utilisateurs mobiles remplissent des formulaires du bout des doigts. Vos champs et boutons doivent donc être assez grands pour faciliter l'interaction avec le bouton. Il n'existe aucune taille standard qui fonctionne le mieux pour tous les appareils mobiles, mais la création de boutons et de champs de formulaire de 44 pixels de large sur 44 pixels de haut est généralement une règle de base sûre.

• Réduisez la saisie en utilisant les menus déroulants, les cases d'option et les réponses sélectionnées automatiquement. Tout ce que vous pouvez faire pour limiter le nombre de caractères requis contribuera à accélérer le processus et à améliorer la satisfaction de vos clients. Par exemple, si votre formulaire demande un état, laissez les utilisateurs sélectionner leur état dans un menu déroulant afin qu'ils n'aient pas à le saisir.

• Rendez ce que vous demandez clair. Au-dessus de chaque champ, spécifiez clairement ce que vous voulez que l'utilisateur place dans le champ de formulaire. Si vous demandez un anniversaire, par exemple, clarifiez si le formulaire veut que l'année de naissance soit inscrite en deux ou quatre chiffres. Voir un exemple de Progressive.

  

  Montrez aux utilisateurs comment entrer les informations sur la date de naissance.

  Si vous demandez une information qui nécessite des explications supplémentaires, y compris un bouton qui offre plus d'informations lorsque vous êtes sur écoute (souvent appelé info-bulle ) peut aider l'utilisateur à utiliser son expérience.Voici un formulaire utilisant une info-bulle pour expliquer ce que signifie CCV.

  

  Un bouton d'info-bulle explique l'exigence du champ de formulaire.

• Spécifiez clairement les champs requis. Si votre formulaire comporte plusieurs champs, assurez-vous que vos utilisateurs savent exactement quels champs sont obligatoires et lesquels ils peuvent ignorer. Placer un astérisque (*) à côté des champs de formulaire requis est une convention commune. Si tous vos champs de formulaire sont obligatoires, placez un astérisque à côté de tous vos champs. Ne supposez pas que vos visiteurs comprendront qu'ils sont tous requis.

• Autoriser la connexion à l'aide d'un fournisseur tiers tel que Google ou Amazon. com. Parfois, un formulaire d'inscription peut devenir un obstacle à l'entrée pour un nouvel utilisateur. Permettre à vos clients de se connecter en utilisant un fournisseur tiers auquel ils sont déjà connectés peut accélérer le processus et éliminer la barrière d'enregistrement.

  Découvrez un exemple d'intégration tierce permettant aux utilisateurs débutants de se connecter à l'aide de leurs informations de compte Google. C'est beaucoup plus facile pour l'utilisateur que de taper des informations d'enregistrement dans un formulaire.

  

  Étant donné que HubSpot Sidekick propose une authentification tierce, les nouveaux utilisateurs mobiles peuvent ignorer le formulaire et s'enregistrer avec leurs informations de compte Google.

  La connexion par un tiers est également un excellent moyen d'obtenir des clients à travers le formulaire d'achat. En permettant aux utilisateurs de se connecter et de payer en utilisant un service pour lequel ils ont déjà des informations de carte de crédit stockées, comme Amazon. com, vous autorisez votre client à ignorer un formulaire d'autorisation de carte de crédit multifréquences.

  

  Un exemple d'intégration tierce.

• Conservez l'accent sur le formulaire et réduisez le contenu de la page. Lorsque vos visiteurs ont accédé à une page Web avec un formulaire, ils sont sur une page de conversion et vous souhaitez que le contenu de la page fasse tout ce qui est en leur pouvoir pour maintenir la conversion. Vous souhaitez que votre visiteur interagisse avec le formulaire et appuie sur le bouton Envoyer dès que possible.

  L'ajout de beaucoup de contenu au-dessus ou à côté de votre formulaire peut finir par être une distraction de conversion qui peut ralentir ou complètement faire dérailler le processus de soumission de formulaire. Pour minimiser la distraction, essayez d'inclure uniquement du contenu explicatif qui aide l'utilisateur à remplir le formulaire. Si vous voulez inclure du contenu qui n'est pas explicatif, gardez-le concis et directement lié au formulaire - tout comme l'exemple de BruceClay. com.

  

  Conservez la langue sur les formulaires au point d'augmenter la conversion.

• Valide visuellement la fin d'une ligne de formulaire. Les utilisateurs mobiles n'aiment pas remplir les formulaires la première fois, et ils ne préfèrent pas retourner les remplir une deuxième fois parce que le formulaire contient des erreurs.

  L'utilisation de repères visuels pour indiquer à l'utilisateur qu'il a correctement ou incorrectement rempli chaque ligne du formulaire permet de gagner du temps et de limiter les frustrations. Une coche verte à côté du champ est un excellent moyen d'indiquer clairement que le champ a été complété correctement, et un X rouge fonctionne bien pour communiquer lorsque quelque chose ne va pas.Si quelque chose ne va pas avec la ligne, assurez-vous d'expliquer clairement comment l'utilisateur peut corriger l'erreur.

  

  Utilisez des indices visuels et verbaux pour indiquer aux utilisateurs s'ils ont correctement rempli chaque ligne du formulaire.