Boutons

Des actions évidentes et bien hiérarchisées.

En pratique

Hauteur minimale
24px
Rayon
10px
Espacement intérieur
12px / 22px
Texte
16px · 600

Bonnes pratiques

Un bouton déclenche une action. Son libellé doit expliquer ce qui va se passer.

  • Commencez les libellés par un verbe précis.
  • Faites ressortir l’action principale dans son contexte.
  • Conservez un indicateur de focus visible au clavier.
  • Expliquez pourquoi une action est indisponible lorsque ce n’est pas évident.
  • Utilisez un lien pour changer de page ou accéder à une ressource.

À retenir

La hiérarchie des actions doit découler des besoins de la tâche. Si tous les boutons sont mis en avant, aucun ne guide réellement la personne.

IntroductionBien démarrer · Un langage commun pour mieux concevoir.Principes de designBien démarrer · Les convictions qui orientent nos choix.Voix et tonBien démarrer · Les mots aussi font partie de l’expérience.CouleursFondations · Une palette pensée pour donner du sens.TypographieFondations · Une hiérarchie claire, à chaque échelle.Espacement et mise en pageFondations · Du rythme et de l’espace pour le contenu.IconographieFondations · Des signes simples et reconnaissables.MouvementFondations · Des transitions qui aident à comprendre.AccessibilitéFondations · Des expériences ouvertes à tout le monde.BoutonsComposants · Des actions évidentes et bien hiérarchisées.Champs de saisieComposants · Accompagner chaque information saisie.NavigationComposants · Des repères pour trouver son chemin.