Les bonnes pratiques pour les formulaires mobiles ! đŸ“±

read time

4 min

On est tous d'accord pour dire que personne n'aime remplir un formulaire. Il s’agit de l’une des expĂ©riences utilisateurs les plus frustrantes.

NĂ©anmoins, en tant qu’UX designer vous n’y couperez pas, dĂšs l’onboarding ou au cours du parcours client, le formulaire joue un rĂŽle primordial pour recueillir des informations et interagir avec les utilisateurs. Ayant beaucoup travaillĂ© dessus chez Ubisoft, Louis Vuitton, Bpifrance, ou L'occitane, voici mes recommandations pour crĂ©er des formulaires qui respectent les bonnes pratiques en matiĂšre d'expĂ©rience utilisateur pour crĂ©er des formulaires intuitifs et vĂ©hiculer une image positive de la marque par les utilisateurs.

Si je prĂ©sente ici 15 bonnes pratiques UX pour les formulaires mobiles, cette liste mĂ©rite sĂ»rement d’ĂȘtre complĂ©tĂ©e, n’hĂ©sitez pas Ă  le faire en commentaires que j’intĂšgrerai par la suite :

1 - Positionner les labels au-dessus des champs

C'est l'un des sujets les plus controversés dans la conception des formulaires.

Cependant, des Ă©tudes comme celle de Google et d’UX matters prouvent que les labels au-dessus des champs sont plus efficaces en minimisant les erreurs.

Positionner les labels au-dessus des champs
Source : uxmatters

2 - Structurer le formulaire en une seule colonne

Les utilisateurs interprĂštent souvent de façon incohĂ©rente les champs d’un formulaire s'ils sont divisĂ©s en deux colonnes. L’utilisation d’une mise en page en une seule colonne est prĂ©fĂ©rable Ă  une mise en page sur deux colonnes pour simplifier la lecture et la comprĂ©hension.

Structurer le formulaire en une seule colonne

3 - Utiliser la proximité visuelle

Positionnez le label et le champ assez prÚs et utilisez un espace plus grand entre les différents champs pour aider l'utilisateur à comprendre quel label correspond à quel champ.

Utiliser la proximité visuelle

4 - Mentionner les champs facultatifs plutĂŽt que les champs obligatoires

Une étude montre que les utilisateurs donnent plus d'informations que nécessaire lorsque les champs obligatoires / facultatifs ne sont pas spécifiés. Si vous mentionnez explicitement tous les champs obligatoires, vous n'aurez souvent que ceux-là de remplis. Cela permet également de ne pas parasiter la lecture du formulaire.

mentionner les champs facultatifs plutĂŽt que les champs obligatoires
Source : preibusch

5 - Utiliser les inputs types

Définir le type de champs a un impact positif sur la façon dont l'utilisateur interagit avec votre formulaire.

Ils sont utiles pour 3 raisons :

  • Ils permettent d’adapter le clavier au format des donnĂ©es souhaitĂ©es sur mobile (numĂ©ros uniquement, champ email, etc.) ;
  • Permettent au navigateur de remplir automatiquement les champs avec les donnĂ©es utilisĂ©es prĂ©cĂ©demment.
  • Et ils Ă©vitent les erreurs (notamment sur le format de l'email).

Voici la liste des différents standards en HTML5

input type=

  • "text" affiche le clavier normal de l'appareil mobile
  • "email" affiche le clavier normal plus '@' et '.com'
  • "tel" affiche le clavier numĂ©rique 0-9
  • "number" affiche un clavier avec des chiffres et des symboles
  • "password" cache les caractĂšres saisis dans le champ
  • "date" affiche le sĂ©lecteur de date du mobile
  • "datetime" affiche le sĂ©lecteur de date et d'heure du mobile
  • "month" affiche le sĂ©lecteur mois/annĂ©e du mobile

utiliser les inputs types

6 - Simplifier ses formulaires

La meilleure façon d'Ă©viter les erreurs me semble encore  de simplifier votre formulaire et de rĂ©duire le nombre de champs autant que possible ! Par exemple, si vous souhaitez rĂ©cupĂ©rer l'adresse postale de l'utilisateur, un seul champ devrait ĂȘtre suffisant, au lieu des 6-7 champs communĂ©ment utilisĂ©s pour chaque Ă©lĂ©ment de l'adresse. Cela permettra d’éviter les erreurs de frappe et d’offrir une meilleure expĂ©rience Ă  l'utilisateur.

simplifier ses formulaires

7 - Utiliser des masques

Il est important de guider vos utilisateurs autant que possible, c'est pourquoi il est recommandé d'utiliser des masques pour certains champs. Les masques sont utiles pour montrer un format de données attendu spécifique, par exemple les cartes de crédit ou les champs de numéro de téléphone.

utiliser des masques

8 - Utiliser le mode autofocus

L'autofocus permet de positionner la page de l'utilisateur directement dans le champs souhaité. Sur desktop et mobile, il déclenche le mode focus sur une partie du formulaire et clarifie donc dans quel champ l'utilisateur doit entrer des informations. En outre, sur mobile, il garde le champ qui est en cours d'utilisation au-dessus du clavier.

utiliser le mode autofocus

9 - Éviter les intitulĂ©s gĂ©nĂ©riques pour les call to action

Évitez les mots “envoyer” ou “soumettre” pour vos boutons et donnez un nom prĂ©cis Ă  l'action que l'utilisateur est sur le point d'effectuer, par exemple "crĂ©er mon compte", "envoyer mon message", etc.

Éviter-les-intitulés-génériques-pour-les-call-to-action

10 - Afficher des messages d'erreur clairs et des solutions

Ne dites pas à votre utilisateur que les données sont invalides sans lui dire pourquoi. Il ne peut pas toujours deviner ! La clarification est essentielle pour éviter autant que possible les erreurs.

afficher des messages d'erreurs clairs et des solutions

11 - Utiliser la taille du contenu pour définir la taille du champ

La taille du contenu peut ĂȘtre un indicateur facile Ă  utiliser pour dĂ©finir la taille d’un champ.

utiliser la taille du contenu pour définir la taille du champs

12 - Restez simple !

Ayez des formulaires courts et simples. Il est recommandĂ© de recueillir uniquement les donnĂ©es nĂ©cessaires et de ne pas dupliquer les champs de saisie pour vĂ©rifier l’information (par exemple, au lieu de dupliquer le champ du mot de passe, vous pouvez permettre Ă  l’utilisateur de visualiser le mot de passe qu'il a choisi).

restez simple

13 - Ne pas insérer d'informations importantes dans les champs

Les utilisateurs ne font souvent pas attention aux placeholders dans les champs. Ils sont plus susceptibles d'ĂȘtre plus frustrants qu'utiles dans un champ car le placeholder disparaĂźt lorsque l’utilisateur clique sur le champ et il peut, par consĂ©quent, oublier ce qu’il contenait.

Ne pas insérer d'informations importantes dans les champs<br />
Source : nngroup

14. Distinguer les actions primaires des actions secondaires

Votre formulaire peut avoir plusieurs boutons d'action. Dans la plupart des cas, les utilisateurs voient deux options : l'une est la tùche principale et l'autre est une tùche secondaire. Cependant, il est important de les différencier pour que l'utilisateur puisse rapidement identifier le bouton principal.

Distinguer les actions primaires des actions secondaires

15 - Ajouter les interactions humaines

Ajoutez des interactions humaines aux textes de vos formulaires pour les rendre plus attrayants et créer une émotion positive.

Ajouter les interactions humaines

J'espĂšre que cette liste vous aidera Ă  concevoir de meilleurs formulaires. Si vous connaissez d’autres bonnes pratiques, n’hĂ©sitez pas Ă  nous les partager en commentaire :)

Si vous ĂȘtes des amoureux du Product Design et de l'UX, n’hĂ©sitez pas Ă  lire :

Publié le 11 avr. 2019

Mis Ă  jour le 27 nov. 2022

clipboardCopier le lien
Ecrit par
RĂ©mi TAIEB
RĂ©mi TAIEB

Les prochains Ă©vĂšnements

Le Meetup Discovery Discipline - Épisode 2 avec Pantea NĂ©gui

calendar

18 oct 2022

S'inscrire

Filles_ordinateur

Envie de partager tes idées ?


Plus de 20.000 passionĂ©.e.s du Produit viennent sur notre mĂ©dia chaque mois. Retours d’expĂ©rience, opinions clivantes, n’hĂ©site pas Ă  nous proposer des contenus.

 

Contacter la rédaction