Composants
Coordonnées
Le bloc de coordonnées sert à présenter des informations de contact telles que le numéro de téléphone, l’adresse, le courriel et les heures d’ouverture d’un lieu ou d’un service.
Exemple
Vue d’ensemble
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 ».
Quand l’utiliser
Le bloc de coordonnées est utilisé :
- Pour présenter clairement les moyens de contact associés à un ministère, un organisme ou un service gouvernemental.
- Pour afficher les informations nécessaires à l’inscription à un programme ou à la demande d’aide.
- Pour offrir à l’utilisateur un accès rapide aux renseignements utiles pour poser une action concrète (joindre, visiter, écrire, etc.).
Il est à privilégier lorsqu’il s’agit de vraies coordonnées (adresse, téléphone, courriel, etc.) et que l’information affichée est directement liée à une tâche spécifique de l’utilisateur.
Le bloc Coordonnées doit rester simple, structuré et centré sur la tâche, en évitant les détournements qui nuisent à sa lisibilité et à la cohérence du site.
Quand ne pas l’utiliser
Le bloc de coordonnées ne devrait pas être utilisé :
- Pour présenter uniquement un lien vers un site ou formulaire (ex. : un seul lien vers un formulaire de contact).
- Pour afficher des informations qui ne sont pas des coordonnées (ex. : précision sur un programme, description d’un service, indication d’une date limite, etc.).
- Si les coordonnées concernent plusieurs services ou entités non liées entre eux. Il faut alors utiliser plusieurs blocs, chacun avec un titre explicite.
- Dans la zone « À consulter aussi ». Cette section ne doit contenir que des liens vers des contenus complémentaires.
Anatomie
- Titre
- Icône
- Information
- Encadré
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Coordonnées (complètes)
Il est tout à fait possible d’avoir plusieurs blocs de coordonnées sur une même page, notamment lorsqu’ils sont associés à différentes sections, tâches ou situations.
Les blocs peuvent être empilés les uns à la suite des autres, sans qu’une séparation visuelle supplémentaire soit nécessaire.
Titre
Le titre du bloc coordonnées doit refléter clairement la nature des coordonnées affichées et soutenir l’action attendue.
Le titre par défaut est « Joindre le ministère (ou l’organisme) [nom du ministère (ou de l’organisme)] ».
Ce titre peut être adapté en fonction du contexte d’usage, à condition de respecter les principes suivants :
- Le titre doit expliquer clairement ce que contiennent les coordonnées (à qui ou à quoi elles se rapportent).
- Il ne doit pas être générique ou ambigu (éviter par exemple « Coordonnées » seul).
- Il est préférable d’éviter les abréviations, acronymes ou formules techniques non vulgarisées.
Icône
Sept icônes sont permises, chacune appartenant à un type d’information :
Le personnage pour la personne-ressource
Le calendrier pour les jours ouvrables
L’horloge pour les heures d’ouverture
Le téléphone pour le numéro à joindre
La punaise pour l’adresse civique
L’enveloppe pour l’adresse courriel
L’ordinateur portable pour le site Web
Aucune autre icône ne doit être utilisée dans ce bloc.
L’usage d’une icône doit correspondre exactement au contenu présenté : ne jamais utiliser une icône à des fins décoratives ou pour appuyer une précision non liée à une coordonnée (ex. : ne pas utiliser l’icône de personne pour nommer un programme).
Une seule icône par type d’information doit être affichée, même si plusieurs valeurs sont présentées (ex. : plusieurs numéros de téléphone ou adresses).
Information
Aucune autre information que celle mentionnée ne doit apparaître dans le bloc de coordonnées. Si une information n’est pas une coordonnée, elle doit être placée ailleurs dans la page (introduction, contenu principal, etc.).
Si plusieurs éléments similaires sont présentés (ex. : plusieurs adresses ou numéros de téléphones), les distinguer par des sous-titres explicites (ex. : « Bureau de Montréal »).
L’ordre de lecture d’un bloc de coordonnées doit être structuré de manière à offrir une expérience optimale en termes d’accessibilité et de lisibilité.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Coordonnées (complètes)
Dimensions : Le bloc Coordonnées occupe 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large.
Espacements : Une marge minimale de 56 px en haut et en bas crée un espace supplémentaire autour du bloc Coordonnées, le distinguant visuellement des autres éléments de la page.
Comportements
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.
Information (lorsque ce sont des liens)
Les liens déclenchent l’action appropriée (ex. ouverture du client de messagerie pour un courriel, ouverture dans un nouvel onglet pour un lien externe).
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 pour suivre le lien.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tabulation pour naviguer entre les liens.
- Entrée pour suivre un lien sélectionné.
Mises à jour
Cette section présente la disponibilité actuelle des différentes versions du composant ainsi qu'un aperçu des changements passés.
| Emplacement | Statut |
|---|---|
| Trousse de design Adobe XD | Disponible |
| Trousse de design Figma | Disponible |
| Trousse de développement | À venir |
| Québec.ca (TYPO3) | Disponible |
| Date | Description |
|---|---|
| 21 août 2025 | Simplification et standardisation de la structure de la fiche |
| 13 janvier 2023 | Ajout des icônes personne-ressource et site Web |
| 20 juillet 2020 | Mise en ligne de la fiche |
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 16 février 2026