Meilleures pratiques pour la conception de l'écran de connexion de l'application mobile

Bien que cela puisse sembler le moindre de vos soucis, l’écran de connexion est la passerelle vers votre application mobile et doit être conçu avec soin. Si vous ne l'avez pas conçu de manière à être facilement accessible et rapide, vous risquez de créer une frustration excessive auprès des utilisateurs là où il n'en est pas nécessaire. Tenez compte de ces meilleures pratiques lors de la conception de votre prochaine application mobile.

Les utilisateurs ne voient pas souvent un écran de connexion. Bien sûr, ils peuvent le voir lors de leur première inscription ou de temps en temps si vous les obligez à vous reconnecter pour des raisons de sécurité. Quelle que soit la fréquence à laquelle ils rencontrent l'écran de connexion, c'est une partie cruciale de leur expérience avec l'application dans son ensemble. Une erreur dans sa conception et vous risquez de vous battre pour que les utilisateurs se connectent simplement à votre application.

En tant que développeur, vous devriez mettre l'accent sur la mise au point et l'amélioration de l'expérience de l'application afin de fidéliser plus d'utilisateurs. . Cela signifie supprimer tout ce qui les empêche de se connecter en premier lieu.

Dans cet article, je présente cinq bonnes pratiques pour vous aider à concevoir le nom de connexion parfait pour une application mobile:

Commençons.

Utiliser une interface sans distraction

Vous pourriez être tenté de concevoir votre écran de connexion avec les types d'éléments accrocheurs qui se trouveraient autrement dans l'application. Mais à quoi ça sert? Vous voulez que les utilisateurs interagissent avec l'application elle-même; ne vous laissez pas distraire par la page de connexion.

Vous devez donc décider à quel degré vous souhaitez concevoir l’écran de connexion. En d'autres termes, quel est le meilleur moyen d'équilibrer une expérience sans distraction avec de la créativité?

Un fond solide est la meilleure voie à suivre. En fait, vous voudrez peut-être revenir à l'essentiel et utiliser un fond blanc comme le fait Instagram :

Si vous ' Si vous êtes inquiet qu'une page de connexion entièrement blanche soit trop ennuyeuse ou hors marque, vous pouvez toujours charger une page de démarrage avant l'écran de connexion comme le fait Canva :

Ainsi, la première impression est frappante et mémorable, tout en créant un accueil plus chaleureux pour les nouveaux utilisateurs.

N'oubliez pas: vous souhaitez simplifier le nombre d'étapes nécessaires pour qu'un utilisateur accède à l'application. Faites donc attention à la quantité de contenu qui apparaît sur votre écran de démarrage. Les diapositives d'intégration telles que celles de Canva peuvent convenir. Cependant, quelque chose comme cet exemple Bank of America est certainement trop:

Conservez le contenu à l'intérieur de l'application. ] Faciliter le remplissage du formulaire

À l’heure actuelle, je pense que la plupart des développeurs d’applications reconnaissent que seuls deux champs sont nécessaires sur l’écran de connexion.

Cependant, contrairement aux sites Web qui peuvent se permettre de laisser aux utilisateurs des claviers complets motion crée des noms d'utilisateur pour leurs comptes, les applications doivent rester simples. Le premier champ doit indiquer l'adresse électronique ou le numéro de téléphone .

Vous devez également concevoir le champ de mot de passe pour qu'il soit facile à renseigner. Spécifiquement, il devrait y avoir une option intégrée pour montrer le mot de passe pendant qu'il est tapé. Vous pouvez le faire avec un symbole globe oculaire dans le coin droit du champ ou avec les mots "Afficher" comme Glands le fait bien:

[19659002] Et bien que vous ne puissiez pas donner trop d'indulgence aux utilisateurs en ce qui concerne le mot de passe, vous pouvez leur faciliter la tâche pour retrouver un mot de passe perdu ou oublié avec un "mot de passe oublié?". lien.

Une dernière chose à laquelle il faut réfléchir: le clavier mobile doit être adapté aux types de lettres, de chiffres et de caractères que vos utilisateurs saisissent sur le terrain. Moins ils ont à faire pour basculer entre les claviers et cliquer sur différents champs, plus vite vous les obtiendrez dans l'application.

Erreurs de rendu 100% nette

Vous n'avez pas beaucoup d'espace pour jouer. sur les applications mobiles, donc afficher des erreurs dans le contexte du formulaire peut être délicat. Donc, si vous décidez de ne pas afficher les messages d'erreur à côté des champs dans lesquels ils sont apparus, vous devez trouver un moyen clair de les afficher pour vos utilisateurs.

Commençons par ce que vous ne devriez pas faire.

Voici. comment les erreurs sont signalées sur l'écran de connexion SurveyMonkey :

La fenêtre contextuelle est un bon choix en termes de communication de l'erreur sans occuper d'espace l'application pour le faire.

Cependant, lisez le message. Il n'y a aucune information fournie sur ce qui s'est exactement passé. Le nom d'utilisateur était-il incorrect? Le mot de passe était faux? Le nom d'utilisateur était-il même au bon format pour commencer (par exemple, nom d'utilisateur vs adresse électronique)? L'utilisateur existe-t-il même dans le système? En l'absence d'indications claires sur l'erreur, les utilisateurs pourraient facilement se sentir frustrés par la page de connexion.

Vous pouvez utiliser l'exemple présenté dans Asana pour reformuler vos messages d'erreur:

Celle-ci indique clairement à l'utilisateur que l'erreur concerne le champ mot de passe. De cette façon, il n'est pas nécessaire d'essayer une nouvelle combinaison nom d'utilisateur / mot de passe. S'ils ne connaissent pas leur mot de passe, ils cliquent simplement sur le lien de récupération du mot de passe pour faciliter le retour dans l'application.

Inclure les raccourcis de connexion lorsque cela vous convient

Si vous songez à éviter les frustrations potentielles causées par la connexion Avec les formulaires et les limites de mémoire de vos utilisateurs, vous disposez aujourd'hui d'une grande variété d'options. Celle que vous choisissez, cependant, devrait être dictée par le type d'application que vous concevez.

Par exemple, l'application Canva comprend deux façons de se connecter à une application en plus du menu déroulant typique mot de passe / email:

Compte tenu des types d'utilisateurs qui gravitent vers une application telle que Canva, il est logique qu'elle inclue les connexions via Facebook ou Google.

Une autre connexion pourrait ressembler à cet exemple tiré de Zappos :

Etant donné que Zappos est une société Amazon, les utilisateurs peuvent profiter du confort de sa connexion en un clic.

Juste Soyez conscient des connexions que vous offrez aux utilisateurs. Vos partenaires de connexion doivent être des noms reconnaissables et fiables.

Vous souhaitez également faciliter le choix:

Si nous examinons une fois encore SurveyMonkey, vous constaterez qu'il comporte trop d'options de connexion. :

Ce premier écran de connexion offre la possibilité de se connecter via Facebook. Mais alors…

Le deuxième écran de connexion comprend des options pour vous connecter avec:

• Nom d'utilisateur
• Authentification unique (SSO)
• Google [19659051] LinkedIn
• Office 365

Il peut sembler que vous essayez de satisfaire tous les utilisateurs, mais vous êtes plus susceptible de les laisser fatigués par la décision tout en augmentant le risque qu'ils rencontrent une erreur lors de leur connexion. Choisissez simplement un ou deux canaux parmi lesquels choisir et laissez-le ainsi.

Ou, une autre option à envisager consiste à utiliser un identifiant sécurisé (mais toujours simplifié).

Albert par exemple, verrouille son application avec un code d'accès à quatre chiffres:

Stash utilise la technologie des empreintes digitales pour la connexion:

Et vous avez ensuite l'option Lien magique comme Slack [1 9459010] utilise:

C'est une bonne option si vous devez demander aux utilisateurs de faire un travail supplémentaire pour vous connecter. Par exemple, la connexion manuelle de Slack comporte plusieurs pages. car il doit demander aux utilisateurs de saisir leur nom d'espace de travail Slack avec leur nom d'utilisateur et leur mot de passe. Un MagicLink simplifierait grandement la frappe.

Soyez intelligent dans la conception de vos boutons

Si vous devez concevoir un bouton "Connexion", un bouton "Inscription" ou l'une des options alternatives mentionnées ci-dessus, pensez

La fatigue de la décision est un gros problème pour les utilisateurs, c'est pourquoi il est de votre devoir de concepteur ou de développeur de réduire le nombre de choix qu'ils doivent faire. Ou, du moins, supprimez la distraction des choix qui ne leur sont même pas applicables.

Voici un exemple de ce dont je parle:

Voici l'écran de connexion auquel les utilisateurs peuvent accéder lorsqu'ils se trouvent dans l'application Wyndham Hotels

Tout d'abord, il n'y a pas de boutons. Juste un tas de liens de texte qui emmènent les utilisateurs là où ils doivent aller. Pire encore, car ils sont systématiquement formatés, cela obligera les utilisateurs à lire chaque option pour déterminer celle qui leur convient le mieux.

La décision doit être claire et instantanée, raison pour laquelle la plupart des écrans de connexion des applications sont conçus avec. une mise en page plus logique qui positionne les options les plus courantes, de haut en bas:

Vous ne vous rappelez pas comment vous connecter? Ça va parce que nous avons inclus quelque chose pour vous aider:

Oh, c'est pas ça? Ok, pourquoi ne pas essayer de vous connecter ou de vous inscrire avec l’une de ces options alternatives:

Une autre technique qui fonctionne bien pour le design bouton / lien peut être trouvée dans cet exemple de Duolingo :

Notez que la plupart des interfaces sont blanches, y compris les boutons de connexion sociaux. Ce style de conception de boutons fantômes est toujours une bonne idée si vous souhaitez inclure plusieurs boutons sur la même page, mais que vous souhaitez avant tout que les utilisateurs agissent sur l'un d'entre eux.

Dans ce cas, le bouton "Connexion" est: le seul avec aucun ombrage à elle. Même dans ce cas, il ne remplira pas de couleur tant que le formulaire n'aura pas été correctement rempli – ce qui est un choix de conception judicieux si vous souhaitez empêcher les utilisateurs de rencontrer une erreur qui pourrait facilement être évitée.

Écran de connexion

Lorsque vous concevez des écrans de connexion pour vos applications, voici quelques points à prendre en compte:

• La conception est-elle trop complexe?
• Les options présentées compliquent-elles les choses?
• Des étapes supplémentaires sont-elles nécessaires? pour accéder à l'application?

Bien que vous souhaitiez toujours concevoir un écran de connexion qui vous soit propre, vous feriez mieux de respecter ces pratiques de conception lorsque vous présentez les composants sur votre page de connexion.