Bouton texte

Dernière mise à jour : 15 décembre 2023

Le bouton texte permet à l'utilisateur de répondre à un appel à l’action ou de basculer vers un autre contenu. Il a les mêmes fonctions qu'un bouton principal classique, mais son style visuel est plus épuré.

Utilisation

Le bouton texte est utilisé pour des actions complémentaires qui ne requièrent pas une prédominance visuelle. Son libellé doit toujours être juxtaposé à une icône de flèche droite pour bien communiquer son caractère interactif. Le soulignement du texte et de l’icône apparaît au survol.

La flèche droite du bouton texte peut être remplacée par une icône indiquant l'ouverture d'un nouvel onglet. Cette icône est représentée par un encadré et une flèche. Les règles d'utilisation du lien ouvrant un nouvel onglet sont abordées plus loin dans cette page.

Image de bouton texte du système de design

Contexte d'utilisation

Le bouton texte suit les mêmes règles de placement que le bouton principal, mais arrive troisième dans la hiérarchie visuelle. On l'utilise :

  • Pour des actions non prioritaires.
  • Quand un libellé est trop long pour s'afficher adéquatement dans un bouton.
  • Lorsqu'on a plusieurs éléments auxquels référer et qu'on ne souhaite pas utiliser de tuiles.

Lien ouvrant un nouvel onglet

  • Ce lien est toujours représenté par l'icône de nouvel onglet (encadré et flèche).
  • Cette icône ne doit jamais être juxtaposée à une autre icône.
  • Puisque l'ouverture d'un nouvel onglet est déroutante pour l'utilisateur, on y a donc recours seulement si cela est nécessaire et on se limite aux cas identifiés dans la section qui suit.
Image du bouton texte ouvrant un lien dans un nouvel onglet

Quels liens de destination s'ouvrent dans un nouvel onglet ?

  • Hilo et filiales (exemples : EVLO, Cléo)

  • Bang the table, LS CODA, SimplyBook.me et autres sites, réseaux sociaux ou plateformes externes

  • Initiatives ponctuelles (exemple : Énergie en commun)

  • Site informationnel d'Hydro-Québec, si on y accède à partir de l'Espace client ou d'un formulaire

  • PDF*, s'il est ouvert à partir de l'espace connecté (Espace client) ou d'un formulaire

  • PDF*, s'il est ouvert à partir du site informationnel d'Hydro-Québec

  • Espace client, si on y accède à partir du site informationnel d'Hydro-Québec

  • Site spécialisé (exemples : maîtres électriciens, enseignants)

  • Sous-domaine du site d'Hydro-Québec (exemple : emploi.hydroquebec.com)

Quand envisager autre chose

  • Pour tout appel à l'action prioritaire, on privilégie l'utilisation d’un bouton primaire ou d'un bouton secondaire.
  •  Sur une tuile, on opte plutôt pour le bouton fléché.
  • Dans le corps d’un texte ou lorsqu'il y a une suite de plusieurs liens référencés, on utilise toujours l’hyperlien.
  • S'il s'agit d'un lien unique de nature référentielle, d’un lien pour télécharger un document ou d’un lien pour ouvrir une fenêtre modale, on choisit également l'hyperlien.

Rédaction UX

En tant qu’élément interactif, le bouton texte doit communiquer avec précision l’action à accomplir ou la destination.

Son libellé doit être concis et significatif. On s'abstient donc d'utiliser des formules génériques telles que « En savoir plus ».

Les articles, les déterminants, les pronoms, les adjectifs et les adverbes sont à éviter ou à doser avec parcimonie, sauf si leur utilisation apporte une valeur communicationnelle évidente.

Verbe à l’infinitif

  • Lorsque le libellé est introduit par un verbe, celui-ci doit toujours être à l’infinitif. Si un pronom ou un déterminant est nécessaire, il faut employer la première personne (exemple : « Me connecter »).

Libellé du bouton-texte

  • Pas de nombre maximal de caractères, mais le libellé doit demeurer concis.

    Idéalement, on vise un maximum de quatre à cinq mots.

  • Il est composé d'un appel à l'action ou reprend des termes-clés de sa destination.

Anatomie

Image de l'anatomie du bouton texte du système de design

Couleurs et styles

Le bouton texte à l’état interactif « Défaut » peut utiliser deux couleurs :

Image du bouton texte en bleu pâle
Bleu d'interactivité, sur un fond pâle
Image du bouton texte en bleu foncé
Blanc, sur un fond foncé

Taille

La taille du texte utilisée pour le bouton texte est toujours de 16 px. Elle ne varie pas selon les résolutions ou le contexte dans lequel le bouton se trouve.

Icônes

L'icône qui accompagne le bouton texte est toujours alignée à droite du texte.

Dans les cas où le texte est réparti sur deux lignes, l’icône de flèche droite s’aligne avec le dernier mot du bouton texte.

Image des icones dans le bouton texte

Lorsque le bouton texte est associé à un lien ouvrant un nouvel onglet, l'icône de flèche droite habituellement utilisée avec ce composant est remplacée par l’icône de nouvel onglet (encadré et flèche).

Image de l icone du bouton texte lorsque il y a un lien externe

États interactifs

Voici les différents états interactifs prévus pour le bouton texte :

Défaut

Image représentant l interactivité du bouton texte

Survol

Image représentant le survol du bouton texte

Clic

Image rerpésentant le clic sur le bouton texte

Désactivé

Image rerpésentant l état désactivé du bouton texte

Focus

Image rerpésentant l état survol du bouton texte