Passer au contenu principal

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.

bouton.png

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".

Limiter le nombre de boutons sur une page.

Conseil : utiliser une marge basse dans le composant précédant le bouton, afin de l'en rapprocher visuellement. Ceci permet de confirmer visuellement que le bouton se rapporte au contenu qui le précède.

Garder à l'esprit qu'il exsite également les options suivantes à disposition : un bouton après le 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

  • 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
  • Style primaire (bleu) ou secondaire (blanc) ?
    • s'il n'a qu'un seul bouton, préférer le style primaire
    • s'il y a une action principale (par exemple "s'inscrire") et un action complémentaire (par exmpel "en savoir plus") visuellement voisins, utiliser le style primaire pour l'action principale et le style secondaire pour l'action complémentaire

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

[ Documentation Jahia: retour au sommaire ]