1. Accueil  
  2. Design  
  3. Modèles  
  4. Page de connexion

Page de connexion

La page de connexion permet à l’utilisateur de s’authentifier afin d’accéder à un service en ligne.

Anatomie

Les principaux éléments d’une page de connexion sont les suivants :

A - Titre
B - Création de compte (facultatif)
C - Mémorisation de l’identifiant (facultatif)
D - Lien de récupération de mot de passe/identifiant
E - Bouton de connexion
F - Accès alternatif
G - Arrière-plan
H - Champs d’identification
I - Boîte de contenu

Quand l’utiliser

La page de connexion est l’entrée principale d’un service en ligne. Elle s’utilise donc au moment où l’utilisateur a besoin de se connecter pour y accéder.

Types de parcours

Il existe 3 types de parcours qui peuvent être réalisés à partir de la page de connexion : l’authentification, la création de compte et la récupération de l’identifiant ou du mot de passe. Ces 3 parcours sont accessibles selon le type de tâche à réaliser.

L’authentification (ou la connexion) est simple. Elle permet à l’utilisateur de renseigner son identifiant et son mot de passe afin d’accéder au service.

La création de compte permet à l’utilisateur de se créer un compte s’il n’en possède pas. Un formulaire d’inscription pourrait exiger le renseignement de données telles que le nom, le courriel, la date de naissance ou toute autre information pertinente à la création d’un compte. 

La récupération de mot de passe/identifiant est utile lorsque l’utilisateur a oublié son identifiant ou son mot de passe.

Comment l’utiliser

La connexion à un service en ligne et ses parcours connexes doivent être simples à utiliser. Pour éviter d’alourdir inutilement le processus ou la charge visuelle des pages, il faut s’assurer de respecter les règles suivantes.

Les formulaires doivent :

  • Être segmentés en petites étapes.
  • Être rétroactif une fois complété (par exemple, notifier l’utilisateur que sa demande de récupération de mot de passe est en cours à l’aide d’avis ou de notifications contextuelles).
  • Être placé dans des pages distinctes.

Les formulaires ne doivent pas :

  • Contenir d’image.
  • Contenir de contenu autre que ceux nécessaires à la réalisation de la tâche.
  • Être inclus directement dans une page comme la page d’accueil, par exemple.

Informations techniques

La section qui présente le formulaire de connexion est placée sur un arrière-plan de couleur #dae6f0.

Elle est située 80 px sous le bandeau PIV et à 72 px du pied de page.

La majorité des éléments du formulaire présents dans la section de connexion comportent des dégagements de 40 px entre eux.

Lorsque l’élément Création de compte est présent, il se situe 24 px au-dessus du premier champ d’identification.

Les éléments Mémorisation de l’identifiant ainsi que le Lien mot de passe/identifiant sont placés 8 px sous les champs auxquels ils sont rattachés.

Dans le format mobile, les dégagements gauche et droit sont de 16 px entre l’arrière-plan et le cadre du formulaire et de 24 px entre le cadre et les champs d’identification.

Quand l’Accès alternatif est disponible, il est placé 40 px sous le cadre du formulaire.

Dernière mise à jour : 6 juin 2024

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec