Icônes utilitaires dans le menu de navigation principale
Les icônes utilitaires servent à donner accès à des fonctionnalités ou actions générales sur le site.
Quand l’utiliser
Le choix d'intégrer des icônes utilitaires dans le menu de navigation principal dépend de la nature du site et des fonctionnalités proposées aux utilisateurs. Voici quelques exemples concrets pour illustrer les situations où cela peut être pertinent :
- Profil utilisateur : Accéder aux détails du compte, modifier les informations du profil, se déconnecter.
- Messagerie : Lire les messages reçus, envoyer de nouveaux messages, gérer les fils de discussion.
- Gestion du compte : Modifier les paramètres du compte, gérer les préférences de confidentialité et de sécurité, personnaliser l’expérience sur le site (choix du thème, de la langue, etc.).
- Notifications : Visualiser les alertes et les mises à jour récentes.
- Panier d'achats : Visualiser les articles sélectionnés, procéder au paiement.
- Calendrier : Visualiser les événements à venir, planifier de nouveaux événements, gérer les rappels.
- Favoris : Visualiser et gérer les éléments ou pages marqués comme favoris.
- Aide/Support : Fournir un accès rapide à la documentation d’aide, aux guides d'utilisation, ou à un service de clavardage en direct pour le support client.
Comment l’utiliser
Il est possible d’utiliser un maximum de 3 icônes utilitaires pour laisser la majorité de l’espace aux éléments de navigation.
Les icônes utilitaires qui ouvrent un menu déroulant sont accompagnées d'une icône de chevron, pointant vers le bas lorsqu'ils sont fermés et vers le haut lorsqu'ils sont ouverts.
Le menu déroulant est le seul type de sous-menu autorisé dans la zone des icônes utilitaires. Ni le menu « Plus », ni les mégamenus ne sont permis dans cet espace.
Le sous-menu dédié à la gestion du compte du citoyen peut afficher, dans sa partie supérieure, des informations non cliquables telles que le nom complet de l’utilisateur, un numéro particulier ou un statut de compte. Ces détails sont suivis de liens permettant d'accéder à diverses sections comme la gestion du profil, les paramètres, l'historique des commandes ou l'assistance, etc.
Les icônes ne sont jamais accompagnées d’un libellé textuel. Ainsi, les icônes choisies doivent être claires, intuitives et facilement reconnaissables.
Un badge peut être ajouté à une icône pour notifier un nouvel élément à consulter. En format bureau, le badge peut afficher un nombre, tel que le nombre de messages non-lus, ou être un cercle sans nombre pour attirer l'attention sur un nouvel élément. En format mobile, en raison de contraintes d'espace, seul le badge circulaire sans nombre est utilisé.
Une icône de retour à l'accueil ne doit pas être placée dans la zone réservée aux icônes utilitaires. Cette dernière est dédiée aux fonctionnalités ou actions générales du site, et non à la navigation. Si l'ajout d'une icône de retour à l'accueil est souhaité, elle doit être positionnée comme premier élément dans la zone des éléments de navigation.
Sélectionner des icônes claires et intuitives
Hormis les icônes de maison (pour l’accueil), d’imprimante (pour l’impression de la page) et de loupe (pour la recherche), il y a peu d’icônes qui sont parlantes pour les utilisateurs. La plupart des icônes restent ambigües.
Le choix d’icônes pour illustrer les liens devra être fait rigoureusement. Un truc : s’il faut plus de 5 secondes pour réfléchir à une icône appropriée pour quelque chose, il est peu probable qu’une icône puisse communiquer efficacement son sens.
La fiche Iconographie indique les spécifications techniques propres à l’utilisation des icônes et donne accès à la banque d’icônes gouvernementales.
Pour chacune des fonctionnalités ou actions générales évoquées précédemment, voici les icônes autorisées :
Le personnage pour le profil utilisateur.
Les deux personnages s'il est possible de basculer entre plusieurs profils utilisateurs.
L'enveloppe pour la messagerie.
L'engrenage pour la gestion de compte.
La cloche pour les notifications.
Le panier pour le panier d'achats.
Le calendrier pour le calendrier.
L'étoile pour les favoris.
Le point d'interrogation encerclé pour l'aide ou le support.
Informations techniques
Structure et construction
Les icônes utilitaires sont construites de la même façon que les éléments de navigation, mais le libellé textuel est remplacé par une icône représentant une fonctionnalité.
Positionnement
En format bureau, les icônes utilitaires sont positionnées à droite dans le menu, mais à gauche du bouton de session.
En format mobile, les icônes utilitaires sont positionnées à droite dans le menu, mais à gauche du bouton de session et sont superposées au-dessus aux éléments de navigation.
Les icônes utilitaires sont centrées verticalement et horizontalement dans la zone cliquable.
Soulignement (survolé et actif)
Le soulignement, qui apparaît lorsqu'un élément de navigation est survolé ou activé, est positionné tout en bas de l’élément de navigation, collé au rebord inférieur du menu.
Chevron pour sous-menu
Pour une icône utilitaire ouvrant un sous-menu, le chevron est positionné à droite de la zone conteneur de l’icône. Son alignement vertical est centré dans la zone cliquable.
Badge (numérique et circulaire)
Le badge est positionné de manière à être déplacé de 50% vers la droite et de 50% vers le haut par rapport au conteneur de l'icône. Cela le place au coin supérieur droit du conteneur.
Dimensions
Chaque icône utilitaire possède la même hauteur que le menu (72 px en format bureau et 40 px en format mobile).
En format bureau, la taille maximale de l'image de l'icône est de 24 px, que ce soit en hauteur ou en largeur. La largeur de la zone cliquable des icônes utilitaires est de 56 px. Cette largeur s'étend à 72 px si un chevron de sous-menu est ajouté.
En format mobile, la taille maximale de l'image de l'icône est réduite à 16 px, que ce soit en hauteur ou en largeur. La largeur de la zone cliquable des icônes utilitaires est alors de 32 px. Cette largeur s'étend à 44 px si un chevron de sous-menu est ajouté.
Soulignement (survolé et actif)
Lorsqu'une icône utilitaire est survolée ou activée, un soulignement de 4 px de hauteur apparaît. La largeur de ce soulignement varie en fonction du format et de la présence ou non d'un chevron de sous-menu :
En format bureau, sa largeur est plus grande que l’icône de 8 px à droite et à gauche. En format mobile, sa largeur est plus grande que l’icône textuel de 4 px à droite et à gauche.
Chevron pour sous-menu
Pour une icône utilitaire déclenchant un sous-menu, le chevron a une taille de 8 px de large par 4,25 px de haut (autant en format bureau qu’en format mobile).
Badge numérique
En format bureau, la taille des caractères est de 12 px, avec un interlignage de 16 px. La hauteur du badge est de 16 px. La largeur du badge dépend du nombre de caractères à l'intérieur :
- 12 px pour 1 seul caractère.
- 20 px pour 2 caractères.
En format mobile, la taille des caractères est de 9 px, avec un interlignage de 12 px. La hauteur du badge est de 12 px. La largeur du badge varie également en fonction du nombre de caractères :
- 10 px pour 1 seul caractère.
- 15 px pour 2 caractères.
Le badge numérique peut contenir jusqu'à 2 caractères ; sa largeur s'adapte en conséquence.
Badge circulaire
La hauteur et la largeur du cercle sont toutes deux de 8 px, autant en format bureau qu'en format mobile.
Espacements
Chaque bloc d’icône utilitaire est positionné directement à côté du suivant, sans aucun espace (0 px) entre eux. Le dégagement intérieur de chaque élément suffit à assurer une bonne séparation visuelle de chaque côté des icônes.
En format bureau, le dégagement intérieur est de 16 px à gauche et à droite de l’icône.
En format mobile, le dégagement intérieur est de 8 px à gauche et à droite de l’icône.
Chevron pour sous-menu
Pour une icône utilitaire déclenchant un sous-menu, l'espacement entre l’icône et le chevron diffère selon le format. En format bureau, le chevron est placé à 8 px à droite de l’icône. En format mobile, cet espacement est réduit à 4 px.
Badge (numérique)
Au format bureau, il y a un dégagement intérieur de 3 px de chaque côté. Au format mobile mobile, le dégagement est réduit à 2 px de chaque côté.
États
Par défaut
La couleur de l’icône est #FFFFFF.
Pour un élément de navigation déclenchant un sous-menu, la couleur du chevron est la même que l'icône.
CSS des icônes utilitaires (zone cliquable) - par défaut
background-color: #19406c;
align-items: center;
height: 72px; /* format bureau */
width: 56px; /* format bureau */
padding: 0 16px; /* format bureau */
height: 40px; /* format mobile */
width: 32px; /* format mobile */
padding: 0 8px; /* format mobile */
CSS des icônes - par défaut
color: #ffffff
max-height: 24px; /* format bureau */
max-width: 24px; /* format bureau */
max-height: 16px; /* format mobile */
max-width: 16px; /* format mobile */
CSS des badges numériques - par défaut
color: #223654;
background-color: #E58271;
outline: 1px solid #19406C;
font-size: 12px; /* format bureau */
line-height: 16px; /* format bureau */
max-height: 16px; /* format bureau */
min-width: 12px; /* format bureau */
max-width: 20px; /* format bureau */
border-radius: 8px; /* format bureau */
font-size: 9px; /* format mobile */
line-height: 12px; /* format mobile */
max-height: 12px; /* format mobile */
min-width: 10px; /* format mobile */
max-width: 14px; /* format mobile */
border-radius: 6px; /* format mobile */
CSS des badges circulaires - par défaut
background-color: #E58271;
max-height: 8px;
max-width: 8px;
outline: 1px solid #19406C;
Au survol
Au survol, le soulignement de couleur #DAE6F0 apparaît au bas de l’icône utilitaire.
CSS des icônes utilitaires - au survol
border-bottom: 4px solid #dae6f0;
Au focus
Au focus, la zone cliquable de l’icône utilitaire a un contour extérieur de 2 px de couleur #4A98D9.
CSS des icônes utilitaires - au focus
outline: 2px solid #4a98d9;
Ouvert et Actif
Lorsque activé, le soulignement de couleur #DAE6F0 est présent au bas de l’élément de navigation.
CSS des icônes utilitaires - ouverts et activés
border-bottom: 4px solid #dae6f0;
Dernière mise à jour : 6 novembre 2023