Composants Jahia > Navigation > Bouton

Le composant Bouton permet de créer un appel à l’action clair et visible sur une page, comme par exemple "S'inscrire", "En savoir plus" ou "Télécharger". Il est conçu pour orienter la navigation de l’utilisateur vers un lien interne ou externe, tout en respectant la charte graphique de l’UNIL.

Bonnes pratiques

Chaque bouton doit communiquer clairement son objectif. Un bouton comporte toujours un libellé commençant par un verbe pour faciliter la communication de l'action du bouton. À ce libellé peut s’ajouter aussi une icône pour aider à la compréhension de l’action au clic.

Les boutons utilisent des libellés textuels qui décrivent l'action qui se produira si une personne clique sur le bouton.

Cas d'utilisation

Les templates de pages permettent de visualiser les différentes possibilités d’utilisation des boutons. Voici quelques règles simples :

• Lien ou bouton ?
  • les boutons représentent une action (télécharger, s’inscrire, soumettre, postuler, etc.)
  • les liens de naviguer ou d’accéder à une autre page ou un autre site
• Taille :
  • Par défaut, la taille est “medium”. La plateforme Jahia utilise cette taille comme standard.
  • La taille “large” n’est aujourd’hui pas utilisée dans les templates proposés sur la plateforme Jahia. Elle pourrait être utilisée dans le cadre d’autres développements pour une landing page personnalisée pour un événement qui nécessiterait un grand call-to-action.
  • La taille “small” n’est aujourd’hui pas utilisée dans les templates proposés sur la plateforme Jahia. Elle pourrait être utilisée dans le cadre d’autres développements  pour un écran qui serait chargé en actions dans un espace limité. Par exemple des filtres complexes.
• Style : Le style des boutons sont à choisir selon le type d’action qu’ils engendrent et selon leur importance :
  • Action principale = bouton “primaire”. Ce bouton doit garder un contraste élevé. Deux variantes existent:
    • Variante couleur (bleu pour le site principal) lorsqu’il est sur un fond clair
    • Variante blanc lorsqu’il est sur un fond de couleur.
    • Exemples : Sur le détail d’un événement : s’inscrire; sur la page profil “Futures étudiantes et futurs étudiants”, la possibilité de consulter le programme de la semaine d’accueil; sur le détail d’un bachelor : s’inscrire à la formation
  • Action secondaire = bouton “secondaire”. Ce bouton a moins de contraste du fait que l’action qu’il engendre est moins importante que celle d’un bouton primaire. Deux variantes existent:
    • Variante claire (gris et texte noir pour le site principal) lorsqu’il est sur un fond clair et
    • Variante transparent (texte blanc) lorsqu’il est sur un fond de couleur.
    • Exemples : Sur le détail d’un événement : l’ajouter à son agenda; sur le détail d’un bachelor, télécharger la brochure ou le plan de formation
  • Ne pas utiliser deux boutons “primaires” l’un à côté de l’autre. La variante “secondaire” devra être utilisée s’il y a un ou plusieurs autres boutons à côté d’un “primaire”.
• Icône :
  • Une icône peut accompagner le libellé si l’on souhaite renforcer une action. Par exemple pour un bouton “Télécharger”, “Rechercher”, “Imprimer”, etc.
  • Si une icône est ajoutée, elle sera à gauche du libellé.
  • Seul un chevron (par exemple dans le composant Dropdown) ou une flèche (par exemple sur un bouton “suivant”) seront placés à droite du libellé
  • Le bouton avec une icône seule est utilisé lors d’actions
    • Le bouton “back to top” dans le footer
    • Les réseaux sociaux dans le footer
    • Les réseaux sociaux pour le composant “Partager l’actualité” ou “Partager l’événement”
    • La “croix” pour fermer une modale ou la galerie plein écran
    • Les flèches pour faire défiler les images d’un carrousel
    • Sur le placeholder d’une vidéo, le bouton “Play”
    • Sur mobile dans la navigation fermée : la loupe pour ouvrir la recherche et le burger menu pour ouvrir le menu

[ Documentation Jahia: retour au sommaire ]