Connexion et inscription mobiles : clarifier l’étape du compte

Choisir le moment où un compte devient utile

Commencez par la tâche que la personne souhaite accomplir. Si l’expérience principale fonctionne sans compte, laissez-la d’abord explorer le produit, puis demandez une connexion lorsqu’elle utilise une fonctionnalité nécessitant des préférences enregistrées, un accès sur plusieurs appareils, une collaboration ou une transaction. Les recommandations d’interface d’Apple préconisent de retarder la connexion lorsque c’est possible et d’en expliquer l’avantage lorsqu’un compte est nécessaire.

Une demande liée au contexte se comprend mieux qu’un blocage au lancement. Une application de lecture pourrait, par exemple, permettre de parcourir les titres, puis demander la création d’un compte lorsque la personne souhaite synchroniser sa liste de lecture. Si le compte est indispensable dès le départ, expliquez pourquoi avant d’afficher les champs. Restez concret et proportionné : « Créez un compte pour enregistrer vos projets et les ouvrir sur un autre appareil » est plus utile que « Rejoignez notre communauté ».

• Séparez les informations obligatoires des détails de profil facultatifs.
• Pour un achat en tant qu’invité ou une tâche ponctuelle, demandez-vous si la création du compte peut attendre que la valeur immédiate ait été fournie.
• Après une authentification réussie, ramenez la personne à l’action qu’elle souhaitait accomplir.

Rendre les choix de connexion clairs et reconnaissables

Une personne doit pouvoir savoir si elle crée un compte ou accède à un compte existant. Donnez des libellés distincts aux deux parcours, rendez l’action principale clairement visible et placez les autres méthodes de façon à permettre la comparaison sans surcharger l’écran. Utilisez les noms des fournisseurs et les boutons approuvés par les plateformes lorsque c’est pertinent ; le seul libellé générique « Continuer » n’explique pas ce qui suivra.

Ne proposez que les méthodes que le produit prend en charge et peut maintenir. L’e-mail, une clé d’accès ou une option d’identité fournie par la plateforme peuvent convenir à des publics différents. Présentez-les comme des choix, sans prétendre qu’une méthode est universellement plus simple ou plus sûre. Expliquez toute information supplémentaire requise.

Les personnes qui reviennent peuvent avoir oublié leur méthode de connexion. Rendez la récupération et les autres modes de connexion faciles à trouver, et expliquez quoi faire si une adresse e-mail est associée à une autre méthode. Des indications sur la liaison des comptes peuvent aider à conserver l’accès à un compte existant.

Garder les formulaires ciblés et compatibles avec les outils des utilisateurs

Ne demandez que les champs nécessaires à la création du compte ou à son accès. Utilisez des libellés permanents au lieu de compter uniquement sur le texte indicatif dans les champs, choisissez un type de saisie et un clavier adaptés, et indiquez clairement l’action suivante. Si l’inscription exige plusieurs informations, regroupez les champs liés et reportez les préférences facultatives jusqu’à l’arrivée dans le produit.

L’authentification doit fonctionner avec le remplissage automatique et les gestionnaires de mots de passe. Utilisez des noms de champs et une sémantique standard, et évitez les comportements personnalisés qui empêchent le remplissage des identifiants. Ne bloquez pas le collage d’un mot de passe : les personnes peuvent utiliser un gestionnaire ou un autre outil. Les recommandations WCAG demandent de permettre aux navigateurs et aux gestionnaires tiers de renseigner les champs de connexion.

Le comportement peut varier selon les appareils et les gestionnaires de mots de passe : vérifiez donc le parcours sur les plateformes prises en charge et permettez les corrections manuelles. Après un échec, conservez si possible les valeurs utiles non sensibles, comme l’adresse e-mail.

• Utilisez un libellé visible tel que « Adresse e-mail » et un libellé clair pour le mot de passe.
• Permettez aux personnes d’afficher ou de vérifier leur mot de passe lorsque c’est approprié, sans faire de ce contrôle leur seule façon de corriger la saisie.
• Placez le bouton principal près des champs et donnez-lui un libellé précis, comme « Créer un compte » ou « Se connecter ».

Prévoir les erreurs, la récupération et la prochaine visite

Une erreur utile indique en texte le champ concerné ou l’étape qui a échoué, puis explique comment continuer. « Un problème est survenu » ne suffit pas lorsque le format d’un e-mail est incorrect ou qu’un champ est vide. Le critère de succès 3.3.1 des WCAG 2.2 exige que les erreurs de saisie détectées soient identifiées et décrites par du texte ; la couleur ou une icône ne doivent pas porter seules le message.

Employez un ton neutre et placez les conseils propres à un champ près de celui-ci. Pour une adresse mal formée, un exemple hypothétique serait : « Saisissez une adresse e-mail au format [email protected]. » En cas de connexion échouée, un produit pourrait indiquer : « Nous n’avons pas pu vous connecter avec ces informations. Vérifiez votre adresse e-mail et votre mot de passe, ou réinitialisez ce dernier. » Évitez de révéler des informations sensibles sur le compte dans les erreurs ; choisissez une formulation adaptée aux besoins du produit en matière de confidentialité et de prévention des abus.

Expliquez ce qui se passe après une demande de réinitialisation, prévoyez un retour vers la connexion et aidez les personnes à retrouver leur ancienne méthode d’accès. Lors des visites suivantes, indiquez clairement l’état connecté et donnez accès aux réglages du compte, à la déconnexion et à l’aide. Si des comptes peuvent être créés dans l’application, rendez la suppression du compte facile à trouver.

• Associez chaque erreur au champ qu’elle décrit et rendez-la perceptible sans dépendre de la seule couleur.
• Placez les actions de récupération près du formulaire de connexion et évitez d’imposer un redémarrage inutile.
• Examinez les états des nouveaux utilisateurs et de ceux qui reviennent, notamment après un changement d’adresse e-mail ou lorsqu’une méthode de connexion est indisponible.

Un examen pratique du parcours de compte

Parcourez le processus comme une nouvelle personne, une personne de retour et quelqu’un qui tente de récupérer son accès. Examinez les écrans dans leur contexte. La bibliothèque de motifs mobiles peut aider les équipes à comparer l’organisation des saisies, des libellés et des actions dans les formulaires.

• Les personnes peuvent-elles accéder à une valeur utile du produit avant de se connecter lorsque le compte n’est pas indispensable ?
• L’écran explique-t-il pourquoi un compte est nécessaire et quelles informations sont obligatoires ?
• Peut-on distinguer l’inscription, la connexion, les autres méthodes et la récupération du compte ?
• Les libellés des champs restent-ils visibles, et le remplissage automatique et le collage peuvent-ils renseigner les identifiants ?
• Les erreurs décrivent-elles le problème en texte, conservent-elles les saisies utiles et suggèrent-elles une étape suivante ?
• Après une réussite, la personne revient-elle à la tâche qu’elle avait commencée ?