Comment optimiser formes pour appareils mobiles

Les formulaires sont utilisés sur des sites Web pour recueillir des informations auprès des utilisateurs. Sites utilisent cette information pour effectuer des transactions et des enregistrements, ou de remplir d'autres tâches telles que la présentation d'une réclamation d'assurance en ligne.

Lorsque vous approchez de conception de formulaire pour les appareils mobiles, en gardant l'expérience mobile physique à l'esprit est important. Si vous faites votre forme lente pour charger ou trop compliqué, vos visiteurs seront probablement abandonner la forme dans le milieu, ou même avant qu'ils ne commencent.

Gardez ces meilleures pratiques à l'esprit lors de la conception de vos formulaires de mobile-friendly:

• Gardez formes court et doux. Faites 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 faire votre formulaire un champ plus courte.

  Demander trop et vous pouvez vous retrouver avec rien du tout.

• Quand ils ne peuvent pas être court, créer des formulaires de plusieurs pages. Si vous devez avoir une forme longue, la diviser en plusieurs pages, présente seulement quelques domaines-la-fois au-dessus sur chaque page (“ dessus du pli ” signifie avant vous devez commencer à défiler vers le bas de l'écran), et comprennent claires boutons Suivant afin que les visiteurs ne doivent pas faire défiler trop. Une barre de progression peut également aider à garder les utilisateurs déterminés à multipage formes mobiles.

• 
  
  
  
  

  Faites le bouton Soumettre et les champs du formulaire taille de doigt. Vos utilisateurs mobiles sont de remplir des formulaires avec leurs doigts, afin que vos champs et les boutons doivent être assez grande pour rendre l'interaction du robinet facile. Pas de taille standard existe qui fonctionne le mieux pour chaque appareil mobile, mais de créer des boutons et des champs de formulaire qui sont 44 pixels de large par 44 pixels de hauteur est généralement une règle de sécurité de base.

• Réduire la dactylographie à l'aide des menus déroulants, des boutons radio, et les réponses auto-sélectionné. Tout ce que vous pouvez faire pour limiter la quantité de dactylographie requise permettra d'accélérer le processus et d'améliorer la satisfaction de vos clients. Par exemple, si votre formulaire demande d'un Etat, permettent aux utilisateurs de sélectionner leur état à partir d'un menu déroulant afin qu'ils ne doivent pas taper.

• Assurez-ce que vous vous demandez clair. Au-dessus de chaque champ, indiquer clairement ce que vous voulez à l'utilisateur de mettre dans le champ de formulaire. Si vous vous demandez pour un anniversaire, par exemple, préciser si la forme veut l'année de naissance inscrite comme deux ou quatre chiffres. Voir un exemple de Progressive.

  
  Montrer aux utilisateurs comment ils doivent saisir des informations de date de naissance.

  Si vous demandez une information qui nécessite des explications supplémentaires, y compris un bouton qui offre plus d'informations quand on tape (souvent appelé infobulle) Peut aider expérience utilisateur. Voici un formulaire en utilisant une info-bulle d'expliquer ce que signifie CCV.

  
  Un bouton de bulle explique l'exigence de champ de formulaire.

• Préciser clairement quels champs sont obligatoires. Si votre formulaire a plus d'un domaine, assurez-vous que vos utilisateurs savent exactement quels champs sont obligatoires et où ils peuvent sauter. Placer un astérisque (*) à côté de champs de formulaire requis est une convention commune. Si tous vos champs de formulaire sont nécessaires, placez un astérisque à côté de tous vos champs. Ne présumez pas que vos visiteurs comprendront qu'ils sont tous tenus.

• Laisser vous identifier en utilisant un fournisseur tiers comme Google ou Amazon.com. Parfois, un formulaire d'inscription peut devenir une barrière à l'entrée pour un utilisateur pour la première fois. Permettre à vos clients de se connecter à l'aide d'un fournisseur tiers qu'ils sont déjà connectés à peut accélérer le processus et d'éliminer la barrière d'inscription.

  Découvrez un exemple de l'intégration de tiers qui permet aux utilisateurs pour la première fois de se connecter à l'aide de leurs informations de compte Google. Cela est beaucoup plus facile pour l'utilisateur que de taper les informations d'enregistrement dans un formulaire.

  
  Parce HubSpot Sidekick a authentification facultative tiers, les utilisateurs mobiles la première fois peuvent sauter le formulaire et enregistrer avec leurs informations de compte Google.

  Tiers log-in est aussi un excellent moyen d'obtenir des clients à travers le formulaire d'achat. En permettant aux utilisateurs de se connecter et payer en utilisant un service pour lequel ils ont déjà des informations de carte de crédit stocké, comme Amazon.com, vous permettez à votre client pour passer d'une carte de crédit formulaire d'autorisation Multifield.

  
  Un exemple d'intégration tiers.

• Gardez l'accent sur la forme et de minimiser tout autre contenu sur la page. Lorsque vos visiteurs ont atterri sur une page web avec une forme, ils sont sur un conversion page, et vous voulez que le contenu de la page pour faire tout ce qui est en son pouvoir pour maintenir l'élan de conversion aller. Vous voulez obtenir votre visiteur d'interagir avec le formulaire et en tapant sur le bouton Envoyer dès que possible.

  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 dérailler le processus formulaire de soumission. Pour minimiser la distraction, essayez d'inclure uniquement le contenu explicatif qui aide l'utilisateur à remplir le formulaire. Si vous ne souhaitez inclure du contenu non explicative, garder concis et directement liée à la forme - tout comme l'exemple de BruceClay.com.

  
  Gardez la langue sur les formes au point pour augmenter la conversion.

• Visuellement valider quand une ligne de formulaire est rempli correctement. Les utilisateurs mobiles ne aiment pas remplir des formulaires pour la première fois, et ils vraiment ne pas aimer avoir à revenir en arrière et de les remplir une seconde fois parce que le formulaire comporte des erreurs.

  Utilisation de repères visuels pour laisser votre utilisateur de savoir qu'ils ont terminé chaque ligne du formulaire correctement - ou mal - peut économiser du temps et de limiter la frustration. Une coche verte à côté du champ est un excellent moyen pour indiquer clairement que le domaine a été achevée le droit chemin, et un X rouge fonctionne bien pour communiquer quand 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 que les utilisateurs sachent qu'ils ont terminé correctement chaque ligne de la forme.