Page de connexion

Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».

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.

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.

Anatomie

1. Titre
2. Création de compte
   Facultatif
3. Champs d’identification
4. Mémorisation de l’identifiant
   Facultatif
5. Lien de récupération de mot de passe/identifiant
6. Bouton de connexion
7. Accès alternatif
8. Boîte de contenu
9. Arrière-plan

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.

Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.

Fonctionnel

Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.

Authentification

L’utilisateur saisit son identifiant et son mot de passe dans les champs prévus.

Le système valide les informations transmises et autorise l’accès au service en ligne.

En cas d’erreur (mot de passe ou identifiant incorrect), un message d’erreur clair et précis est affiché.

Création de compte

L’utilisateur peut accéder à un formulaire distinct pour créer un nouveau compte.

Les champs obligatoires doivent être clairement indiqués et validés au moment de la soumission.

Une confirmation (par exemple via une notification contextuelle ou un avis) est fournie lorsque la création est réussie.

Récupération de l’identifiant ou du mot de passe

Le lien de récupération ouvre un parcours distinct permettant de réinitialiser ou retrouver ses informations.

Un courriel ou une autre méthode de validation est utilisé pour confirmer l’identité de l’utilisateur.

Le processus doit être rétroactif, informant l’utilisateur de l’état de sa demande (par exemple « Un courriel de réinitialisation a été envoyé »).

Mémorisation de l’identifiant

Si la case est cochée, l’identifiant de l’utilisateur est conservé localement pour faciliter les prochaines connexions.

Cette option doit être facultative et doit respecter les règles de confidentialité et de sécurité.

Accès alternatif

Permet à l’utilisateur de se connecter via un fournisseur d’identité ou un mode d’authentification externe (par exemple, clic sur un bouton d’accès avec une autre plateforme).

L’utilisateur est redirigé vers le service d’authentification choisi puis ramené automatiquement au service initial.

Interaction

Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.

Souris

Instructions sur l’interaction avec le composant via la souris :

• Cliquer dans les champs de saisie permet d’y entrer des données.
• Cliquer sur le bouton de connexion déclenche la validation du formulaire.
• Cliquer sur le lien « Mot de passe/identifiant oublié » ouvre le parcours de récupération.
• Cliquer sur le lien ou bouton « Créer un compte » redirige vers le formulaire d’inscription.
• Cliquer sur le bouton d’accès alternatif lance le processus de connexion externe.

Clavier

Instructions sur l’interaction avec le composant via le clavier :

• La touche Tabulation permet de naviguer entre les champs, cases à cocher, liens et boutons dans un ordre logique.
• La touche Entrée dans un champ de saisie déclenche la soumission du formulaire si les champs requis sont complétés.
• Les touches flèche haut/bas permettent de se déplacer entre les options si un champ de sélection est présent.
• Les raccourcis clavier doivent respecter les standards d’accessibilité pour assurer l’utilisation sans souris.