Dernière mise à jour : 21 juillet 2025
La tuile est un contenant cliquable utilisé pour promouvoir un contenu. Au clic, elle dirige l’utilisateur vers une autre page.
- Guide d'utilisation
- Design
Utilisation
La tuile est un composant qui permet de référencer de façon interactive des contenus se trouvant sur d'autres pages en les introduisant brièvement. Les variants proposés s'adaptent à divers contextes et dimensions, offrant de la flexibilité pour la composition visuelle. Toutefois, il importe que toutes les tuiles groupées dans un bloc utilisent le même variant.
La tuile ayant un impact visuel fort, il est recommandé d'en doser l'usage avec parcimonie selon le contexte de la page dans laquelle elle est intégrée.
Principales règles
Dans une page sommaire de section (hub), pour en présenter les sous‑sections.
Dans une page Web, quand les contenus renvoient l’utilisateur à différentes sous‑sections.
Pour mettre l'emphase sur une idée ou un contenu dont les détails sont présentés dans une page associée.
Pour grouper l’information, notamment par sujets ou thématiques, dans un bloc de tuiles et faciliter la navigation de l'utilisateur vers les contenus plus détaillés.
Quand éviter de l'utiliser
Lorsque les éléments communiqués doivent respecter un ordre d’importance ou une hiérarchie.
Pour présenter des sujets qui ne sont pas liés à une autre page.
Variants possibles
Il existe quatre variants pour la tuile :
1. Tuile informationnelle
La tuile informationnelle permet de présenter des sujets plus complexes, puisqu'elle est composée d’un titre, d'un court texte descriptif et d'un bouton fléché qui remplace l'appel à l'action. Elle peut inclure ou non une image ainsi qu'un sous‑titre.
C'est principalement le texte descriptif qui la distingue en donnant plus de détails à l'utilisateur sur le sujet abordé, contribuant ainsi à une meilleure contextualisation.
Quand l’utiliser
Pour présenter des sujets plus complexes, qui se trouvent dans d'autres pages et qui nécessitent une courte description en addition au titre, afin d'en faciliter la compréhension.
Notes sur l'utilisation
- Si on opte pour une tuile avec image, toutes les autres tuiles du même bloc doivent également avoir une image.
- Si le titre est très long et suffisant pour la compréhension ou si celui‑ci a un sous-titre qui vient l'appuyer, le texte descriptif peut être retiré.
2. Tuile avec appel à l'action
Composé des mêmes éléments que la tuile informationnelle, ce variant remplace le bouton fléché par un bouton communiquant un appel à l'action. C'est le type de tuile à utiliser si l'on souhaite intégrer à une page un lien de conversion de façon permanente qui invite l'utilisateur à passer à l'action.
Quand l’utiliser
Quand on veut que l'utilisateur pose une action précise, par exemple s'inscrire à un programme.
Idéalement pour un nombre limité d'une ou deux tuiles par bloc, au maximum trois.
Notes sur l'utilisation
- Éviter les appels à l'action générique (exemple : En savoir plus).
- Pour l'appel à l'action, il faut opter pour le bon composant et suivre ses règles.
- Bouton primaire : si la page ne contient qu’une seule tuile.
- Bouton secondaire ou bouton texte : si deux ou trois tuiles sont présentées côte à côte.
- Hyperlien : dans les rares cas où un document doit être téléchargé.
- Bouton texte accompagné de l'icône de nouvel onglet (encadré + flèche) : pour un lien s'ouvrant dans un nouvel onglet.
- La tuile avec appel à l'action ne doit pas être utilisée dans une page sommaire de section (hubs) ou dans une section « En savoir plus ».
3. Tuile compacte
Cette version simplifiée de la tuile est composée uniquement d'un titre et d'un chevron indiquant son interactivité. Le titre, à lui seul, doit clairement annoncer à l'utilisateur le contenu vers lequel il sera dirigé.
Il est permis d'utiliser une icône sur ce type de tuile. Par contre, pour assurer une cohérence visuelle, il faut que toutes les tuiles d'un même bloc en aient une.
Quand l’utiliser
Pour des titres courts et précis qui communiquent explicitement le sujet de la page vers laquelle l’utilisateur sera dirigé.
Notes sur l'utilisation
- La tuile compacte doit être groupée minimalement par bloc de trois tuiles.
- Pour une tuile utilisant une icône, il est important que celle-ci soit simple, afin d'en assurer la lisibilité. Il faut éviter les icônes avec des traits trop fins ou un niveau de détail trop élevé.
4. Tuile inspirationnelle
La tuile inspirationnelle a pour principale caractéristique de mettre en valeur l'image présentée, puisque la photo ou l'illustration qui la compose occupe entièrement l'espace. Dans le bas de la tuile, est positionné par‑dessus l'image un encadré qui s'apparente à la tuile compacte sans icône, pour y inclure un titre et un chevron indiquant son interactivité.
Une étiquette peut être ajoutée dans le coin supérieur gauche pour catégoriser chacune des tuiles d'un même bloc.
Quand l’utiliser
Quand on a des images inspirantes, avec une représentation plus humaine ou avec un grand impact visuel.
Lorsque l'on veut donner plus d'importance au visuel qu'au titre.
Pour diriger vers des pages où la représentation est plus imagée, par exemple les pages concernant les centrales ou les visites d'installations.
Notes sur l'utilisation
On ne doit pas mélanger les types d’images utilisées dans un même bloc composé de tuiles inspirationnelles. Il faut faire un choix entre des photos ou des illustrations.
Quand envisager autre chose
- Pour faciliter le balayage des éléments communiqués ou lorsque ces éléments doivent respecter un ordre d’importance ou une hiérarchie, il faut privilégier l’utilisation de la liste.
- Si le comportement souhaité est qu'un clic révèle plus d’information à propos du sujet sans diriger l'utilisateur vers une autre page, il faut opter pour le bloc extensible (normes à venir).
- Pour référer à plusieurs éléments qu'on ne souhaite pas positionner dans des tuiles, mais qui nécessitent des appels à l'action, on choisit plutôt le bouton texte.
- Quand on vise la conversion par une action de l'utilisateur, mais que la promotion du lien de redirection est temporaire (exemples : une campagne publicitaire ou un sujet saisonnier), on privilégie la bannière.
À ne pas faire
Communiquer trop d’information. Chaque tuile doit présenter une seule idée ou un seul contenu.
Animer la tuile et révéler en survol, soit du texte ou un appel à l’action caché.
Mettre plusieurs liens dans une tuile. Chaque tuile doit compter un seul lien et celui‑ci doit diriger vers une autre page.
Placer les tuiles dans un carrousel.
Rédaction UX
Contenu
La tuile doit référencer clairement le contenu de destination. Il faut donc s’assurer d’utiliser un langage clair et précis ainsi que des libellés significatifs.
- Rédiger un titre concis et clair qui présente bien le contenu de la page associée.
- Éviter d'employer des articles, des déterminants, des pronoms, des adjectifs et des adverbes ou doser leur usage avec parcimonie, sauf si leur utilisation apporte une valeur communicationnelle évidente.
Nombre de caractères maximal
Tous les éléments textuels de la tuile comportent une limite de caractères pour créer une uniformité visuelle et éviter d’obtenir des tuiles de dimensions différentes.
Tuile informationnelle
Titre : 45 caractères, espaces incluses
Corps de texte : 220 caractères, espaces incluses Par souci de cohérence visuelle, il est fortement recommandé d'avoir des textes de longueur similaire.
Tuile avec appel à l'action
Titre : 45 caractères maximum, espaces inclus.
Corps de texte : 220 caractères maximum, espaces inclus. Par souci de cohérence visuelle, il est fortement recommandé d'avoir des textes de longueur similaire.
Appel à l'action : se référer aux règles de rédaction UX des composants bouton principal, bouton texte et hyperlien.
Tuiles compactes
Titre : 45 caractères maximum, espaces inclus.
Tuiles inspirationelles
Titre : 45 caractères maximum, espaces inclus.
Exception où il est permis de dépasser le nombre de caractères : les longs titres reprenant des appellations ou des toponymes officiels, par exemple le nom d'un barrage.
Étiquette : 15 caractères maximum, espace inclus.
Anatomie
La tuile se décline en quatre variants qui s'adaptent à divers contextes et dimensions, permettant d'avoir une composition visuelle flexible.
Couleurs et styles
La tuile peut être utilisée en blanc, en gris‑bleu‑10, en bleu‑80 et en bleu‑90 sur différents fonds de couleurs. La tuile bleue sur un fond bleu est à éviter, mais son usage est toléré si les teintes de bleu sont différentes.
Ombre portée
La tuile a toujours une ombre portée. En fonction du fond sur lequel elle se trouve, l'ombre portée de la tuile est différente. Il est important de veiller à ce que l'ombre adéquate soit appliquée.
Espacements
L’espacement entre chaque rangée doit être de 24 px, soit de la même taille que la gouttière entre chaque tuile.
Grille
1. Tuile informationnelle
Exemples avec deux tuiles
Exemples avec trois tuiles
2. Tuile avec appel à l'action
Exemples où la tuile est utilisée seule
Exemples avec deux tuiles
Exemples avec trois tuiles
3. Tuile compacte
La tuile compacte doit toujours être groupée minimalement par bloc de trois tuiles, afin que l'utilisateur puisse cognitivement comprendre leur fonctionnalité.
4. Tuile inspirationnelle
Puisque la fonction première d'une tuile inspirationnelle est de mettre en valeur une image, on l'utilise en nombre restreint pour ne pas minimiser son impact visuel.
Personnalisation des tuiles
1. Tuile informationnelle
Lorsque la tuile est utilisée en bloc
Trois options de personnalisation sont possibles pour la tuile informationnelle : sans image, avec une image ronde (212 px sur 212 px) et avec une image ayant un ratio 16:9 qui occupe toute la largeur de la tuile. La même option de personnalisation doit être utilisée pour toutes les tuiles groupées dans un même bloc, afin d'assurer un traitement égal des images.
2. Tuile avec appel à l'action
Lorsque la tuile est utilisée en bloc
Trois options de personnalisation sont possibles pour la tuile avec appel à l'action : sans image, avec une image ronde (212 px sur 212 px) et avec une image ayant un ratio 16:9 qui occupe toute la largeur de la tuile. La même option de personnalisation doit être utilisée pour toutes les tuiles groupées dans un même bloc, afin d'assurer un traitement égal des images.
Lorsque la tuile est utilisée seule
Quand la tuile avec appel à l'action est utilisée seule, quatre compositions sont permises avec une image de ratio 4:3.
3. Tuile compacte
La tuile compacte peut être utilisée avec ou sans icône. Son titre peut se répartir sur une, deux ou trois lignes au maximum.
Utilisation conforme des tuiles présentées en bloc
Il faut toujours utiliser un seul variant de tuile pour un même bloc. Il n'est pas possible d'opter pour plusieurs variants, car cela vient briser l'uniformité visuelle.
Utilisation de photos et d'illustrations
1. Tuile informationnelle
Il est possible de mélanger l'utilisation de photos et d'illustrations dans un même bloc de tuiles informationnelles. Exemple :
2. Tuile avec appel à l'action
Il est possible de mélanger l'utilisation de photos et d'illustrations dans un même bloc de tuiles avec appel à l'action. Exemple :
3. Tuile compacte
Seule l'illustration peut être utilisée avec la tuile compacte. Cette illustration prend la forme d'une icône de format 40 px sur 40 px. Comme son format est petit, il est important que l'illustration soit simple, c'est-à-dire que son niveau de détail ne soit pas trop élevé et que ses traits ne soient pas trop fins.
4. Tuiles inspirationnelles
La tuile inspirationnelle est conçue pour mettre en vedette une photo ou une illustration. Toutefois, une photo et une illustration ne peuvent cohabiter dans un même bloc de tuiles. Il faut opter pour un seul style d'images.
États interactifs
Lors de l’interaction, toute la tuile est réactive au survol ainsi qu’au clic. Voici les états interactifs pour chaque variant de tuile :
1. Tuile informationnelle
2. Tuile avec appel à l'action
3. Tuiles compactes
4. Tuiles inspirationnelles
