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. Ce libellé doit être court et clair, évitez les formules vagues comme "Cliquer ici".

LesLimiter le nombre de boutons utilisent des libellés textuels qui décrivent l'action qui se produira sisur une personnepage.

clique

Garder surà l'esprit qu'il exsite également les options suivantes à disposition : un bouton après le bouton.texte d'introduction dans les basic pages (voir options de page niveau 2+) et un composant bouton dans les colonnes de tableau.

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
• TailleStyle :primaire (bleu) ou secondaire (blanc) ?
  • Pars'il défaut,n'a laqu'un tailleseul estbouton, “medium”.préférer Lale plateformestyle Jahia utilise cette taille comme standard.primaire
  • 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’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.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 chevronprincipale (par exemple dans"s'inscrire") leet composantun Dropdown)action ou une flèchecomplémentaire (par exempleexmpel sur"en unsavoir bouton “suivant”plus") serontvisuellement placésvoisins, à droite du libellé
  • Le bouton avec une icône seule est utilisé lors d’actions
    • Le bouton “back to top” dansutiliser le footer
    style
    • Les réseaux sociaux dans le footer
    • Les réseaux sociauxprimaire pour lel'action 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 rechercheprincipale et le burgerstyle menusecondaire pour ouvrirl'action le menu
    complémentaire

Vidéo extraite de la formation de mise à niveau Jahia

 

[ Documentation Jahia: retour au sommaire ]