Dernière mise à jour : 1 mai 2025
La bannière sert à promouvoir auprès de l'utilisateur un service, un outil, une initiative, une action ou une offre.
- Guide d’utilisation
- Design
Utilisation
Principales règles d'utilisation
La bannière contient toujours un titre et un appel à l'action présenté sous forme de bouton.
L'ajout d'un surtitre ou d'un texte descriptif est permis, mais jamais les deux simultanément.
Un visuel peut être intégré selon le variant utilisé.
Le bouton est le seul élément cliquable.
Variants possibles
Il existe quatre variants de bannières dont l'utilisation est déterminée en fonction du contexte et du type de maillage désiré. On les catégorise selon deux intentions, soit la promotion ou l'action.
Bannières de promotion
Bannières d'action
Bannières de promotion
- Bannière standard
- Bannière étroite
Les bannières de cette catégorie ne constituent pas le contenu principal d'une page. Elles peuvent donc être retirées de celle‑ci sans conséquence structurelle. Elles permettent de faire un maillage vers une promotion, un service ou une initiative qui pourrait intéresser l'utilisateur dans le contexte de la page sur laquelle il se trouve.
Placement dans la page
La bannière de promotion étant complémentaire au sujet de la page, on évite de la placer avant le contenu principal. Elle doit s'insérer de façon logique et cohérente dans le parcours de l'utilisateur.
1. Bannière standard
La bannière standard s'intègre à une section existante. Elle s’imbrique verticalement sous un module.
2. Bannière étroite
La bannière étroite se situe en marge latérale, adjacente au contenu principal. Elle peut inclure ou non un visuel.
Bouton recommandé
- Bouton texte
- Consulter la section Choisir le bouton de l'appel à l'action.
Bannières d'action
- Bloc d'action
- Bandeau d'action
Ces bannières sont étroitement liées au contenu principal de la page. Elles visent une conversion en suggérant à l'utilisateur une action définie par un appel à l'action.
Placement dans la page
La bannière de promotion étant complémentaire au sujet de la page, on évite de la placer avant le contenu principal. Elle doit s'insérer de façon logique et cohérente dans le parcours de l'utilisateur.
1. Bloc d'action
Composé uniquement d'un titre et d'un bouton, ce variant a pour rôle de mettre l'accent sur l'appel à l'action. Il s'intègre dans un module ou une section dans le but d'en faire ressortir une action spécifiquement liée à son contenu. Il peut être positionné directement sous la section héros.
2. Bandeau d'action
Le bandeau d'action est à bords perdus et occupe la pleine largeur de la page avec sa propre couleur de fond. Son contenu étant lié aux objectifs principaux de la page, il fait partie intégrante de celle‑ci en constituant à lui seul une section. Ceci fait ressortir visuellement le bandeau en mettant davantage en valeur l'action qu'il promeut. Sémantiquement, son titre correspond à un H2.
On l'utilise entre deux sections pour rappeler l'appel à l'action principal de la page ou pour mettre l'emphase sur une action.
Boutons recommandés
- Bouton primaire ou bouton secondaire, selon la hiérarchie de l'action à promouvoir
- Consulter la section Choisir le bouton de l'appel à l'action.
Choisir le bouton de l'appel à l'action
Pour choisir le bouton approprié, il faut considérer la catégorie de la bannière ainsi que le contexte de la page.
Bouton primaire
Le bouton primaire indique clairement à l’utilisateur l’action principale de la page.
Dans la plupart des situations, on n'utilise qu'un seul bouton primaire par page. Si la même action est répétée ailleurs dans celle‑ci, il est possible d'en avoir plus d'un qui reprend le même libellé.
Bouton secondaire
Second bouton dans la hiérarchie, le bouton secondaire est associé à une action de moindre importance que celle du bouton primaire. Il est donc permis d'en avoir plus d'un par page.
Lorsqu'il y a plusieurs hyperliens ou boutons textes dans la page, le bouton secondaire permet de faire ressortir davantage l'action de la bannière.
Bouton texte
Le bouton texte est troisième dans la hiérarchie. Il est le bouton à privilégier pour les bannières de promotion, puisqu'il vient appuyer les actions complémentaires.
Sa fonction et son style épuré font en sorte que l'on peut en compter plusieurs sur une même page.
Note sur l'utilisation
Les trois boutons présentés ci‑dessus peuvent intégrer un lien ouvrant un nouvel onglet. Ce lien est toujours représenté par l'icône de nouvel onglet (encadré et flèche).
Pour savoir quels liens de destination doivent s'ouvrir dans un nouvel onglet : boutons primaire et secondaire et bouton texte.
Quand envisager autre chose
- Pour comparer ou présenter plusieurs offres sous forme de page sommaire de sous-section (hub), on opte pour des tuiles avec appel à l’action.
- Si un appel à l'action nécessite une mise en contexte plus étoffée, on l'intègre au contenu d'une section ou d'un module accompagné d'un texte explicatif.
- Pour bonifier le parcours de l'utilisateur en proposant des contenus complémentaires, on utilise le bloc maillage.
Rédaction UX
Contenu
La bannière doit véhiculer un seul message.
Un texte court et direct, axé sur le bénéfice pour l'utilisateur, aura davantage d'impact.
Les éléments textuels composant la bannière doivent se compléter. On évite donc de répéter les mots ou les idées dans le titre et les autres éléments.
Son appel à l'action doit clairement décrire ce qui est attendu de l'utilisateur ou indiquer la destination.
Ponctuation
Le surtitre, le titre et l'appel à l’action ne doivent pas inclure de ponctuation.
Seul le texte descriptif peut en contenir.
Nombre de caractères maximal
1. Bannière standard et bannière étroite
Surtitre : Un à trois mots maximum pour catégoriser le sujet de la bannière
Titre : 100 caractères, espaces incluses
S'il y a un texte descriptif : limite de 50 caractères, espaces incluses
Texte descriptif : 100 caractères, espaces incluses
Bouton : Selon les spécifications du bouton choisi
2. Bloc d'action
Titre : 100 caractères, espaces incluses
Bouton : Selon les spécifications du bouton choisi
3. Bandeau d'action
Surtitre : Un à trois mots maximum pour catégoriser le sujet de la bannière
Titre : 70 caractères, espaces incluses
S'il y a un texte descriptif : limite de 35 caractères, espaces incluses
Texte descriptif : 100 caractères, espaces incluses
Bouton : Selon les spécifications du bouton choisi
Dans cette page
1. Bannières de promotion
Les bannières de promotion répondent à un objectif complémentaire à celui de la page dans laquelle elles se trouvent. Elles sont donc pensées pour être retirées facilement sans avoir de conséquence sur la structure de la page.
Anatomie
Les variants de bannières de promotion sont conçus pour s'ajuster à diverses utilisations sur la grille.
a. Bannière standard
La bannière standard prend la totalité de la largeur du contenu de la page.
b. Bannière étroite
La bannière étroite occupe trois ou quatre colonnes. Elle est positionnée en marge latérale, adjacente au contenu principal.
Compositions visuelles possibles
Options de contenu textuel
La bannière doit toujours inclure un titre et un appel à l’action.
L'ajout d'un surtitre ou d'un texte descriptif est permis, mais jamais les deux simultanément.
La limite de caractères change en fonction du variant utilisé.
La hiérarchie sémantique du titre est un H3.
2. Appel à l’action
2. Titre
3. Appel à l’action
2. Texte descriptif
3. Appel à l’action
Options de couleurs
On privilégie l'utilisation des trois bleus pour la bannière promotionnelle.
Six autres couleurs, extraites de la palette de couleurs de la marque Hydro‑Québec, peuvent également être choisies pour s'harmoniser à la page selon son contexte ou son sujet.
bleu-20
#B7D6F7
bleu-30
#73AFF0
bleu-50
#104CCE
orange-20
#FFE1B3
orange-60
#FFB440
Options de boutons
Le bouton est l’élément cliquable de la bannière. On utilise principalement le bouton texte pour la bannière promotionnelle. Il est aussi permis d'opter pour le bouton primaire ou le bouton secondaire, si le contexte s'y prête.
Consulter la section Choisir le bouton de l'appel à l'action.
2. Bannières d'action
Les bannières d'action sont conçues pour s'intégrer à la structure de la page en tant qu'élément visant une conversion en lien avec le contenu principal.
Anatomie
a. Bloc d'action
Le bloc d'action occupe la totalité de la taille de la grille.
b. Bandeau d'action
Le bandeau d'action est à bords perdus.
Compositions visuelles possibles
Options de contenu textuel
La bannière doit toujours inclure un titre et un appel à l’action.
L'ajout d'un surtitre ou d'un texte descriptif est permis, mais jamais les deux simultanément (option non disponible pour le bloc d'action).
La limite de caractères change en fonction du variant utilisé.
La hiérarchie sémantique du titre est un H2 pour le bandeau d'action et un H3 pour le bloc d'action.
2. Appel à l’action
2. Titre
3. Appel à l’action
2. Texte descriptif
3. Appel à l’action
Options de couleurs
Pour la bannière d'action, on privilégie l'utilisation des trois bleus.
bleu-20
#B7D6F7
bleu-30
#73AFF0
bleu-50
#104CCE
Note sur l'utilisation
Il est possible d'opter pour une autre couleur, si la bannière d'action se trouve dans un site présentant des spécificités qui diffèrent des couleurs associées à la marque Hydro‑Québec.
Options de boutons
Le bouton est l’élément cliquable de la bannière. On le choisit selon la catégorie de la bannière et le contexte de la page. Règle générale, pour une bannière d'action, on opte soit pour un bouton primaire ou un bouton secondaire.
Consulter la section Choisir le bouton de l'appel à l'action.
