Comment optimiser les formulaires mobiles ?

Les formulaires optimisés

Si vous lisez ces quelques lignes c’est que vous avez déjà mis en place une stratégie de formulaire mobile au sein de votre organisation (à Synertic on l’a fait !) et souhaitez l’améliorer, ou que vous êtes simplement curieux. Dans tous les cas, vous êtes les bienvenues pour comprendre comment optimiser les formulaires numériques. 🙂

Maintenant que nous sommes au point, commençons sans tarder !

 

Les bonnes pratiques pour optimiser les formulaires mobiles

Éliminer le superflu et ne garder que l’essentiel

 

Premièrement, imaginez-vous remplir un formulaire administratif. Ensuite, supposez que ce même formulaire soit sur une page web entière. Pour finir, admettez que ce dernier soit à remplir tous les mois. Plutôt irritant n’est-ce pas ? Et bien dites vous que vos utilisateurs auront le même sentiment si votre formulaire mobile n’est pas simplifié au maximum.

Pour cela, ne demandez pas d’informations qui n’ont aucun lien avec l’objet du formulaire. Ce que l’on peut entendre par des données primordiales peuvent être :

  • Le nom / prénom
  • Une adresse électronique
  • Un numéro de téléphone
  • Une adresse postale

Tous les champs qui suivront seront décidés selon votre bon jugement. Ainsi, prenez en compte ces quelques remarques donnera d’avantage envie à vos mobinautes de vous envoyer de l’information. Par exemple, n’allez pas demander le surnom de votre client sur un formulaire d’achat. Donc si vous avez compris la logique, vous ne devriez pas avoir trop de mal à passer ce petit test. 😉

Mise en situation : Je suis un nouvel utilisateur de l’application mobile de ma ville, et je souhaite m’inscrire pour bénéficier de plus de contenu. Parmi ces formulaires, lesquels sont adaptés et optimisés en fonction des informations demandées ?

 

 

Alors, vous pensez avoir trouvé la bonne réponse ?

Il fallait trouver !

 

En effet, le schéma B demande le RIB de l’utilisateur, pour une raison complètement inconnue. Ce qui est évidemment à proscrire dans notre situation.

De plus dans le schéma D, il nous est demandé des informations qui, sorties de leur contexte, ne pose pas vraiment problème. Cependant rappelez-vous que nous cherchons à éliminer le superflu de nos formulaires. En prenant en compte cette situation, les champs « ville préférée » et « sexe » semblent moins prioritaires que ceux des formulaires A et C. En effet, demander qu’elle est la ville préférée d’un mobinaute sur l’application mobile d’une ville, n’est pas optimale.

Comme premier formulaire d’inscription, les deux autres semblent les plus adaptés à notre contexte.

NB : On notera également que les informations demandées, peuvent être récupérées directement depuis le profil de l’utilisateur, grâce aux champs de fusion, disponible avec SHAPPER.

 

Faciliter l’utilisation grâce aux menus déroulants ou aux choix multiples

Afin de faciliter l’utilisation des formulaires mobiles , il est nécessaire de prendre en compte la vue limitée des smartphones (certes de plus en plus XL). Il est cependant nécessaire de défiler longtemps la page, afin de remplir correctement le formulaire. C’est une utilisation normale, mais il est parfois pratique de mettre en place un moyen rapide de finaliser l’expérience utilisateur. Alors, il est possible de paramétrer des champs sous forme de listes déroulantes. C’est notamment le cas avec SHAPPER.

 

Schéma d'un paramétrage de menu roulant dans un formulaire grâce à SHAPPER

 

 

Et voici le rendu version mobile :

 

 

 

Plutôt pratique non ? 😄

 

Optimiser les formulaires mobiles en améliorant les champs

 

Choisir les types de champs

Afin de rendre l’utilisation de votre formulaire mobile plus simple pour le mobinaute, il est intéressant d’indiquer directement depuis le back-office, le type d’information que l’on veut être saisie. En effet, il sera possible de changer le « type de clavier » (texte / pavé numérique), le sélectionneur de date et d’heure… en fonction de la demande.

Il existe également d’autres caractéristiques possibles pour vos champs : signature numérisée, prises de photos, indication de position, scan de code…

Vous disposez alors d’un panel diversifié, permettant à vos formulaires de s’adapter à toutes situations. 👍

Minimiser le nombre de champs

Pour chaque outil mis en place, vous devez garder dans un coin de votre tête, quelle sera la qualité de l’expérience d’utilisation.

En ce sens, il vous est aisé de comprendre pourquoi une liste de zones de saisies à rallonge n’est pas une idée adroite.

En effet, il est plus intéressant de proposer différents formulaires, plus courts et diversifiés, qu’un seul et même formulaire mobile imbuvable pour vos mobinautes.

Alors faites en sortes de catégoriser vos formulaires numériques, afin de permettre à l’utilisateur de trouver le formulaire qui lui faut !

Organiser les informations équivalentes

En effet, il est important d’organiser les données demandées. Cette structure peut être définie par type, par chronologie, ou catégories de questions.

Ainsi, le mobinaute pourra saisir plus rapidement les champs de votre formulaire mobile.

Indiquer les étapes de progression

 

Partons du principe que tous les utilisateurs ne souhaitent pas remplir de formulaires. En partant de ce postulat, il est encore plus contraignant pour eux de ne pas savoir où ils en sont dans la complétion (si un formulaire est obligatoire pour telle ou telle raison). Dans ce cas, pourquoi ne pas afficher une barre de progression avec un numéro d’étape, un numéro de page, ou même un pourcentage de l’avancée.  N’oubliez pas de limiter les étapes autant que possible pour économiser le temps de vos clients.

 

Barre de progression

 

Utiliser les champs conditionnels pour optimiser les formulaires mobiles

Evidemment, vous allez commencer par me demander ce qu’est un champ conditionnel. Avec SHAPPER, nous avons mis en place un système d’affichage conditionnel des champs du formulaire, en fonction des valeurs des autres champs.

Par exemple, je peux décider que le champ « Âge ? », n’apparaître que si le mobinaute a précédemment remplit le champ « Nom Prénom ? ».

Cela permet d’une part d’éviter des formulaires à rallonge sans même l’avoir commencé (ce qui ne donne évidemment pas envie), et d’autres part confirme une forme de personnalisation de ce dernier.

Autre exemple, mon formulaire permet de m’inscrire à une liste d’évènements autour de moi, en fonction de mes centres d’intérêts.

exemple mobile de champs à affichage conditionnel 01

exemple mobile de champs à affichage conditionnel 02

exemple mobile de champs à affichage conditionnel 03

exemple mobile de champs à affichage conditionnel 04

exemple mobile de champs à affichage conditionnel 05

exemple mobile de champs à affichage conditionnel 06

exemple mobile de champs à affichage conditionnel 07

Ici nous sélectionnons les évènements concernant le sport, en plus des différents théâtres

exemple mobile de champs à affichage conditionnel 08

Enfin nous validons

exemple mobile de champs à affichage conditionnel 09

 

Comme vous le voyez sur les différents écrans, le champ de sélection des évènements s’affiche seulement si le premier est complété. De plus, les valeurs à choisir dans le deuxième champ, dépendent directement de ce qui a été sélectionné précédemment.

« Mais Simon tu te doutes bien que, moi qui ne sait pas programmer, je ne saurais clairement pas faire de l’affichage conditionnel ! »

QUE NENI ! 

Observons comment cela se passe dans le back-office :

Nous ajoutons sur cet écran les différents centres d’intérêts sélectionnables

Exemple d'optimisation d'un formulaire mobile grâce aux champs à affichage conditionnels 01

Ici, vous ajoutez les différents évènements par rapport au centre d’intérêt cinéma

Exemple d'optimisation d'un formulaire mobile grâce aux champs à affichage conditionnels 02

Ensuite, nous allons définir que notre champ ne doit s’afficher que si le centre d’intérêt « cinéma » a été sélectionné

Exemple d'optimisation d'un formulaire mobile grâce aux champs à affichage conditionnels 03

Enfin, nous répétons ce processus très simple pour le reste des centres d’intérêts

Exemple d'optimisation d'un formulaire mobile grâce aux champs à affichage conditionnels 04

 

Simple comme bonjour n’est-ce pas ? 😉

 

Conclusion

 

 

Et si on optimisait vos formulaires mobiles ? Cliquez sur le bouton ci-dessous !

 

Créer mon app personnalisée

 

No comments yet.

Laisser un commentaire