Bouton contextuel « Se connecter »: Système de conception de Canada.ca
- Dernière modification : 2022-09-23
Le bouton « Se connecter » est un élément facultatif de l'en-tête qui dirige les utilisateurs vers des comptes gouvernementaux nécessitant une authentification. Il s’agit d’un appel à l’action contextuel et persistant au sein d’un groupe de pages connexes.


Sur cette page
- Quand utiliser cette configuration
- Quoi éviter
- Comment mettre en œuvre
- Recherche et blogue
- Derniers changements
- Discussion
Quand utiliser cette configuration
Ajouter le bouton « Se connecter » quand la connexion à un compte est une tâche centrale dans une série de pages. Cela comprend :
- les pages où il existe déjà un lien ou un bouton menant à un ou plusieurs comptes;
- une série de pages qui traitent d’un service spécifique (comme l'assurance-emploi, la TPS);
- les pages où les analyses montrent que les gens utilisent le menu ou la barre de recherche pour accéder à un compte.
Quoi éviter
- Utiliser « Se connecter », et non « Ouvrir une session »
- Exclure le bouton « Se connecter » des :
- pages de tri ou de processus de connexion
- pages qui ne sont pas liées au service authentifié
Comment mettre en œuvre
- Identifier le groupe de pages qui devraient inclure le bouton « Se connecter » pour un service authentifié spécifique
- Lier le bouton « Se connecter » directement à la page où vous commencez votre processus de connexion, ou à une page qui vous permet de sélectionner les différents comptes auxquels vous pouvez vous connecter
- Utiliser « Se connecter » comme étiquette
- Petits écrans : 12 caractères au total y compris les espaces (pas de texte descriptif supplémentaire)
- Écrans de taille moyenne et de grande taille : 25 caractères au total (pour du texte descriptif supplémentaire au besoin, par exemple « Se connecter à [nom du compte] »)
Comme il s’agit d’un nouveau modèle, vous pouvez utiliser le bouton « Se connecter » en plus d’un bouton de super-tâche sur la même page. Si vous avez un bouton de super-tâche existant, ne le supprimez pas. Ajoutez plutôt le bouton « Se connecter ». Il se peut que vous constatez des changements d'utilisation au fil du temps dans vos analyses qui montrent que vous pouvez supprimer le bouton de super tâche.
Spécifications de conception
Structure du bouton
- bordure : 1px solid
- rayon de la bordure : 0
- épaisseur de la police : 400
- taille de la police : 16px
- marge en haut : 0px
- rembourrage en haut : 10 pages
- rembourrage en bas : 10 pages
- rembourrage à gauche : 14px
- rembourrage à droite : 14px
- couleur : #fff
Affichage normal

- couleur d’arrière-plan : #26374a
- couleur de la bordure : #26374a
Affichage en survol

- couleur d’arrière-plan : #444
- couleur de la bordure : #444
Code
GCWeb (WET) Variables, paramètres et exemples de travail pour la Boîte à outils de l’expérience Web
Recherche et blogue
Derniers changements
- Lignes directrices plus détaillées pour le bouton « Se connecter »
Discussion
Discuter de cette configuration dans GitHub
- Date de modification :