Bouton
Un bouton lance une action. Le libellé dit ce qui arrive ensuite.
Les états sélectionnés utilisent un fond neutre. La bordure bleue marque le choix.
Utilisation
Le bouton déclenche quelque chose ici: envoyer, enregistrer, fermer. S'il change de page, c'est un lien.
Parties
Un bouton a un libellé. L'icône est optionnelle, et seulement si elle est déjà comprise.
- Libellé: le verbe de l'action.
- Zone cliquable: tout le rectangle, pas seulement le texte.
- Icône: avant ou après, jamais à la place du sens.
Une seule action primaire
Un seul bouton primaire par zone. Deux bleus se battent, et le parent hésite.
Un primaire pour avancer, un bouton neutre pour annuler.
Deux boutons primaires dans le même bloc.
La taille selon le contexte
La taille par défaut suffit presque partout. Compact reste pour une ligne de tableau, pas pour l'action principale d'une page.
Un bouton pour l'action, un lien pour la navigation
Un bouton agit sur la page. Un lien mène ailleurs. Mélanger les deux brouille le clavier et le lecteur d'écran.
Accessibilité
Éviter de désactiver un bouton
Un bouton désactivé ne dit pas pourquoi. Laissez-le cliquable et montrez l'erreur à côté du champ.
Ajoutez une matière pour continuer.
Le bouton reste actif. Le texte sous le champ dit ce qui manque.
Un bouton grisé, sans explication.
Pas d'infobulle sur un bouton désactivé
Une infobulle sur un élément inerte ne se lit pas au clavier, ni sur un téléphone. Écrivez l'explication dans la page.
Bonnes pratiques
Alignement
Dans un dialogue, alignez les boutons à droite, le primaire en dernier. Sur un long formulaire, alignez-les à gauche, le primaire en premier.
Dans un dialogue, le primaire est à droite.
Sur une page longue, le primaire est à gauche.
Règles de libellé
Une majuscule au début du libellé
Une majuscule au début, puis des minuscules.
Tout en capitales, ou un titre à chaque mot.
Des libellés courts
Un verbe et l'objet, sans article inutile.
Une phrase entière, avec une virgule cachée dans le bouton.
Des libellés précis
Supprimer cette séance?
Le verbe nomme l'action, pas un oui vague.
Supprimer cette séance?
Oui et Non forcent à relire la question.
Les mêmes mots que le reste de l'écran
Si le titre dit « Abandonner », le bouton dit Abandonner. Pas Supprimer.
Voir aussi
- Bouton icône
- Bouton lien
- Groupe de boutons
- Formulaire
- Fenêtre modale
Cette page vous a aidé?