Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

‍

À la question posée aux utilisateurs d’Android “Quelles raisons principales vous font supprimer une application ?”, la présence d’un formulaire d’inscription revient à 38% dans les réponses. C’est une bonne raison pour s’attarder sur les problèmes qui peuvent être rencontrés.

Dans le cadre de notre nouvelle offre d’optimisation des applications mobiles, ce billet est le premier d’une série traitant des bonnes pratiques pour réaliser un produit performant.

Contourner la saisie

Limiter la saisie

Le clavier constitue une source majeure de frustration pour les utilisateurs, voici des indications pour en limiter l’utilisation.

Utiliser prioritairement les boutons d’actions, la gestuelle native (tap, swipe) et les fonctionnalités natives du téléphone (GPS, tap-to-call, photo).

• L’application SeLoger (v3.2.0) utilise très bien ce principe en proposant à ses utilisateurs de dessiner la zone de recherche sur la carte plutôt que de l’entrer textuellement.
• L’application trivago (v1.80) utilise habilement les boutons d’action pour ses filtres de recherche.

N’afficher que les champs indispensables. La best-practice est de proposer des champs optionnels dans un encart replié par défaut.

• Opodo (v1.0.0) affiche uniquement les champs essentiels à la recherche, on peut accéder à d’autres champs via la bouton “plus d’options”.

Simplifier au maximum la saisie

Lorsque la saisie ne peut pas être contournée, un certain nombre de moyens nous permettent de faciliter la vie des utilisateurs.

Utiliser correctement le picker natif (iOS et Android) en regroupant ce qui fait sens à l’intérieur du même picker : par exemple, pour la sélection d’une date, jour, mois et année peuvent être réunis dans le même picker.

Conseil : Si l’utilisateur doit choisir une date de départ et une date de retour (billet d’avion par exemple), il appréciera particulièrement que les champs soient sur la même ligne et que le picker ne se ferme pas au clic sur le champ connexe. L’application liligo (v2.6) exécute cela parfaitement.

• Ce type de picker peut d’ailleurs être adaptés pour d’autres cas : eDreams (v1.8.0) réunit en un picker la sélection du nombre de passagers Adultes/Enfants/Bébés pour un vol.

Proposer un clavier adapté au champ est essentiel : si l’utilisateur doit renseigner un email, le clavier doit permettre d’accéder immédiatement à la touche “@”. Si il souhaite renseigner un numéro de téléphone, il est inutile d’avoir un clavier contenant des lettres.

Penser à utiliser les masques de saisie. Ces masques, trop peu utilisés, permettent de formater automatiquement la saisie dans un champ. Ils ont l’avantage de montrer simplement à l’utilisateur le format attendu pour le champ (un numéro de téléphone par exemple en +XX (0)X XX XX XX XX), et de le rassurer sur le fait qu’il a correctement renseigné ses informations.

ATTENTION : Les masques doivent être combinés avec un usage intelligent des libellés et ils ne doivent pas dispenser de simplifier l’expérience utilisateur en acceptant diverses formes de saisie pour une même donnée.

• A l’inscription sur Twitter (v5.8) l’utilisateur ne se demande pas s’il doit ajouter le “@” devant son nom d’utilisateur puisqu’un masque l’affiche au tap dans le champ.

Connaître et accompagner

Anticiper sur la saisie de l’utilisateur

S’il est pénible d’entrer une information une fois, la saisir à plusieurs reprises peut être un motif d’abandon. Les quelques conseils ci-dessous illustrent des solutions pour éviter cela.

Proposer de l’auto-complétion et de la suggestion au fil de la saisie : par exemple s’il écrit “user@gma”, il est bienvenu de lui suggérer “user@gmail.com”. Les erreurs sont limitées et la saisie raccourcie !

Effectuer une validation en direct de la forme des champs avec un retour visuel pour l’utilisateur : cela évite de remplir entièrement un formulaire pour se rendre compte à l’envoi qu’il faut corriger nombres de champ.

Essayer de remplir automatiquement les champs lorsque c’est possible : si on demande de renseigner un code postal, une ville, et une région par exemple, la saisie du code postal suivie d’un appel serveur peut suffire à renseigner les trois champs d’un coup. Il est alors astucieux de les afficher dans un tel ordre.

• Attractive World (v1.1) propose dans son application iPhone un comportement similaire lors de l’inscription.

On peut sur iOS proposer de remplir automatiquement un formulaire à partir des informations de la fiche contact de l’utilisateur présente dans son carnet d’adresse.

Le choix des paramètres par défaut ne doit pas être fortuit : il peut faire gagner beaucoup de temps. En effet, il s’agit de porter une réflexion sur les choix qui seront effectués par la majorité des personnes sur une application. On peut alors décocher par défaut l’inscription à la newsletter par exemple, ou décréter qu’il y a des chances qu’une personne cherchant un hôtel cherche une chambre double, dans la ville où il est situé, pour le soir même.

• L’application de rencontre Twoo (v3.13) a par exemple pré-rempli le profil pour un homme, célibataire, recherchant une femme : c’est très certainement son audience la plus importante.

Rassurer

Il s’agit de rassurer l’utilisateur lorsque ce dernier doit saisir des informations personnelles. Il faut être conscient qu’il sera particulièrement réticent à entrer un numéro de téléphone ou un email. On peut alors utiliser les libellés pour cela, par exemple en insistant sur le fait qu’aucun spam ne sera envoyé.

La perte du contenu saisi dans un formulaire est une des expériences les plus énervantes pour un utilisateur. Il faut donc faire en sorte d’enregistrer régulièrement les informations saisies et de rassurer constamment l’utilisateur, par exemple sur le fait qu’un retour en arrière n’effacera pas ce qui a été saisi.

Faciliter la lecture et la compréhension

L’intérêt est de proposer à l’utilisateur l’enchainement et la présentation la plus claire afin d’accélérer et faciliter la complétion du formulaire.

Il est bon d’avoir accès aux champs proches de celui qui est en train d’être renseigné. Il faut donc faire en sorte que ceux-ci soient toujours accessibles même lorsque le clavier est sorti, quitte à recentrer le formulaire en hauteur.

• Vine (v1.3.1) fait encore mieux en proposant un formulaire dont l’ensemble des champs sont visibles avec le clavier sorti, grâce à une division sur plusieurs pages consécutives.

Essayer de regrouper les champs par thème permet à l’utilisateur de ne pas faire une gymnastique inutile entre des informations de types très différents.

Le placement des libellés est un point crucial. Ils peuvent être placés à gauche du champ, mais dans ce cas il existe un risque de manque de place sur certains mobiles. On peut aussi le mettre au dessus du champ, quitte à rallonger le formulaire dans la hauteur. Enfin une dernière solution est de fusionner le libellé avec le contenu du champ. Dans ce dernier cas on perd la possibilité d’avoir un libellé descriptif à l’intérieur du champ. De plus lorsque de nombreux champs sont renseignés, on risque de ne plus se rappeler des libellés de ces derniers, ce qui complexifie la modification. Il est préconisé d’utiliser cette solution uniquement pour les formulaires courts (moins de 4 champs).

• Polar (v1.4.7) sur iOS propose des champs avec libellés à gauche, mais astucieusement intégrés dans le design du formulaire.
• Mieux encore, Instagram (v4.1) utilise dans les champs des pictogrammes pour pallier à l’effacement des libellés. Ces pictos servent aussi à la validation de la saisie en se colorant en vert ou en rouge.

Le contenu des libellés descriptif à l’intérieur des champs est important. Même si ces libellés s’effacent à la saisie, il faut éviter de les utiliser pour répéter le libellé de nom du champ. En effet, on peut en tirer une valeur ajoutée en informant par exemple l’utilisateur sur le format attendu pour le mot de passe ou pour la saisie d’un numéro de téléphone.

Cas pratiques

Les formulaires sont cruciaux dans des types particuliers d’application, nous avons voulu illustrer les conseils précédents sur les applications les plus concernées selon nous : celles nécessitant une inscription et les applications de m-commerce.

L’inscription

Il faut aujourd’hui très sérieusement considérer l’utilisation de plugins sociaux pour l’inscription. Ces derniers permettent à l’utilisateur de passer outre la saisie de son profil.

Leur intégration nécessite quelques bonnes pratiques qui feront l’objet d’un blogpost ultérieur. Tout d’abord, il faut savoir qu’il n’y a pas que Facebook et Twitter : de nombreux autres services permettent l’authentification rapide. Il est important de trouver lesquels sont adaptés à l’audience de l’application. D’autre part, il faut rapidement rassurer sur le fait que notre application ne postera rien sur Facebook sans l’autorisation de l’utilisateur. Enfin, il faut chercher à promouvoir ces inscriptions.

• Exemple de promotion avec La Fourchette (v3.1).

Le mot de passe ne peut pas échapper à une saisie par clavier, la spécificité du mobile fait que cet élément peut être traité différemment que sur un site web. Il a été montré que masquer le mot de passe ne présente pas d’intérêt en terme de sécurité sur mobile or de nombreux échec sur les formulaires viennent de mots de passe mal saisis. La best-practice est alors de montrer le mot de passe par défaut, tout en permettant de le masquer si voulu. Il n’est alors plus nécessaire d’ajouter un champ confirmation du mot de passe.

• L’application Polar (v1.4.7) de Luke W. propose une solution élégante.

De même, il y a aujourd’hui peu d’intérêt à demander une confirmation pour l’email. Il sera plus astucieux d’opter pour de la suggestion intelligente en cas d’erreur de saisie.

Une pratique intéressante pour accélérer l’inscription est de demander en premier lieu le strict minimum d’informations et de proposer par la suite de compléter ce profil, en soulignant la valeur que cela apporte.

• Les applications de rencontre insistent bien sur le fait que rajouter une photo de soi augmente drastiquement les chances de rencontre.
• SoundCloud (v2.6.3) ne demande pas de nom d’utilisateur à l’inscription et en assigne un par défaut. On peut par la suite aller le redéfinir dans les paramètres de l’application.

Le m-commerce

Le m-commerce, en plus d’être concerné par l’inscription/identification, a pour particularité de proposer des formulaires lors de l’achat (check-out).

Réduire le nombre de champs est crucial pour le tunnel de check-out habituellement très long. Pour cela il est possible de trouver de nombreuses astuces. Des champs “Nom” et “Prénom” peuvent être regroupés en un seul champ “Nom complet”. Généralement l’adresse de livraison et l’adresse de facturation sont identiques, il est donc intéressant de remplir automatiquement la deuxième avec la première tout en laissant la possibilité de la modifier.

Proposer des solutions de paiement alternatives tel que PayPal ou Google Wallet permettra certainement de faciliter grandement le check-out pour les utilisateurs clients de ces services.

• PriceMinister (v1.1.2) propose dans son application le paiement avec Buyster.

S’inscrire n’est pas l’objectif premier du client lorsqu’il effectue un achat, il est donc bienvenu de proposer un achat rapide sans inscription (guest checkout). Si l’expérience se passe bien, l’utilisateur reviendra et trouvera un intérêt à compléter les informations de son compte.

L’usage des fonctionnalités natives du téléphone est ici particulièrement bienvenue : on peut suggérer des point relais à proximité grâce au GPS ou encore proposer la mise en relation avec un conseiller en un seul tap. De manière similaire, il est aussi possible de scanner avec l’appareil photo un code-barre pour trouver un article, ou encore une carte bleue pour pré-remplir les informations bancaires.

• L’application Club Privé Vacances (v1.1) utilise le tap-to-call au moment du paiement.
• Amazon (v2.5.1), comme beaucoup d’autres applications de e-commerce propose d’effectuer des recherches par scan de code barre.

Fournir à une application ses informations bancaires et personnelles n’est jamais rassurant pour un utilisateur. Il est donc recommandé de rassurer l’utilisateur sur les aspects de sécurité pour augmenter la réussite du parcours.

Ces formulaires étant longs et généralement en plusieurs étapes, il peut être bon de donner un retour à l’utilisateur sur l’état d’avancement, par exemple avec une barre de progression ou un fil d’Ariane.

En conclusion

Beaucoup d’applications offrent aujourd’hui de très belles expériences utilisateur pour la saisie d’information. Au travers de ces recommandations nous avons voulu souligner les points les plus marquants. Connaître son audience, être sensible à l’expérience proposée ainsi qu’un peu de bon sens permettront très probablement d’améliorer le taux de conversion pour les formulaires sur mobile. Ce travail jouant sur des détails, une bonne intégration des outils d’analytics reste un pré-requis primordial.