Dernière mise à jour : 21 juillet 2025
L’hyperlien est un élément interactif sous forme de texte souligné permettant à l'utilisateur de naviguer vers un autre contenu ou un autre site.
- Guide d’utilisation
- Design
Utilisation
L’hyperlien peut être isolé ou faire partie du corps d’un texte. Si on l'utilise de manière isolée, il servira pour des interactions non prioritaires ou des téléchargements. Dans un corps de texte, sa nature est davantage référentielle.
Variants possibles
Il existe trois variants pour l'hyperlien :
1. Hyperlien standard
Cet hyperlien permet de naviguer entre les contenus.
2. Hyperlien ouvrant un nouvel onglet
Cet hyperlien est accompagné d'une icône, représentée par un encadré et une flèche, indiquant l'ouverture d'un nouvel onglet. Les règles d'utilisation du lien ouvrant un nouvel onglet sont abordées plus bas dans cette page.
Hyperlien de téléchargement
Cet hyperlien permet de télécharger un fichier.
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.
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)
* L'extension et le poids du fichier doivent toujours être indiqués entre crochets, par exemple [PDF XXX ko]
Quand envisager autre chose
- Pour tout appel à l'action, on privilégiera l'utilisation du bouton texte, plutôt que l’hyperlien qui est plutôt de nature référentielle.
- Sur une tuile, on choisira le bouton fléché.
Rédaction UX
En tant qu’élément interactif, l’hyperlien doit décrire avec précision sa destination et non utiliser une formulation générique telle que « Plus de détails ». Son libellé doit être concis et significatif. Il doit reprendre des termes-clés de sa destination permettant ainsi d'établir un lien évident entre celle-ci et l'hyperlien.
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é contient un verbe, utiliser toujours l’infinitif. Si un pronom est nécessaire, employer la première personne (exemple : « Me connecter »).
Libellé de l'hyperlien
Pas de nombre limite de caractères, mais le libellé doit demeurer concis. Idéalement, on vise un maximum de quatre à cinq mots.
Rappel : il reprend des termes-clés de sa destination.
Anatomie
Couleurs et styles
Le bouton-texte à l’état interactif « Défaut » peut utiliser deux couleurs :
Taille
S'il se trouve dans un corps de texte, l'hyperlien sera de la même taille que celui-ci.
Taille normale
Tailles dynamiques
États interactifs
Voici les états interactifs prévus pour l'hyperlien :
Défaut
Survol
Clic
Désactivé
Focus