Boutons & Liens
Utilisation boutons
Un bouton permet de déclencher une action dans la même page.
Pour être efficace et hiérarchiser les actions proposées à l’utilisateur, n’utilisez jamais deux boutons primaires côte à côte. Vous pouvez aligner un bouton primaire avec un bouton secondaire ou lien.
L’état désactivé indique que l’utilisateur ne peut pas interagir avec le bouton. Il ne doit être utilisé que très ponctuellement. Par exemple, lorsqu’on veut indiquer à l’utilisateur qu’il doit procéder à une action en amont.
Structure :
Les boutons sont composés de :
- Un label – obligatoire.
- Une icône, pouvant être modifiée
Contenus :
Le libellé de bouton doit :
- commencer par un verbe, de préférence d’action qui exprime clairement ce qui va se passer pour l’utilisateur.
- être court et compréhensible facilement : utiliser 3 mots maximum.
Il faut utiliser le même format d’écriture sur tout vos libellés de boutons (Exemple : 1ère lettre en majuscule, le reste en minuscule, impératif).
Boutons primaires :
Le bouton primaire est utilisé pour les actions principales comme soumettre un formulaire ou rediriger vers un contenu que l’on souhaite prioriser dans le parcours utilisateur.
Boutons secondaires :
Le bouton secondaire est utilisé lorsque l’action est moins prioritaire que l’action principale, comme réinitialiser les valeurs d’un formulaire.
État désactivé :
L’état désactivé indique que l’utilisateur ne peut pas interagir avec le bouton. Il ne doit être utilisé que très ponctuellement. Par exemple, lorsqu’on veut indiquer à l’utilisateur qu’il doit procéder à une action en amont.
Utilisations liens
Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe (ex : retour en arrière, en savoir plus, fil d’Ariane) ou de se déplacer dans la page (ancre).
Pour les actions d’un autre type, comme la soumission d’un formulaire, il faut utiliser le composant bouton.
Lien au fil du texte :
Ce lien se trouve au sein d’un texte et reprend les caractéristiques typographiques de celui-ci (font, taille) tout en étant souligné (il peut être suivi d’une icône ) comme ici
Lien externe :
Le lien ‘externe’ doit être utilisé pour les liens pointant vers un autre site et ouvrant un nouvel onglet/une nouvelle page. Cela est matérialisé par une icône à droite du lien.
Lien simple :
Le lien simple en dehors du contenu peut se présenter :
- avec une icône à droite
- avec une icône à gauche
- texte seul
- icône seule
Si une icône est présente, son choix et son emplacement doit rendre l’action à venir ou la destination plus explicite. L’icône seule n’est à utiliser que très rarement.
