Les designs des pages de connexion doivent être faciles à comprendre et ne nécessiter aucune réflexion de la part de l'utilisateur. En voici plus de 40 pour inspirer votre prochain design !
Suite à notre article sur les formulaires d’inscription géniauxnous examinons de plus près des formulaires de connexion inspirants, dotés d’une excellente UX et qui facilitent l’ouverture de session.
Lorsqu’il s’agit d’un bon design de page de connexion, vous voulez rendre l’accès à votre produit ou service aussi facile que possible pour vos utilisateurs.
Concevoir des pages de formulaire de connexion à un site web avec Justinmind
Un obstacle de trop et vous risquez de frustrer vos utilisateurs. Pour éviter toute frustration, voici 40 designs de pages de connexion que nous adorons. Inspirez-vous-en pour vos prototypes et validez les formulaires!
Prêt à plonger ? InsideBoxLa page de connexion de Justinmind est conçue pour être facile à utiliser. Elle est d’une simplicité rafraîchissante, à l’image d’une page de connexion bien designée. Deux champs clairs pour votre email et votre mot de passe sont tout ce dont vous avez besoin pour commencer. Un message amical « commencez votre voyage » vous souhaite la bienvenue, et un exemple d’email pré-rempli vous assure que vous savez exactement quel format utiliser. De plus, l’option « Afficher le mot de passe » vous permet de voir ce que vous tapez pour plus de sécurité. C’est tout ce dont vous avez besoin pour une expérience de connexion fluide et conviviale.
Oubliez les formulaires encombrés – ce exemple de prototype de page de connexion est conçu pour offrir une expérience d’une simplicité rafraîchissante. Il est clair et concis. Il vous suffit de saisir votre nom, votre adresse électronique et de choisir votre domaine d’intérêt pour personnaliser votre parcours. En allant droit au but, cette page de connexion permet à tous les utilisateurs d’identifier les principaux champs et de les remplir respectivement. De plus, l’illustration de la jeune fille lisant avec son chat est invitante, ce qui vous donne envie de vous inscrire et de vous installer confortablement avec votre livre préféré et votre ami à fourrure. Nous adorons cet exemple de page de connexion !
La page de connexion de LemonPie est designée pour être la plus simple possible. Elle ne comporte que deux champs : votre adresse électronique et un mot de passe pour sécuriser votre compte. Le message rassurant « Gardez vos données en sécurité » figure au-dessus du formulaire, ce qui vous permet de savoir que vos informations sont entre de bonnes mains. L’exemple de la page de connexion illustre également le processus de vérification en deux étapes, très demandé, qui garantit un accès sécurisé à la plateforme. Facile à utiliser LemonPie !
La page de connexion de TheCubeFactory vous accueille avec un look convivial et élégant. Sur la gauche, le formulaire de connexion est simple, il suffit d’indiquer votre email et votre mot de passe. Vous avez besoin d’un moyen d’accès plus rapide ? Il y a une option « Se souvenir pendant 30 jours », et si vous avez oublié votre mot de passe, un lien rapide est à votre disposition. Vous pouvez même choisir de vous « connecter avec Google » pour une expérience plus rapide.
Kryptonite est simple et clair. Dès l’écran de votre téléphone, vous êtes accueilli par un chaleureux « Bienvenue dans notre application ». La création d’un compte est rapide : il vous suffit d’indiquer votre adresse électronique, de définir un mot de passe et de le répéter pour être sûr. Le bouton « S’inscrire » est grand et facile à repérer. Vous n’êtes pas encore prêt à créer un compte ? Ne vous inquiétez pas, vous trouverez un lien « Se connecter » au bas de la page. Avec son design épuré et sa fluidité, Justinmind facilite grandement la prise en main de Kryptonite.
La page de connexion de TrackTV a pour but de vous permettre de vous connecter rapidement. Avec son en-tête jaune vif, elle attire immédiatement l’attention. Le formulaire ne vous demande que l’essentiel : votre adresse électronique et votre mot de passe. Vous voulez gagner du temps plus tard ? Cliquez sur « Se souvenir pendant 30 jours ». Vous avez oublié votre mot de passe ? Pas de problème, un lien rapide vous permet de le réinitialiser. Vous pouvez également ne pas saisir votre mot de passe et vous connecter à l’aide de Google. Et si vous êtes nouveau, cliquez sur le lien « S’inscrire » en bas de page. Facile, convivial et fluide, c’est exactement ce que devrait être la connexion !
CubeFactory vous simplifie la vie. Connectez-vous avec Google ou utilisez votre adresse e-mail et votre mot de passe. Vous avez besoin d’un rappel pour la prochaine fois ? Cochez simplement la case « Se souvenir pendant 30 jours ». Vous avez oublié votre mot de passe ? Le lien est là. À droite, une image apaisante et un message disant « Donnez vie à vos idées ». Vous n’êtes pas encore inscrit ? Cliquez sur « S’inscrire » en bas de page. Facile et accueillant !
Cette page de connexion est très simple. Saisissez votre adresse électronique et votre mot de passe, ou économisez quelques clics en vous connectant avec Google. Si vous avez oublié votre mot de passe, un lien est prévu à cet effet. De plus, l’option « Se souvenir pendant 30 jours » vous évitera bien des tracas la prochaine fois. Vous êtes prêt à vous inscrire ? Le bouton « S’inscrire » vous attend en bas de page.
Parfois, le moins est le plus, et cette page le prouve. Avec seulement un champ pour l’adresse électronique et le mot de passe, vous allez droit au but. L’aspect épuré et minimaliste permet d’éviter les distractions. Vous avez oublié votre mot de passe ? Pas de problème, le lien est là où vous en avez besoin. Et au lieu d’un gros bouton, une flèche douce vous guide. Vous n’êtes pas encore inscrit ? La mention « S’inscrire » figure en bas de page et n’attend que vous. Simple, élégant et direct.
Cette page de connexion est accueillante. Le message d’accueil dit « Bonjour, bienvenue sur votre compte », ce qui donne un ton amical. Il s’agit ici d’un accès facile : il vous suffit de saisir votre adresse électronique et votre mot de passe. Vous voulez gagner du temps la prochaine fois ? Cochez l’option « Se souvenir de moi ». Vous avez oublié votre mot de passe ? Le lien est là pour une réinitialisation rapide. Le bouton « Connexion » en gras se détache, prêt à l’emploi. Vous n’aimez pas taper au clavier ? Vous pouvez également vous connecter avec Facebook, Google ou Apple. C’est simple, convivial et sans tracas.
Cet écran de connexion vous accueille avec un message amical : « Bienvenue dans votre application d’exercice préférée ! » Il est conçu pour être simple, il suffit d’entrer votre email et votre mot de passe, puis d’appuyer sur ce bouton bleu gras « Se connecter ». Si vous avez oublié votre mot de passe, vous trouverez un lien de rappel juste en dessous. Le design incurvé en bas ajoute une touche agréable et rafraîchissante, rendant l’ensemble de l’expérience détendue et motivante.
Qui peut résister à cette pile de crêpes ? Cet écran de connexion donne un ton confortable et accueillant. Un sympathique « Rebonjour ! » vous accueille et vous permet de vous reconnecter facilement. Il vous suffit de saisir votre adresse électronique et votre mot de passe, puis d’appuyer sur le bouton violet lumineux « Connexion ». Vous avez besoin de réinitialiser votre mot de passe ? Le lien est là. Si vous êtes nouveau, il vous suffit de cliquer sur « S’inscrire » en bas de page. Le site est chaleureux, accueillant et vous permet d’aller là où vous le souhaitez.
Audacieux et direct, cet écran de connexion va droit au but. Avec un arrière-plan bleu vif et une icône simple, il vous invite à « Parler, ami, et entrer ». Il vous suffit de saisir votre adresse électronique et votre mot de passe, et le tour est joué. Le bouton noir « Se connecter » est bien visible, ce qui le rend facile à repérer. Il y a même une petite icône d’information à côté du champ de l’adresse électronique, au cas où vous auriez besoin d’un peu d’aide. Propre, net et sans fioritures.
La page de connexion de SaleSkip trouve un équilibre entre esthétique épurée et convivialité. Elle utilise un schéma de couleurs moderne bleu et blanc avec un fond géométrique subtil pour une sensation de fraîcheur. Un message d’accueil amical avec une icône en forme d’étoile donne un ton accueillant, tandis qu’un texte clair met en évidence la proposition de valeur de SaleSkip.
La page de connexion elle-même est simple, avec des libellés clairs pour l’adresse électronique et le mot de passe, et un bouton élégant pour « Se connecter maintenant ». Pour plus de commodité, il existe également une option de connexion sociale avec Google. Enfin, un lien discret « Cliquez ici » permet aux utilisateurs oublieux de récupérer leur mot de passe. Dans l’ensemble, cet identifiant est propre et aussi esthétique que convivial. À recommander à 100 % !
Bondroy’s La page de connexion n’est pas la page d’accueil habituelle. Elle est comme l’aînée des pages de connexion, à la fois élégante et fonctionnelle. Le côté gauche utilise un thème de couleur noir et blanc avec des bandes diagonales, créant un design clair et moderne. Sur la droite, l’approche est plus conviviale. Des champs étiquetés pour l’adresse électronique, le mot de passe et une case à cocher « Se souvenir de moi » garantissent une expérience de connexion fluide. En outre, un lien « Réinitialiser le mot de passe » est fourni pour les besoins de récupération du compte.
Enfin, un bouton « Connexion » bien visible est placé pour faciliter l’accès. L’enregistrement des nouveaux utilisateurs est possible grâce à un lien dédié, tandis que les utilisateurs existants ont la possibilité de se connecter à l’aide de leur compte Google ou Twitter pour plus de commodité. Une solution gagnante à nos yeux !
Nous sommes absolument ravis de cet exemple de page de connexion. Il y a quelque chose dans cette couleur qui fait mouche, n’est-ce pas ? n’est-ce pas ? Quant à la page de connexion elle-même, elle va droit au but et propose un design épuré qui facilite la navigation. Pas de graphiques ou de polices de caractères bizarres, mais une présentation claire qui vous permet de planifier votre voyage. Le message de bienvenue est amical et direct, vous faisant savoir qu’ils sont heureux de vous voir revenir.
Les options de connexion sont simples : continuez avec Google pour une vitesse fulgurante, ou entrez votre nom d’utilisateur et votre mot de passe comme un chef. Besoin de réinitialiser votre mot de passe ? Ils vous soutiennent également dans ce domaine.
L’exemple de page de connexion de Tasky, trouvé sur Dribbble, illustre un design UX qui mêle harmonieusement esthétique et fonctionnalité. La palette de couleurs lilas, souvent associée à la tranquillité, crée une atmosphère apaisante lors de l’inscription, en particulier pour les nouveaux utilisateurs. Ce sentiment d’aisance est encore renforcé par l’illustration claire et agréable d’un personnage en forme de bâton tenant une liste de tâches.
À notre avis, il n’est pas nécessaire d’ajouter une autre image, car cette façon de faire est un peu plus encombrante. Cependant, la mise en page donne la priorité au formulaire de connexion avec les champs email et mot de passe. Dans l’ensemble, Tasky a gagné nos cœurs avec cet exemple de page de connexion.
Cette concept Nike La page de connexion met le feu aux poudres (jeu de mots) avec une palette de couleurs violettes audacieuses qui se détachent sur des éléments d’un blanc éclatant. Elle est élégante et moderne, à l’image de leurs chaussures. Le swoosh de Nike occupe le devant de la scène, aussi bien en haut qu’à l’intérieur de la page de connexion, ce qui permet de garder la marque à l’esprit. De plus, l’image d’une chaussure Nike attire votre attention.
Malgré tout ce style, la page reste conviviale. Les nombreux espaces blancs et la mise en page épurée évitent toute sensation d’encombrement. Le texte est moderne et facile à lire, ce qui est parfait pour les athlètes en déplacement. D’un point de vue fonctionnel, c’est un coup de maître. Les champs du formulaire sont simples, et il y a un lien « Mot de passe oublié » au cas où. Les options de connexion aux réseaux sociaux sont présentes pour plus de commodité. Et ce gros bouton « Connexion » vous supplie pratiquement de « le faire ».
Concevoir des pages de formulaire de connexion à un site web avec Justinmind
Plongez directement dans votre flux grâce à la page de connexion à l’application sans effort d’Instagram. Elle complète parfaitement l’accent mis sur les beaux visuels avec un flux minimal et intuitif, vous permettant de retourner dans votre monde Insta plus rapidement que vous ne pouvez dire « double tap ».
Il vous suffit d’un minimum d’informations (votre nom d’utilisateur et votre mot de passe) pour vous retrouver dans la boucle et faire défiler les photos et les vidéos de vos amis et de vos créateurs préférés. Les champs supplémentaires qui ralentissent les utilisateurs ont été supprimés, et vous pouvez même vous connecter avec votre compte Facebook existant, ce qui vous évite de devoir créer de nouvelles informations d’identification. Nous vous aimons Insta !
Simplifiez votre accès au monde numérique grâce à la procédure d’inscription de Google. Dotée de toutes les caractéristiques d’une bonne page de connexion, elle privilégie la clarté et la facilité d’utilisation. Saisissez votre nom et créez votre mot de passe – c’est tout !
Nul besoin de mise en page complexe ou d’informations excessives. Google vous permet également d’utiliser votre adresse électronique existante pour plus de commodité, sans avoir à en créer une nouvelle spécifiquement pour ses services. Bravo Google, qui ouvre toujours la voie à l’excellence !
À l’image de la plateforme qui met l’accent sur l’engagement instantané, se connecter à X (anciennement connu sous le nom de Twitter) prend moins de temps que de prononcer le nom de la plateforme elle-même !
Les options de connexion sociale avec vos comptes Google ou Apple vous facilitent grandement la vie, n’est-ce pas ? X le sait et le préfère, c’est pourquoi il le propose comme première option de connexion. La deuxième option est la bonne vieille méthode qui consiste à saisir votre numéro de téléphone, votre adresse e-mail ou votre nom d’utilisateur. Les deux sont valables, mais nous pensons que la première option l’emporte à notre humble avis.
Pintrest a pour vocation de trouver l’esthétique à laquelle vous ne pouvez vous empêcher d’adhérer. C’est pourquoi ils sont tenus de présenter les informations de manière claire et concise, tout en veillant à ce qu’elles attirent l’attention des créatifs. Les normes sont élevées, et ils relèvent le défi à chaque fois qu’ils en ont l’occasion.
Il vous suffit de saisir votre adresse e-mail ou votre nom d’utilisateur et votre mot de passe, ou de vous connecter à l’aide de Facebook ou de Google, et de vous préparer à plonger dans un monde d’inspiration sans fin !
Envie d’un appartement parisien douillet ou d’un bungalow de plage dynamique ? La connexion à Airbnb est aussi simple qu’un lit fraîchement fait. Oubliez les problèmes de mot de passe : utilisez votre compte Google ou Apple pour un accès instantané.
En quelques clics, vous êtes de retour dans le havre Airbnb, prêt à explorer des annonces uniques ou à gérer vos aventures d’hébergement. C’est le remède idéal contre le décalage horaire : évitez l’attente et plongez directement dans l’organisation de votre prochaine escapade inoubliable.
Découvrez la connexion de Slack pour un cours magistral sur l’efficacité de l’UX. Designé pour refléter leur fonction principale de rationalisation du travail d’équipe, il vous permet de collaborer ASAP avec un minimum d’effort.
Ils y parviennent grâce à une combinaison de fonctionnalités exceptionnelles : une connexion simplifiée ne nécessitant qu’un e-mail et un mot de passe, une intégration familière avec les comptes Google et Apple pour éviter la création de nouvelles connexions, et même des liens magiques pour faciliter l’accès sur de nouveaux appareils. L’interface elle-même est propre et sans encombrement, avec un flux clair et intuitif qui minimise le besoin d’exploration ou d’instructions.
La page de connexion de Zoom propose des options de connexion familières telles que Google, Apple, Facebook ou d’autres comptes SSO qui simplifient encore l’accès. L’interface est claire et intuitive, privilégiant l’expérience de l’utilisateur avec des instructions claires et un processus d’adhésion simple.
Cependant, la sécurité n’est pas sacrifiée – les mots de passe de réunion, l’authentification à deux facteurs et les salles d’attente garantissent que seuls les participants autorisés se joignent à la réunion, ce qui fait de la connexion de Zoom une solution complète pour une expérience de visioconférence fluide et sécurisée.
L’expérience de connexion de Microsoft jongle avec les besoins d’une vaste base d’utilisateurs, qu’il s’agisse d’utilisateurs occasionnels d’Outlook ou de professionnels en entreprise. Cela se traduit par une approche à multiples facettes qui concilie l’accessibilité et une sécurité solide. Les utilisateurs peuvent utiliser leur compte Microsoft habituel pour bénéficier d’une expérience unifiée dans tous les services.
L’interface s’adapte à la méthode de connexion choisie, en affichant les options pertinentes, tandis que des fonctions telles que l’accès conditionnel et l’authentification multifactorielle garantissent la sécurité sans perturber le flux.
Netflix est la première plateforme de streaming que tout le monde aime. Il continue de dépasser les attentes en matière de design UX et UI et cela se reflète dans leur page de connexion. Nous adorons le contraste entre l’aspect professionnel et l’aspect ludique. Le business, c’est le formulaire de connexion noir et solide, contre une sélection amusante de films et de séries, présentés dans la plus pure tradition des plateformes de streaming.
Vous avez le choix entre vous connecter avec votre adresse électronique ou votre numéro de téléphone portable, ou utiliser un code de connexion. Vous pouvez également demander un nouveau mot de passe à partir du même bloc et lui demander de se souvenir de vous afin que vous n’ayez pas à repasser par le processus de connexion chaque fois que vous voulez regarder toute la série Bridgerton. (Oui, nous aussi, nous sommes obsédés).
Vous souhaitez faire vos achats le plus rapidement et le plus efficacement possible. Amazon le sait. C’est pourquoi sa page de connexion va droit au but. Identifiez-vous avec votre adresse électronique ou votre numéro de téléphone, cliquez sur « Continuer », entrez votre mot de passe et hop, c’est parti !
L’espace blanc de cette page de connexion est intentionnel, car il permet de n’afficher que les informations essentielles et de vous demander si vous avez besoin d’aide pour vous connecter. Elle vous relie également à Amazon Business pour un accès facile et une efficacité accrue.
Besoin d’un coup d’œil rapide sur les dernières nouvelles ou les sujets à la mode ? Pas de problème ! Reddit vous permet d’explorer librement le contenu sans avoir besoin d’un compte. Pour ceux qui souhaitent participer à la conversation, la création d’un compte prend moins d’une minute. Il vous suffit d’ajouter un nom d’utilisateur, une adresse électronique et un mot de passe.
L’interface privilégie l’expérience de l’utilisateur avec une présentation claire, des options précises pour la création d’un compte et la navigation anonyme, ainsi qu’une fonction « Se souvenir de moi » pour les visiteurs fréquents. Et pour que tout cela soit une réussite, la compatibilité avec plusieurs appareils garantit une transition en douceur entre les écrans.
Pour les développeurs, la connexion à GitHub est comme un compilateur bien huilé, conçu pour la vitesse et l’efficacité. À l’image de l’accent mis sur la productivité des développeurs, la connexion vous permet de coder et de collaborer en un clin d’œil.
Les champs minimaux – nom d’utilisateur/email et mot de passe – permettent de rester rapide, tandis que les options de connexion familières via les comptes GitHub existants ou Google/Apple éliminent le besoin d’informations d’identification distinctes. L’authentification à deux facteurs est facilement disponible pour les développeurs soucieux de la sécurité, sans entraver le flux de connexion.
Concevoir des pages de formulaire de connexion à un site web avec Justinmind
PayPal remporte la palme du minimalisme. Vous ne sauriez pas sur quel site vous vous trouvez s’il n’y avait pas le petit logo de PayPal en haut de la page d’accueil.
Ce qui est intéressant et inhabituel dans cette page de connexion, c’est qu’elle est en deux parties. Vous entrez votre adresse électronique, puis vous cliquez sur « suivant » pour accéder à un écran vous permettant de modifier votre mot de passe.
Nous ne savons pas pourquoi PayPal a décomposé son processus d’inscription de la sorte, d’autant plus qu’il prend plus de temps que d’habitude.
La page de connexion de Linkedin est d’un design simple – vous n’y trouverez pas d’images de fond ni d’animations. Le fait est qu’une page de connexion n’a pas besoin d’être intéressante en fin de compte. C’est un simple moyen de parvenir à une fin, ce qui en fait une page parfaite pour un design sans distraction.
Linkedin reflète cela dans la simplicité du design de sa page de connexion. Avec un petit texte sympathique et motivant, la possibilité d’utiliser votre numéro de téléphone pour vous connecter et l’option d’afficher le mot de passe, elle remplit toutes les conditions requises. Elle remplit sa mission et offre aux utilisateurs une validation en cas de besoin. Qu’attendez-vous d’autre d’un formulaire de connexion ?
Uber utilise des illustrations sympathiques et fidèles à la marque sur sa page d’inscription.
Les utilisateurs ne resteront pas longtemps sur une page d’inscription (si vous l’avez bien designée), mais l’utilisation d’illustrations ajoute un intérêt visuel et donne un peu de vie à un écran autrement fade.
Les utilisateurs peuvent s’identifier avec leur adresse électronique ou leur numéro de téléphone portable. C’est très simple !
Le National Geographic dispose d’un formulaire de connexion standard – pas de surprise ici. Peu d’éléments méritent d’être commentés, car il s’agit d’un bon exemple de formulaire de connexion.
Les entreprises américaines et canadiennes ont l’habitude d’utiliser des titres de propriété, et National Geographic s’est conformé à la tradition.
Ce qui nous plaît sur cette page, c’est le texte « Besoin d’aide pour vous connecter ? Visitez notre centre d’aide ». Un bon texte utilise un langage familier à ses lecteurs et nous pouvons imaginer cette phrase sortant directement de la bouche de quelqu’un.
Lorsqu’il s’agit de pages de connexion rapides et faciles, Medium pourrait bien remporter la palme. En effet, les utilisateurs ne sont pas immédiatement invités à fournir leur adresse électronique, leur nom d’utilisateur ou un quelconque mot de passe. L’accès à la plateforme peut être obtenu en fonction de votre accès à d’autres plateformes populaires, comme Facebook ou Twitter.
Si les utilisateurs le souhaitent, ils peuvent choisir l’option « S’identifier par courriel », ce qui correspond à une approche plus classique. Le format de connexion modal du design de la page de connexion permet une expérience minimaliste, avec le blanc comme couleur dominante.
À l’instar de Paypal, le Washington Post divise également son formulaire de connexion en deux étapes. La page de connexion elle-même est assez simple, le formulaire occupant le centre de la scène.
Il convient de noter que les utilisateurs peuvent se connecter avec leur compte Amazon. Le géant du commerce électronique et la plateforme d’information appartenant tous deux à Jeff Bezos, nous aurions dû nous en douter !
Concevoir des pages de formulaire de connexion à un site web avec Justinmind
Le design de la page de connexion de Spotify est d’une grande simplicité. Les utilisateurs voient un fond blanc, sans illustration ni autre élément graphique. Spotify offre aux utilisateurs la possibilité de se connecter en utilisant Facebook, ainsi que l’option de rester connecté.
Ce que nous apprécions dans ce formulaire de connexion, c’est qu’il bénéficie d’une validation en ligne dans les champs du nom d’utilisateur et du mot de passe, ce qui offre aux utilisateurs un peu d’aide à l’utilisation. Un autre type de validation s’affiche au-dessus du formulaire de connexion en cas d’échec. Toutes les validations bénéficient de couleurs et d’autres indices visuels.
Le formulaire de connexion de Dropbox se trouve sur la page d’accueil. Le formulaire de connexion, sur un côté de la page, vous demande de vous connecter à l’aide de votre compte Google ou Apple. Il comprend également des champs pour renseigner votre adresse électronique et votre mot de passe.
L’autre côté de la page comprend une illustration d’un employé qui « s’inscrit » au travail. C’est très astucieux ! Le résultat est un beau contraste qui divise clairement l’écran et empêche le formulaire de connexion de paraître fade.
Mailchimp a récemment fait l’objet d’un rebranding qui commence à mûrir pour devenir une plateforme de marketing à part entière. La page de connexion est similaire à l’ancienne, avec quelques changements mineurs.
La première est l’injection de personnalité. Leurs illustrations sont bizarres et adaptées. Ce qui est génial avec cette page de connexion, c’est que vous pouvez vous connecter comme vous le feriez sur n’importe quelle page de connexion, mais il y a une chance d’apprendre quelque chose de nouveau : comment construire de meilleures relations avec votre public – quelque chose que beaucoup d’utilisateurs de Mailchimp veulent sans doute faire. Même si le texte est minimal sur cette page de connexion, il reste clair et cohérent, comme vous pouvez le voir dans la section « mot de passe/nom d’utilisateur oublié ».
Sephora utilise une fenêtre modale pour le design de sa page de connexion. Nous apprécions le choix judicieux des mots utilisés. Les utilisateurs peuvent faire la différence entre se connecter et s’inscrire – cela se résume à la question « Nouveau chez Sephora ? ». Si vous avez déjà un compte, vous pouvez utiliser votre adresse e-mail et votre mot de passe pour vous connecter. Si vous n’avez pas de compte, vous pouvez cliquer sur le bouton « Créer un compte » et vous rendre sur une autre page pour faire exactement la même chose !
Nous apprécions également le fait que la validation du champ de saisie de l’adresse électronique ait été poussée plus loin. Il ne se contente pas d’indiquer à l’utilisateur que quelque chose ne va pas avec l’e-mail tapé, mais il inclut également le format correct de tout e-mail donné. C’est un tout petit détail, mais certains utilisateurs dans la nature virtuelle nous ont remerciés pour cette aide supplémentaire.
La page du formulaire de connexion de Ted divise également l’écran en deux, en utilisant du blanc pour la zone du formulaire et des tons colorés pour le côté opposé de la page. Le formulaire de connexion lui-même est simple, offrant aux utilisateurs la possibilité de se connecter avec leur compte Facebook ou Google.
Voici un autre exemple de page de formulaire de connexion qui sépare le processus de connexion en deux étapes. Nous sommes toujours heureux de voir une validation dans le formulaire qui rend le format correct pour écrire l’adresse électronique clair comme de l’eau de roche !
La connexion sociale est très utile car elle permet aux utilisateurs de se connecter à un service en un seul clic. Il n’est pas nécessaire de remplir un formulaire ou de taper votre mot de passe. Skillshare donne à la connexion sociale une place de choix en haut du formulaire de connexion.
Mais si vous ne souhaitez pas le faire, vous pouvez saisir votre adresse électronique et votre mot de passe juste en dessous. Ce formulaire de connexion fait le travail.
Squarespace pousse son formulaire de connexion à la limite du minimalisme. Il est dépouillé, sans distraction, ce qui est tout à fait ce que vous attendez d’un formulaire de connexion.
Avec les formulaires de connexion, vous n’avez pas besoin de convaincre les gens de la même manière qu’avec un formulaire d’inscription, il est donc essentiel de créer un environnement où les gens peuvent s’inscrire sans frustration. Squarespace a choisi d’utiliser des icônes de médias sociaux pour son formulaire de connexion au lieu des boutons d’appel à l’action habituels que l’on trouve dans d’autres formulaires. Ils s’intègrent bien au design et contribuent à l’approche minimale.
La page de connexion d’Evernote s’en tient à un design simple, sans distractions colorées ni animations. Le processus de connexion est divisé en deux étapes, les utilisateurs donnant leur mot de passe lors de la deuxième étape. Les utilisateurs peuvent également se connecter avec leur compte Google.
Le formulaire de connexion lui-même s’en tient à l’essentiel, ne montrant aux utilisateurs que l’intitulé du champ de saisie et le slogan de la marque. Le formulaire de connexion donne également aux utilisateurs la possibilité de rester connectés pendant 30 jours supplémentaires – le fait de donner une fenêtre de temps spécifique pour rester connecté est un détail intéressant.
Concevoir des pages de formulaire de connexion à un site web avec Justinmind
Ce design de page de connexion joue également sur le contraste entre un côté coloré et un côté plus sobre où se trouve le formulaire. Dribbble présente une séparation verticale de l’écran, montrant aux utilisateurs une illustration colorée réalisée par un utilisateur de Dribbble. Il va sans dire que l’illustration est excentrique et colorée, à l’image du concept de Dribbble lui-même.
En ce qui concerne le formulaire de connexion, nous apprécions que les libellés des champs de saisie ne disparaissent pas lorsque l’utilisateur commence à taper. Les utilisateurs ont également la possibilité de se connecter en utilisant leurs médias sociaux. La validation du formulaire de connexion s’affiche après un échec, mais ne précise pas exactement ce qui n’a pas fonctionné. Bien que nous soyons toujours heureux de voir un peu de texte et pas seulement l’utilisation de la couleur pour la validation (le daltonisme est un problème courant !), nous aurions aimé qu’il y ait un peu plus de détails pour les utilisateurs confus.
Le design de la page de connexion de Mangools est principalement blanc, mais parvient tout de même à offrir des éclats de couleur qui collent à l’identité de la marque. Bien qu’il n’y ait pas d’option pour se connecter en utilisant les plateformes de médias sociaux, étant donné la nature commerciale de l’outil, c’est pardonnable.
La validation qui apparaît à la suite d’une tentative de connexion échouée aide les utilisateurs en leur montrant le format correct des courriels. Nous apprécions le fait que le formulaire de connexion comporte à la fois des étiquettes et des espaces réservés, avec un exemple de ce que les utilisateurs doivent mettre dans ce champ. Des points pour la convivialité ! L’une des caractéristiques de cette page est qu’avec les formes graphiques petites mais puissantes en arrière-plan, on a presque l’impression d’être en mouvement. C’est une manière douce de rendre le design de la page de connexion agréable, sans distraire l’utilisateur du formulaire de connexion.
Encore un design de page de connexion qui divise tout au milieu verticalement. AWWWARDS utilise une image pour le côté gauche qui capture parfaitement l’attrait de la plateforme, nous attirant dans une foule de participants anxieux – tous attendant de savoir qui a gagné un certain prix.
Le formulaire de connexion, situé à droite de l’écran, est simple et direct. Les utilisateurs bénéficient d’une validation visuelle des champs de saisie du nom d’utilisateur et de l’adresse électronique, ainsi que de la possibilité de rester connecté. Comme toujours, les options de connexion via les médias sociaux sont les bienvenues ! La palette de couleurs est une touche agréable.
Headspace est un service de méditation. La page de connexion correspond à ce que l’on peut attendre d’une entreprise qui souhaite que vous trouviez la paix intérieure. Elle est minimale et les couleurs sont discrètes. Le type et la composition des éléments sont bien construits et spacieux. Le formulaire de connexion respire.
La page de connexion nous propose trois façons de nous connecter. L’une d’entre elles est Spotify. Headspace met son matériel audio sur Spotify, il est donc logique que les utilisateurs puissent se connecter avec ces informations d’identification – cela montre que Headspace connaît et se soucie de son public et veut lui rendre la vie encore plus pratique.
Concevoir des pages de formulaire de connexion à un site web avec Justinmind
Charles Schwab est une banque et une société de courtage. La page de son formulaire de connexion est simple – comme la majorité des formulaires de connexion – et ne sort pas de l’ordinaire. Ce qui est intéressant dans ce formulaire, c’est le texte « 4 conseils rapides pour mieux protéger votre compte ». Cela montre que la banque se soucie de vous et de votre sécurité. Les conseils sont applicables, ce qui signifie que vous pouvez les mettre en pratique dès que vous les avez lus.
Nous avons également beaucoup apprécié le menu déroulant de la page d’accueil de ce formulaire de connexion. Vous pouvez faire beaucoup de choses avec votre banque et il y a beaucoup d’informations à assimiler lorsqu’il s’agit de banque en ligne et d’investissement. Cette fonction permet aux utilisateurs de choisir la page de départ. Cela signifie qu’ils sont moins susceptibles de se perdre lors de la navigation, ce qui risque de les frustrer.
Nous avons vu cette page d’affichage sur Dribbble par Selecto et nous l’avons trouvée géniale.
L’animation combine les pages d’inscription et d’enregistrement, ce qui est une bonne chose. Comme on peut s’y attendre, il y a des icônes de connexion sociale et du texte indicatif – tout cela pour aider l’utilisateur à faire ce qu’il veut.
Les formulaires de connexion sont un exercice visant à faciliter la vie de vos utilisateurs. Les connexions sociales, le texte de remplacement et les étiquettes claires sont quelques-uns des moyens de créer un formulaire de connexion convivial. Inspirez-vous des 40 exemples ci-dessus. Maintenant, commencez à prototyper !