Le développement d'échantillons d'écran de connexion doit être pris en compte en 2022

La page de connexion peut sembler être une réflexion après coup lors de la création d'une application. Les écrans de connexion apparaissent rarement et les écrans d'inscription n'apparaissent que lorsque les utilisateurs s'inscrivent. Quelle quantité de concentration un seul écran nécessite-t-il ? Un peu, pour être précis.

L'écran de connexion d'une application mobile agit comme une porte. Après avoir téléchargé une application, la première impression de l'utilisateur sera son interface. Pour éviter la frustration des utilisateurs au premier obstacle, assurez-vous que vos utilisateurs peuvent facilement naviguer et remplir la page de connexion. Pour atteindre vos objectifs commerciaux, engagez le développeur Flutter de Flutter Agency ( www.flutteragency.com ) comme des entreprises pour vous assurer que l'écran de connexion de votre application suit la structure appropriée.

Nous avons dressé une liste de certains des meilleurs écrans de connexion que vous pouvez utiliser comme source d'inspiration pour votre prochain projet d'interface utilisateur mobile.

Pay Pal

PayPal remporte le prix de la simplicité. S'il n'y avait pas le petit logo PayPal en haut de la connexion, vous n'auriez aucune idée de l'endroit où vous vous trouviez.

Cette page de connexion a une caractéristique unique : elle est divisée en deux sections. Vous entrez votre adresse e-mail et appuyez sur le bouton suivant pour changer votre mot de passe. La base d'utilisateurs de PayPal a augmenté de plus de 13 % d'une année sur l'autre au quatrième trimestre 2021 , par rapport à la même période en 2020.

Linkedin

Il n'y a pas d'images ou d'animations de fond sur la page de connexion de LinkedIn. Cependant, une page de connexion ne doit pas nécessairement être esthétique à long terme. C'est un chemin simple vers un objectif, idéal pour une page de conception sans distraction.

La simplicité de la conception de la page de connexion de LinkedIn en est le reflet. Il coche toutes les cases nécessaires avec une copie joyeuse et motivante, la possibilité de se connecter avec votre numéro de téléphone et la possibilité d'afficher le mot de passe.

Il fait ce qu'il est censé faire et donne aux gens un sentiment d'affirmation s'ils en ont besoin. Outre un formulaire de connexion, que demander de plus ?

Uber

La page de connexion d'Uber contient plusieurs dessins créatifs sur la marque. Une page d'inscription ne sera probablement pas visible pendant une période prolongée, mais l'ajout d'un attrait visuel et d'une touche de vie peut aider à maintenir l'engagement des utilisateurs.

Le National Geographic

Il n'y a pas de surprise concernant le processus de connexion à National Geographic. Parce que c'est un bon exemple de formulaire de connexion, il n'y a pas grand-chose à dire à ce sujet. Les entreprises aux États-Unis et au Canada utilisent souvent la casse du titre, et National Geographic a emboîté le pas.

D'autres exemples montrent un mélange de cas de titre et de phrase dans les titres. Écrire dans un style familier au public visé aide le lecteur à imaginer cette ligne comme si elle était dite par une personne réelle.

Moyen

Le support peut être le grand gagnant des sites de connexion conviviaux. Pour commencer, les utilisateurs ne sont pas instantanément invités à fournir leur adresse e-mail, leur nom d'utilisateur ou tout autre mot de passe.

Vous pouvez acquérir l'accès à la plate-forme en fonction de votre utilisation d'autres grands réseaux de médias sociaux, tels que Facebook ou Twitter. Pour ceux qui préfèrent une méthode de connexion plus traditionnelle, ils peuvent choisir l'option Se connecter avec un e-mail.

Le style de base de la page de connexion est amélioré par l'utilisation du blanc comme couleur principale. Cependant, conformément à leur identité, Medium a inclus quelques graphiques dynamiques qui donnent à l'écran une impression de mouvement.

Spotify

La page de connexion de Spotify est une œuvre d'art. Il n'y a pas d'images ou d'autres éléments visuels sur un fond blanc visible pour l'utilisateur. En plus de permettre aux utilisateurs de se connecter via Facebook, Spotify offre également la possibilité de rester connecté.

Ce formulaire de connexion a une validation en ligne dans les sections nom d'utilisateur et mot de passe, ce que nous pensons être une bonne idée car cela contribue à rendre l'état plus convivial. Après une tentative de connexion infructueuse, un autre type de validation apparaît au-dessus du formulaire de connexion.

Il n'y a rien de mal à utiliser la couleur et d'autres invalidations de signaux visuels. Au cours des trois premiers mois de 2022, Spotify compte 182 millions de membres premium dans le monde entier.

Boîte de dépôt

Le formulaire de connexion de Dropbox apparaît comme un modal vertical qui s'étend lorsque l'utilisateur atteint le haut de la page, directement sur sa page d'accueil. Lorsque l'utilisateur fait défiler la page d'accueil, celle-ci se replie. Cela occupe une partie importante de la page et les couleurs utilisées dans ces deux sections sont assez distinctes.

Par conséquent, le formulaire de connexion se distingue du reste de la page par un contraste saisissant. Nous apprécions la validation des e-mails et les choix de connexion aux médias sociaux.

MailChimp

Une refonte est nécessaire alors que Mailchimp se transforme en une plate-forme marketing à part entière. Quelques modifications ont été apportées à leur page de connexion depuis la dernière modification.

L'un d'eux est l'ajout d'un trait de caractère distinctif. Leurs œuvres sont étranges, dessinées à la main, mais bien adaptées. En plus de pouvoir vous connecter normalement, cette page de connexion vous permet d'apprendre à mieux vous connecter avec votre audience, ce que de nombreux utilisateurs de Mailchimp sont probablement intéressés à apprendre à accomplir.

Même si le libellé de cet écran de connexion est clairsemé, la partie mot de passe/nom d'utilisateur oublié est toujours simple et cohérente.

Séphora

La page de connexion de Sephora utilise une fenêtre modale comme élément principal de l'interface utilisateur. Ils ont une excellente maîtrise de la langue anglaise. « Vous souvenez-vous de votre mot de passe ? est tout ce qu'il faut pour faire la distinction entre la connexion et l'inscription.

De plus, nous sommes reconnaissants pour l'effort supplémentaire déployé pour valider l'adresse e-mail saisie dans le formulaire. Plutôt que de simplement alerter l'utilisateur d'une erreur dans son e-mail, il fournit également le format correct pour chaque e-mail séparé. Même s'il s'agit d'une petite fonctionnalité, elle a été appréciée par certaines personnes dans le désert virtuel.

Partage de compétences

Les consommateurs peuvent se connecter à un service en utilisant leurs comptes de médias sociaux en un seul clic. Il n'est pas nécessaire d'entrer votre mot de passe ou toute autre information personnelle. Skillshare affiche bien en évidence une option de connexion sociale tout en haut du formulaire de connexion.

Cependant, si vous choisissez de ne pas le faire, vous pouvez saisir votre adresse e-mail et votre mot de passe directement ci-dessous. Ce formulaire de connexion fait son travail.

Conclusion

Les formulaires de connexion testent la simplicité de connexion de vos utilisateurs. Créez un formulaire de connexion convivial en incluant des connexions sociales, un texte d'espace réservé et un étiquetage distinct. Flutter Agency, une société leader dans le développement d'applications Flutter, vous aide à obtenir les meilleures ressources Flutter et à accéder aux derniers outils.