Inspiration et conseils pratiques pour concevoir sa page de connexion

Télécharger le guide d'introduction HTML et CSS
Amiel Adamony
Amiel Adamony

Mis à jour :

Publié :

Pour augmenter son taux de conversion et baisser son coût par acquisition, une des choses à faire est de créer une bonne page de connexion, mais comment faire ? Cet article propose quelques exemples de pages de connexion réussies, accompagnés de conseils pour les créer.

Téléchargement  >> Le guide gratuit pour optimiser vos landing pages

 

 

L'importance d'une bonne page de connexion

La page de connexion, unique et singulière, se veut au service de la conversion des visiteurs et augmente d'autant le taux de conversion du site de l'entreprise. Ce KPI mesure la proportion d'accès, de connexion ou d'achat sur le site par rapport au nombre de visiteurs l'ayant parcouru. Elle contribue également à diminuer le coût par acquisition, c'est-à-dire gagner plus de clients tout en réduisant les dépenses.

La page de connexion est directement liée au site web, et apparaît dès le premier clic sur le lien affiché sur la page de résultats des moteurs de recherche, mais également des réseaux sociaux de la marque. Cet espace d'identification est intégré au design de la première page du site.

Une bonne page de connexion doit être claire et simple à utiliser, sous peine de voir l'utilisateur abandonner rapidement. Elle doit donc être visible au premier coup d'œil à l'aide de repères : flèches, formes, images ou animations. Ainsi guidé, l'internaute sera plus enclin à consulter le site de la marque.

Attention de bien distinguer l'appel à l'action d'inscription de la connexion afin que les nouveaux venus puissent facilement créer un compte et rejoindre votre communauté d'utilisateurs.

 

Les bonnes pratiques à adopter pour créer une page de connexion qui fonctionne

 

Proposer plusieurs options d'identification

Pour se connecter, l'internaute utilise un identifiant et un mot de passe. Cette connexion varie selon les sites et sollicite l'internaute à mémoriser toutes ces modalités d'accès à ses comptes. Il est donc primordial qu'il puisse se connecter au site même après une longue absence ou à partir d'un nouvel appareil sur lequel ces identifiants ne sont pas disponibles. Le concepteur du site web peut alors proposer une authentification par adresse e-mail ou numéro de téléphone. En cas d'oubli de mot de passe, un lien de réactivation, situé en dessous du champ de connexion, ouvrira une nouvelle page sur laquelle renseigner son adresse e-mail afin de recevoir un code d'accès temporaire ou un lien de redirection pour le modifier.

Pour se connecter à son compte orange, l'identifiant est soit l'adresse e-mail ou le numéro de mobile orange du client, ce qui facilite la connexion.

Orange page de connexion

 

Augmenter la sécurité de ses comptes

Pour plus de sécurité, certains sites web renforcent l'identification via deux facteurs. En effet, la plupart des internautes naviguent sur le web à partir de plusieurs appareils qui doivent être sécurisés. Cette option peut être activée par l'internaute lui-même ou imposée par la marque. Cette protection s'ajoute au mot de passe, une fois celui-ci renseigné. Ce second champ d'identification peut alors être la validation d'une notification sur un autre appareil ou un code de sécurité envoyé sur le mail à saisir sur la page d'accès.

Par exemple, Apple propose l'identification à deux facteurs. Lors de la première étape, l'utilisateur fournit son mot de passe, renseigne un second moyen de communication, souvent le téléphone. Il reçoit alors un code de validation à 6 chiffres à saisir sur la page d'accès. Apple propose également, notamment pour ses téléphones, le Face ID ou Touch ID, soit la reconnaissance faciale et par empreinte digitale.

Apple page de connexion

 

Proposer de rendre visible le mot de passe

La saisie des identifiants se révèle parfois compliquée avec un risque d'erreur accru selon l'appareil utilisé. L'utilisateur doit parfois s'y prendre à plusieurs reprises avant d'arriver à ses fins. Ces opérations répétées peuvent agacer l'internaute, mais surtout bloquer l'accès au compte. En effet, certaines entreprises limitent le nombre de propositions pour éviter le piratage. Aussi, décrypter le mot de passe lors de la saisie grâce à l'affichage des caractères évite les erreurs tout en respectant la confidentialité de l'utilisateur.

Par exemple, laposte.net demande sur une première page, l'identifiant de l'utilisateur : son adresse e-mail. Ensuite, sur une seconde page, il doit entrer son mot de passe. Il est alors possible de rendre visible celui-ci, grâce au petit bouton situé au bout de la case à remplir.

La poste.net page de connexion

 

Demander un e-mail comme identifiant

De nos jours, la plupart des sites exigent l'e-mail de l'internaute comme identifiant pour se connecter et non un nom d'utilisateur. En effet, il peut être difficile de retenir plusieurs noms d'utilisateurs pour plusieurs sites et applications. De plus, la marque pourra être certaine de l'authenticité de l'e-mail de l'utilisateur sur laquelle envoyer les messages de marketing et autres liens de renouvellement de mot de passe. Cette option permet à la marque de se prémunir contre la perte d'audience et de clients en cas d'oubli.

Par exemple, sur Asana, la connexion s'établit en deux champs, le premier avec l'adresse e-mail et un appel à passer à l'étape suivante pour saisir le mot de passe.

Asana_page de connexion

 

Garder l'indispensable

Cette page de connexion doit obligatoirement être à l'image de la marque et en rappeler les marqueurs comme le logo et les couleurs de sa charte graphique. Tous les éléments qui ne sont pas indispensables à l'authentification sont à supprimer. Cette méthode fait gagner du temps aux internautes en les accompagnant dans l'utilisation du site. Sans cela, il y a de grandes chances qu'ils renoncent et partent sur un site concurrent.

Voici deux pages de connexion du réseau social bien connu « Instagram ». Tout d'abord, elles reprennent la charte graphique et le logo. De plus, le contenu est pour chacune clair et efficace.

Instagram page de connexion

 

Se lier aux réseaux sociaux

Il est intéressant pour les marques de proposer à leurs clients un accès via plusieurs options de comptes rattachés à ses différents canaux de communication. Ainsi, l'abonné se connecte au site internet en choisissant un des réseaux sociaux de la marque. Les utilisateurs se contentent d'un seul moyen d'entrée au lieu d'en créer de nouveaux pour chacun.

Sur cette page, les comptes Google, Facebook ou X peuvent être utilisés ainsi que l'e-mail pour la connexion. Ces multiples possibilités simplifient l'accès à l'espace personnel du site qui en devient plus attractif.

identifiant réseaux sociaux page de connexion

 

Réaliser des tests

Les A/B tests sont nécessaires lors de la création d'une page de connexion pour améliorer l'expérience utilisateur. S'inspirer des pages de connexion de ses concurrents ne suffit pas, il faut également apprendre de ses propres erreurs. C'est là qu'intervient l'A/B testing. L'opération consiste à comparer deux pages de connexion distinctes et à évaluer celle à l'origine de plus de conversion et le plus de prospects. C'est l'occasion d'essayer différentes constantes et designs comme l'interface, la couleur des boutons ou des liens en vue de l'optimisation de cette page.

Test ab page de connexion

 

Modèles de pages de connexion inspirantes

La page de connexion de SeedProd permet principalement d'accéder au site, le lien vers l'inscription est lui plus discret. On peut voir sur la droite une image attrayante et sur la gauche, le formulaire de connexion. L'image va à l'essentiel en attirant immédiatement l'œil de l'internaute sur le formulaire.

 SeedProd page de connexion

MonsterInsignts informe les utilisateurs sur ses dernières fonctionnalités, mais fait également la promotion de ses produits et services sur sa page de connexion. Elle se sert de cet espace pour promouvoir son produit, WPForms, susceptible d'attirer tous ceux qui portent un intérêt aux plugins WordPress.

MonsterInsignts_page de connexion

 

Pour aller plus loin dans votre stratégie marketing, maximisez votre potentiel de génération de leads en téléchargeant le guide sur l'optimisation des pages de destination, ou découvrez le logiciel CMS de HubSpot.

Le guide pour optimiser vos landing pages

Sujets : Landing pages

Articles recommandés

Apprendre à différencier et utiliser ces langages de programmation.

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO