Système de boutons et d'actions

Que fait Système de boutons et d'actions ?

Objectif

Le Système de boutons et d'actions fournit une méthodologie pour concevoir les principaux moteurs de l'interaction utilisateur. Les boutons sont le lien fondamental entre l'intention d'un utilisateur et la réponse d'un système. Ce système garantit que chaque action est visuellement priorisée (Hiérarchie), cohérente dans son style (Cohésion) et facile à utiliser sur tous les appareils (Utilisabilité). Il va au-delà de la simple "création d'un bouton" pour définir un cadre logique expliquant comment différents types d'actions se rapportent les uns aux autres dans une mise en page.

Cas d'utilisation

• Définir une bibliothèque de composants boutons pour un système de design.
• Établir une hiérarchie des actions dans une section Héros ou un en-tête de page.
• Organiser des groupes d'actions connexes (par ex., Enregistrer, Annuler, Supprimer).
• Concevoir des déclencheurs spécialisés comme les boutons à icône seule ou les boutons d'action flottante (FAB).
• Standardiser la relation entre la taille des boutons et la densité de la mise en page.

Quand ne PAS l'utiliser

• Liens de navigation globaux : Pour naviguer entre les sections principales d'un site, utilisez site-navigation-system.
• Hyperliens dans le texte : Pour les liens intégrés dans un paragraphe de texte qui mènent à plus d'informations, utilisez les traitements typographiques standard.
• Éléments purement décoratifs : N'utilisez pas les styles de bouton pour des éléments qui ne peuvent pas être cliqués ou tapés.
• Saisies de formulaire complexes : Pour sélectionner des options (Cases à cocher, Boutons radio, Listes déroulantes), utilisez form-design-system.

Entrées

1. Priorité de l'action : La tâche est-elle Primaire (Niveau 1), Secondaire (Niveau 2) ou Tertiaire (Niveau 3) ?
2. Gravité de l'action : L'action est-elle "Positive" (Soumettre), "Neutre" (Annuler) ou "Destructive" (Supprimer) ?
3. Densité contextuelle : Où se trouve le bouton ? (par ex., un Héros spacieux vs. une ligne de tableau de données compacte).
4. Jetons de marque : Palette de couleurs, échelle typographique et préférences de rayon de coin.

Sorties

1. Matrice des variantes de bouton : Styles définis pour les variantes Primaire, Secondaire, Fantôme et Danger.
2. Échelle de tailles : Une gamme de hauteurs et de remplissages (par ex., Petit, Moyen, Grand).
3. Spécification anatomique : Règles d'espacement interne pour le texte, les icônes et les conteneurs.
4. Règles de regroupement d'actions : Directives pour l'alignement, l'ordre et l'espacement entre plusieurs boutons.

Flux de travail

1. Établir la hiérarchie des variantes

Attribuez des poids visuels aux boutons en fonction de leur importance pour l'objectif de l'utilisateur :

• Primaire (Niveau 1) : Fond rempli à contraste élevé. Généralement l'objectif "principal" de la page. Un seul par vue.
• Secondaire (Niveau 2) : Fond contourné ou à faible contraste. Utilisé pour les actions alternatives ou de support.
• Tertiaire/Fantôme (Niveau 3) : Pas de fond ni de bordure à l'état par défaut. Utilisé pour les tâches de faible priorité ou dans une interface dense (comme les tableaux).
• Danger : Couleur à contraste élevé (généralement Rouge). Utilisé strictement pour les actions destructrices et permanentes.

2. Définir l'échelle de tailles

Faites correspondre les dimensions des boutons au contexte de mise en page à l'aide de fluid-spacing-system :

• Grand (Héros/Page d'atterrissage) : Proéminence maximale. Remplissage vertical élevé.
• Moyen (Par défaut) : Le standard pour les formulaires, les modales et les en-têtes.
• Petit (Compact) : Utilisé dans les barres latérales, les cartes et les tableaux de données où l'espace est limité.

3. Concevoir l'anatomie interne

Standardisez la structure du conteneur du bouton :

• Remplissage : Maintenez un rapport constant horizontal vs. vertical (généralement horizontal = 1,5x à 2x le vertical).
• Intégration des icônes : Définissez l'espace entre une icône et le texte (par ex., --space-xs).
• Rayon de coin : Déterminez la "rondeur" (Tranchant, Arrondi ou Pilule) pour correspondre au ton visuel de la marque.

4. Créer des groupes de boutons

Lorsque vous placez plusieurs actions ensemble, suivez un ordre logique :

• Ordre : Placez l'action Primaire dans la position "conclusion" (à droite sur ordinateur de bureau, en haut dans une pile verticale mobile).
• Espacement : Utilisez un espace cohérent (par ex., --space-s) entre les boutons d'un groupe.
• Alignement : Alignez à droite les actions dans les modales/en-têtes ; alignez à gauche dans les formulaires ; centrez dans les Héros.

5. Définir le comportement responsive

Assurez-vous que les actions restent utilisables sur toutes les tailles d'écran :

• Boutons pleine largeur (Bloc) : Sur mobile, les petits boutons s'étendent souvent pour remplir la largeur du conteneur afin de faciliter l'atteinte avec le pouce.
• Repli icône seule : Dans les en-têtes extrêmement serrés, les étiquettes de texte peuvent être masquées au profit d'icônes (assurez-vous de la présence de l'attribut aria-label).

Règles de décision

• La règle "Un seul Primaire" : Il ne doit y avoir qu'un seul bouton Primaire (Niveau 1) visible dans un seul contexte/fenêtre d'affichage pour éviter la "paralysie du choix".
• Fantôme vs. Lien : Utilisez un bouton Fantôme lorsque l'action est fonctionnelle (par ex., "Fermer", "Annuler") ; utilisez un lien texte lorsque l'action est navigationnelle (par ex., "En savoir plus sur notre politique").
• Placement des icônes : Utilisez une icône principale (à gauche) pour clarifier l'action (par ex., une icône de Recherche) ; utilisez une icône de fin (à droite) pour indiquer la direction (par ex., une Flèche pour "Étape suivante").
• Contraste pour le Danger : Les boutons destructeurs doivent avoir un aspect sensiblement différent des boutons Primaires pour éviter les clics accidentels.

Contraintes

• Accessibilité : Le texte doit respecter le contraste WCAG AA (4,5:1). Les éléments interactifs doivent avoir un état focus clair (voir interactive-state-system).
• Cibles tactiles : Tous les boutons doivent avoir une zone interactive minimale de 24x24px (WCAG 2.2 SC 2.5.8), même si l'élément visuel est plus petit ; utilisez 44x44px comme valeur par défaut confortable pour les actions primaires et les mises en page mobiles.
• Troncature : Le texte des boutons ne doit jamais être tronqué. Si l'étiquette est trop longue, réévaluez le texte ou permettez au bouton de s'étendre/se développer.

Schémas d'échec courants

• Soupe de boutons : Utiliser 3 à 4 boutons Primaires sur une seule page, ce qui dilue l'importance de l'appel à l'action principal.
• La "zone grise" : Donner aux boutons l'apparence d'éléments désactivés par manque de contraste ou de couleur.
• Interaction manquante : Ne pas définir les états hover ou active, ce qui laisse l'utilisateur incertain que son clic a été enregistré.
• Cibles minuscules : Concevoir de petits boutons fantômes avec uniquement du texte qui sont presque impossibles à toucher sur un écran mobile.
• Alignement confus : Mélanger différents alignements de boutons dans le même flux, obligeant l'utilisateur à "chasser" la prochaine action.

Critères de validation

• Chaque page/vue a une action Primaire claire.
• Les variantes de boutons (Primaire, Secondaire, Fantôme, Danger) sont utilisées de manière cohérente.
• Les boutons respectent la cible tactile minimale WCAG 2.2 de 24x24px (2.5.8), avec 44x44px utilisé pour les actions primaires et mobiles.
• La hiérarchie visuelle est maintenue lorsque les boutons sont regroupés.
• Les états de focus sont distincts et à contraste élevé.
• Les étiquettes des boutons sont concises et utilisent des "verbes d'action" (par ex., "Enregistrer", "Créer", "Rejoindre").
• Les fenêtres d'affichage mobiles utilisent des boutons pleine largeur lorsque cela est approprié pour l'accessibilité tactile.