Bonnes pratiques - formulaires dans une application mobile

Les formulaires sont partout. Ils varient du simple formulaire de contact au formulaire d’inscription ou de paiement. Ils jouent un rôle très important dans la façon dont les utilisateurs interagissent avec votre application mobile et la collecte d’informations. Un formulaire mal pensé donc peut nuire à l’expérience de l’utilisateur avec votre application, et donc réduire considérablement le taux de rétention ou de conversion.

Quelles sont donc les bonnes pratiques à adopter et à prendre en compte lors de la conception d’un formulaire au sein d’une application mobile ?

  1. Faciliter la lecture :
    1. Placer les labels aux bons endroits : Plusieurs recherches démontrent que placer les labels (texte décrivant le champs de texte)  juste au dessus ou à gauche du champs de texte rend la lecture du formulaire plus facile et aisée à scanner par l’oeil.
    2. Conseils et directives de remplissage des champs de texte : Pensez à inclure un texte aidant l’utilisateur pour le remplissage correct du champs de texte à côté de celui-ci.
      Exemple d’un champ mot de passe : Si l’utilisateur doit saisir un mot de passe d’au moins 6 caractères, précisez le à coté du champ en question pour éviter de le signaler comme une erreur une fois que l’utilisateur valide son formulaire.
      (note : Si vous vous souciez de l’espace, vous pouvez afficher le conseil qu’une fois le champs sélectionné).
  2. Faciliter la saisie :
    1. Définir le type du champs : Grâce à des attributs HTML, on peut indiquer le type d’information que l’on veut être saisie, ainsi cela facilite la tâche aux utilisateurs sur mobiles, en leur affichant le moyen, clavier, sélectionneur de date… le plus approprié. Exemple avec un champs pour saisir son numéro de téléphone l’appareil affiche directement un pavé numérique.
    2. Utiliser des masques de saisie : Les masques de saisie agrémentent les attributs en contraignant l’utilisateur à saisir un certain type d’informations. Ainsi, si on souhaite que l’utilisateur saisisse une adresse email en “@gmail.com”  par exemple, l’utilisateur n’aura à saisir que la première partie de l’information puisque le reste est déjà complété.
    3. L’auto-complétion : Quand la situation le permet, on peut faire appel à l’auto-complétion pour permettre une saisie plus rapide de certaines informations déjà stockées sur l’appareil de nos utilisateurs, telles que les adresses emails, les identifiants et mots de passe. On peut aussi s’appuyer sur des services tels que Google Maps API afin de compléter la saisie d’une adresse physique par exemple.
  3. Minimiser les efforts demandés aux utilisateurs :
    1. réduire le nombre de champs au minimum : Remplir un long formulaire peut être une tâche fastidieuse pour les utilisateurs, c’est pour cela qu’il ne faut garder que les champs les plus importants et nécessaires. Évitez d’ajouter un champs dont vous pouvez vous passer.
    2. Signaler les erreurs à côté des champs concernés : Beaucoup de formulaires regroupent les erreurs soit en bas, soit en haut. Or cela oblige l’utilisateur à scroller, lire, scroller encore pour trouver le champs concerné et corriger l’erreur, sans oublier qu’il peut oublier de quoi il s’agissait une fois le champs retrouvé. Pour éviter cela, placez les messages d’erreurs à côté ou juste en bas des champs concernés permet à l’utilisateur de se corriger rapidement.
    3. Utiliser la vérification de champs pendant la saisie : En complément du point précédent, il est conseillé de signaler à l’utilisateur l’existence d’une erreur dès qu’il termine la saisie du champs et passe à un autre.
    4. Regrouper informations similaires : Regrouper les champs par type d’informations aide l’utilisateur à saisir plus rapidement ces derniers.

Si vous vous intéressez de façon plus globale à l’UX des applications mobiles, notre article sur l’UX des applications mobiles.

Si vous êtes à la recherche d’une agence en développement d’applications mobiles, contactez-nous via le formulaire ci-dessous.

Laissez un commentaire