Bouton de session dans le menu de navigation principale
Le bouton de session est utilisé lorsque le site offre aux utilisateurs la possibilité de se connecter ou de se déconnecter de leur compte personnel. Cela peut être nécessaire pour accéder à certaines fonctionnalités du site, comme la possibilité de sauvegarder des préférences, d'accéder à du contenu personnalisé ou de réaliser des transactions.
Quand l’utiliser
Le bouton de session est essentiel chaque fois que le site propose des fonctionnalités qui requièrent l'identification de l'utilisateur. Cela comprend des situations telles que :
- Personnalisation de l'expérience : Lorsque les utilisateurs souhaitent ajuster des préférences personnelles, comme le thème de l'interface, la langue ou le contenu affiché en fonction de leurs intérêts.
- Accès à du contenu réservé, confidentiel et sécurisé : Lorsque les utilisateurs peuvent accéder à du contenu réservé, à des données sensibles (médicales, financières, personnelles), à la gestion d'espaces de travail collaboratifs et à la communication entre membres.
- Transactions et achats en ligne : Lorsque les utilisateurs ont besoin de créer un compte pour effectuer des achats en ligne, accéder à leur historique de commandes ou gérer des informations de paiement.
Comment l’utiliser
Le bouton de session doit être clairement identifiable et facile à utiliser. Il affiche généralement « Connexion » lorsque l’utilisateur n’est pas connecté et « Déconnexion » lorsque l’utilisateur est connecté. Ces termes sont couramment utilisés et facilement compréhensibles pour la plupart des utilisateurs.
Toutefois, selon le contexte et la terminologie propre à votre site ou à votre application, d’autres termes peuvent être utilisés pour décrire l’action de connexion et de déconnexion. Les libellés choisis doivent toujours être clairs et indiquer l’action attendue de manière explicite. Par exemple, si vous décidez d’utiliser « Mon dossier X » au lieu de « Connexion », assurez-vous que les utilisateurs de votre plateforme comprennent qu’il s’agit du bouton pour se connecter.
Veillez à ce que les libellés soient suffisamment courts pour tenir sur le bouton sans provoquer d’encombrement visuel.
Informations techniques
Positionnement
En format bureau, le bouton de session est positionné à l'extrême droite du bandeau, à droite des icônes utilitaires.
En format mobile, le bouton de session est positionné à l'extrême droite du bandeau, à droite des icônes utilitaires. Ceux-ci sont superposés au-dessus des libellés de menu.
Dimensions
En format bureau, le bouton de session a les mêmes caractéristiques qu’un bouton secondaire de taille Compact.
En format mobile, le bouton secondaire de taille Compact est modifié pour être uniforme avec l’ensemble des éléments du bandeau de navigation principale. La taille de caractères est de 13 px et l'interligne est de 16 px. La hauteur du bouton est de 24 px. Sa largeur minimale est de 48 px, mais elle est influencée par le libellé textuel le composant, auquel on additionne les dégagements intérieurs (voir la section Espacements ci-bas).
Format mobile
Espacements
En format bureau, il y a 24 px entre les icônes utilitaires et le bouton de session. Le dégagement intérieur est le même qu’un bouton secondaire de taille Compact.
En format mobile, il y a 16 px entre les icônes utilitaires et le bouton de session. Le dégagement intérieur est de 4 px en haut et en bas et de 8 px de chaque côté.
États
Le bouton de session a les mêmes caractéristiques qu’un bouton secondaire de taille Compact.
Le format mobile a les caractéristiques suivantes:
CSS du bouton de session mobile - par défaut
font-size: 13px;
line-height: 16px;
min-width: 48px;
padding: 4px 8px;
Dernière mise à jour : 6 novembre 2023