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.

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.

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.

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 :

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-weight: 600;
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;