8 astuces à connaître pour une page de connexion / inscription parfaite sur mon application

Une bonne expérience sur mobile dépend de nombreux paramètres, mais, comme pour tout, la première impression reste souvent la plus importante.La page d’inscription/connexion, qui va bien souvent accueillir l’utilisateur sur votre application, doit donc être IR-RÉ-PRO-CHA-BLE !Voici quelques conseils pour que l’expérience utilisateur soit la plus agréable possible.

1. Décidez de votre principal appel à l'action : "connectez-vous" ou "inscrivez-vous"

Il est facile de confondre les termes « connexion » et « inscription » en tenant compte de la similitude des deux expressions. Cela n’implique pas forcément de masquer l’un ou l’autre mais de mettre en avant un des deux. Alors comment choisir ?

• Si votre service est mature et que la majeure partie de vos utilisateurs ont déjà un compte, généralement pour les applications utilisées comme extension du web ou application bestseller > optez pour la mise en avant de la “connexion”.
• Si votre service / entreprise est uniquement mobile, la plupart de vos utilisateurs auront donc accès à votre produit via votre application pour la première fois > optez pour le terme “’inscription”.

Exemple Babel ✔L’application Babel met l’accent sur la première arrivée en poussant l’utilisateur à choisir une langue à apprendre et donc à se créer un compte. La connexion est tout de même accessible mais moins mise en avant.

Exemple Padlet ✔ ? Conseils : Si selon vous il n’y a pas lieu de mettre l’un des deux plus en avant pensez à différencier les couleurs pour faciliter la compréhension de l’utilisateur.

2. Poussez l'inscription / connexion au bon moment

Demander la création de compte à la première arrivée sur l’application augmente de facto le nombre d’abonnés, cependant, si elle n’est pas nécessaire pour accéder au contenu de l’application, supprimez cette étape. En effet, il est préférable de pousser l’inscription / connexion lorsque l’utilisateur effectue une action précise : mettre un article au panier, créer un contenu, liker un post… Cet avant-goût lui permet de se projeter dans les fonctionnalités de l’application.A contrario, pour des applications avec du contenu sensible et personnel, comme les applications bancaires par exemple, il est nécessaire de passer par cette étape d’authentification afin de retrouver les informations qui intéressent l’utilisateur : les siennes.

Exemple TIKTOK ✔ Tiktok permet aux utilisateurs de naviguer dans les différents contenus immédiatement après le téléchargement de l’application et ceci sans se connecter. Cependant lorsque l’utilisateur va vouloir mettre un article en favoris, ou encore créer du contenu, l’authentification lui est poussée.Exemple Pôle emploi et Caisse d’Épargne ✖Sur ces deux exemples, on pourra apercevoir le contenu mais lorsqu’on tapera sur celui-ci pour y avoir accès, on nous demandera de nous authentifier. Dans ces cas, cela n’apporte pas de valeur en particulier et il serait préférable de pousser la connexion immédiatement, particulièrement pour des applications au contenu sensible (banque…).

3. Demandez peu d'informations et n'ajoutez pas de distraction

S’il y a bien une règle lorsque vous allez demander des informations à vos utilisateurs, c’est qu’il faut aller à l’essentiel. En effet, les formulaires trop longs ont des chances de démotiver les usagers dès leur arrivée sur votre application.Demandez dans un premier temps les données essentielles. L’idée est de rationaliser les informations et proposer plus tard de compléter son profil ou de renseigner ses informations bancaires par exemple.Conseils : facilitez au maximum la vie de l’utilisateur en lui poussant les bons claviers, en prédisant son numéro de téléphone, son email ou encore le code de validation reçu par SMS pour qu’il n’ait pas à le saisir.

Exemple Veepee ✖Même si elle est claire, l’’interface est assez chargée, les informations demandées pourraient, par exemple, être découpées en étapes afin de simplifier l’accès à la plateforme.

4. Donnez du feedback à vos utilisateurs

Il est important de donner un retour précis à l’usager lors du remplissage d’un formulaire, que ce dernier soit positif (un compte créé avec succès) ou négatif (un mot de passe erroné par exemple).Pour ce faire, affichez des messages d'erreur appropriés et clairement définis. N'utilisez donc pas de messages d'erreurs trop génériques qui pousseraient l’utilisateur à se demander, des fois en vain, ce qu’il a mal dû compléter dans le formulaire.Pour des raisons de sécurité il est préférable de ne pas préciser à l’utilisateur lors d’une erreur d’authentification si c’est le mail ou le mot de passe qui est erroné, surtout si les données contenues dans l’application sont sensibles.En revanche, il est fortement recommandé d’indiquer à l’utilisateur qu’il a fait une mauvaise saisie dans le format demandé.

Exemple ici sur Canva ✔Le message d’erreur indique une erreur car cela ne ressemble pas au format d’un email classique.Il est préférable de différencier, lors d’une connexion, un problème de format non respecté ou un email non valide (qui n’est pas retrouvé dans la base de données).Pensez également à indiquer à l’utilisateur la progression de son authentification. Certaines plateformes se doivent de demander beaucoup d’informations à l’utilisateur lors de la création de son compte. Dans ce cas, scindez en étapes les informations demandées et indiquez à l’utilisateur où il en est.Conseils : pour éviter les erreurs de saisie, l’affichage du mot de passe peut être un outil intéressant, surtout lorsque le mot de passe demandé doit comporter des majuscules, minuscules, chiffres et caractères spéciaux… Cela évite également de devoir dupliquer le champs en demandant une seconde fois le mot de passe.

Exemple Elocance ✔L’application propose à l’utilisateur de visualiser son mot de passe et l’informe du niveau de sécurité que ce dernier doit respecter.

5. Proposez des moyens de connexion rapides et adaptés

Les boutons de connexions via les réseaux sociaux ont pour avantage de faciliter la connexion et l’inscription en évitant aux utilisateurs de renseigner leurs informations personnelles. Ces dernières sont pré-remplies depuis le compte du réseau social de l’utilisateur.

Qui dit rapide ne veut pas toujours dire adapté ! Mailchimp, par exemple, une plateforme d’emailing, a enregistré une baisse de 66% du nombre de connexions lorsqu’ils ont tenté d’intégrer les boutons de social connect. La cible, majoritairement BtoB, n’était pas adaptée.

Exemple Dribbble ✖La page de connexion inscription propose trop de moyens de s’authentifier, ce qui peut être un peu déroutant en arrivant pour la première fois.

6. Créez des boutons intuitifs et bien placés

Le placement des boutons d’actions est primordial dans l’expérience vécue par les utilisateurs.Attention aux boutons de validation ainsi qu’aux champs de saisies cachés par le clavier.

Exemple Mailchimp ✔Le bouton pour passer à la suite du formulaire s’adapte au fait que le clavier soit visible ou non.Si l’utilisateur garde le clavier ouvert le bouton suivant est toujours visible.Cette astuce ne fonctionne pas si le formulaire est trop long car il ne faut pas que le bouton masque un champs.L’état du bouton est également une information à prendre en compte : si le formulaire est complété et conforme, le bouton devient alors actif. A contrario, tant que le formulaire n’est pas complété ou s’il comprend des erreurs, le bouton reste inactif.

Exemple Digiposte ✔Tant que l’adresse email de l’utilisateur n’est pas renseignée et valide le bouton ‘’ suivant ‘’ reste inactif. L’utilisateur sait lorsqu’il peut Enfin, la dénomination du bouton doit être explicite sur la suite de l’action : les utilisateurs doivent être en capacité de comprendre ce qui se passe après cette étape.? Conseils : pensez aussi aux ‘’doigts boudins’’ (comme on dit chez nous) en concevant des boutons assez larges et suffisamment espacés pour ne pas que certains utilisateurs tapent sur le mauvais bouton.

7. Facilitez le remplissage des champs

Mettez en place l'autocapitalisation des caractères, c’est ce qui permet de mettre automatiquement la première lettre d’un champs en majuscule. Cette fonctionnalité est très pratique pour les champs tels que les noms et les adresses mais évitez-la pour les champs de mot de passe.Pensez à désactiver la correction automatique lors du remplissage des champs, cette fonction permet de détecter les mots mal orthographiés et peut être pénible lors de la saisie d’un nom, prénom ou d’une adresse…Utilisez l’autocomplétion pour faciliter, par exemple, la saisie d’adresse.

Exemple NextDoor ✔ Après avoir renseigné mon code postal, l’autocomplétion m’aide à trouver plus facilement mon adresse.

Exemple MesVoisins ✖La fonctionnalité n’est pas optimisée pour une longue liste de contenus, obligeant à “scroller” et faire disparaître une partie du formulaire.

8. Soyez clair sur l'utilisation des données utilisateurs

Avant de demander à votre client de vous communiquer ses données personnelles, assurez-vous de lui expliquer pourquoi vous en avez besoin. Au-delà de l’application de la RGPD, il est impératif de prouver à l’utilisateur que les informations qui lui sont demandées vont être utiles à la prise en main de l’application par la suite.

Exemple Elocance ✔L’application a créé une page expliquant précisément l’intérêt de donner son email pour créer son compte. 

En conclusion

Pour que vous puissiez vous y retrouver, on vous a concocté un beau tableau récapitulatif.INSCRIPTIONCONNEXIONVotre produit est 100% mobile ou encore nouveau sur le marché : priorisez l’inscription.L’application est un bestseller ou une extension du web : priorisez la connexion.Ne pas forcer l’inscription si cela n’a pas de valeur pour l’utilisateur dans un premier temps.Poussez la connexion au bon moment : si elle n’est pas obligatoire laissez l’utilisateur naviguer.Proposez à l’utilisateur de visionner son mot de passe.Proposer à l’utilisateur de visionner son mot de passe.Rappelez à l’utilisateur à quoi va servir l’utilisation de ses données.Proposer la fonction de mot de passe oublié.Poussez la validation des CGU.Mémorisez la connexion de l’utilisateur si les données de l’application ne sont pas sensibles (documents personnels, données bancaires, etc.).Faites valider l’adresse email ou le n° de téléphone de l’utilisateur en lui envoyant un lien en email un un code SMS à renseigner afin de confirmer son identifiant.Utiliser le face ID ou le touch ID pour faciliter l'accès à l'application.Compléter un formulaire de connexion/inscription peut paraître anodin mais c’est en réalité une étape cruciale pendant laquelle un utilisateur va poursuivre (ou non) son expérience sur votre produit.Et comme le disait de son temps Paul Valéry “Qui veut faire de grandes choses doit penser profondément aux détails”. Pas sûr qu’il pensait à votre interface mobile mais il est vrai que ce sont souvent l’ajout d’éléments clés, tel qu’un feedback, des espacements ou le découpage en étape du formulaire, qui rendent l’expérience plus agréable.Vous avez aimé cet article rédigé par notre UX designeuse Margaux ? Découvrez ses autres articles :

• UX : tester son interface, quand, comment, pourquoi ?
• UX : nos 2 outils pour s’immerger efficacement dans la tête de vos utilisateurs