🎨 Guide Complet : Ergonomie et Couleur des Boutons
Principes UX/UI, Accessibilité et Bonnes Pratiques
📋 Table des Matières
1️⃣ Hiérarchie des Actions
La couleur et le style permettent de guider l’œil vers l’action la plus importante (Primaire) et de reléguer les actions moins cruciales (Secondaire/Tertiaire).
Exemples de Hiérarchie
- Primaire (Pleine couleur) : L’action que vous voulez que l’utilisateur accomplisse en priorité (ex: Sauvegarder, Confirmer, Acheter)
- Secondaire (Contour) : Actions de support, importantes mais moins prioritaires (ex: Annuler, Retour)
- Tertiaire (Texte) : Actions les moins prioritaires, souvent des liens (ex: En savoir plus, Aide)
- Ghost (Transparent) : Actions neutres qui ne doivent pas attirer l’attention
2️⃣ Signification Sémantique (Psychologie des Couleurs)
Chaque couleur est associée à un rôle spécifique pour réduire la charge cognitive de l’utilisateur. Respecter ces conventions améliore l’intuitivité.
Palette Sémantique Complète
| Couleur | Signification | Cas d’usage |
|---|---|---|
| 🔵 Bleu | Confiance, Action par défaut | Poursuivre, Soumettre, Action principale |
| 🟢 Vert | Validation, Succès, Continuer | Confirmer, Valider, Enregistrer avec succès |
| 🟡 Jaune/Orange | Attention, Avertissement | Modifier, Attention requise, Actions réversibles |
| 🔴 Rouge | Erreur, Danger, Destruction | Supprimer, Annuler définitivement, Actions destructives |
| 🔷 Cyan | Information, Aide | En savoir plus, Afficher des détails, Aide contextuelle |
3️⃣ États des Boutons
Les boutons doivent clairement indiquer leur état (normal, hover, actif, focus, désactivé, loading) pour une interaction intuitive.
États Interactifs
Démonstration Interactive
- Hover : Changement de couleur + élévation subtile (translateY) pour signaler l’interactivité
- Active : Effet de pression (bouton enfoncé) pour feedback tactile visuel
- Focus : Bordure ou halo visible pour navigation au clavier (accessibilité)
- Disabled : Couleur grisée + cursor: not-allowed + attribut disabled
- Loading : Spinner ou animation pour actions asynchrones
4️⃣ Tailles et Proportions
La taille des boutons doit être adaptée au contexte et à l’importance de l’action. Respectez les zones de clic minimales.
Variantes de Tailles
- Utilisez des boutons plus grands pour les actions principales sur mobile
- Maintenez un espacement minimal de 8px entre les boutons
- Le texte du bouton doit être lisible sans effort (min 14px)
- Les boutons doivent avoir un padding horizontal suffisant (min 16px)
5️⃣ Groupes de Boutons
Regroupez les actions liées pour améliorer la compréhension et réduire l’encombrement visuel.
Groupe de Boutons
Actions Espacées
Barre d’Actions
6️⃣ Boutons avec Icônes
Les icônes améliorent la reconnaissance visuelle et l’accessibilité lorsqu’elles sont utilisées correctement.
Icônes + Texte
Boutons Icône Seuls
title ou aria-label pour les lecteurs d’écran.
7️⃣ Accessibilité et Contraste (WCAG)
Le respect des critères WCAG garantit que vos boutons sont utilisables par tous, y compris les personnes malvoyantes ou utilisant des technologies d’assistance.
Ratios de Contraste WCAG 2.1
| Niveau | Texte Normal | Texte Large (18pt+) | Usage |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | Minimum légal (requis) |
| AAA | 7:1 | 4.5:1 | Idéal (recommandé) |
Test de Contraste sur Nos Boutons
| Bouton | Ratio | WCAG AA | WCAG AAA |
|---|---|---|---|
| Primaire (Bleu #007bff / Blanc) | 8.6:1 | ✓ PASS | ✓ PASS |
| Succès (Vert #28a745 / Blanc) | 7.4:1 | ✓ PASS | ✓ PASS |
| Danger (Rouge #dc3545 / Blanc) | 5.9:1 | ✓ PASS | ✗ FAIL |
| Désactivé (Gris #ccc / #666) | 3.2:1 | ✗ FAIL | ✗ FAIL |
disabled empêche toute interaction, rendant le contraste moins critique.
- Utilisez des outils comme WebAIM Contrast Checker pour vérifier vos couleurs
- Assurez-vous que le focus est toujours visible (outline ou box-shadow)
- Testez la navigation au clavier (Tab, Enter, Space)
- Ajoutez des labels ARIA pour les boutons sans texte visible
- Ne vous fiez jamais uniquement à la couleur pour transmettre l’information
8️⃣ Do’s & Don’ts
Voici les erreurs les plus courantes à éviter et les bonnes pratiques à adopter.
✅ À FAIRE
Un seul bouton primaire pour l’action principale, secondaire pour les actions de support.
❌ À ÉVITER
Deux boutons primaires créent de la confusion sur l’action attendue.
✅ À FAIRE
Rouge pour les actions destructives avec une icône claire.
❌ À ÉVITER
Vert pour supprimer va à l’encontre des conventions et crée de la confusion.
✅ À FAIRE
Zone de clic généreuse (44x44px min) avec padding adapté.
❌ À ÉVITER
Bouton trop petit difficile à cliquer, surtout sur mobile.
✅ À FAIRE
Label clair et explicite qui décrit l’action exacte.
❌ À ÉVITER
Label vague qui ne communique pas clairement l’action.
Checklist Complète
- Utilisez un seul bouton primaire par page/section
- Respectez les conventions sémantiques des couleurs
- Assurez un contraste minimum de 4.5:1 (WCAG AA)
- Maintenez une zone de clic minimale de 44x44px
- Fournissez un feedback visuel clair pour tous les états
- Utilisez des labels descriptifs (verbes d’action)
- Testez avec la navigation au clavier
- Espacez suffisamment les boutons (min 8px)
- Confirmez les actions destructives (modal)
- Utilisez des animations subtiles et rapides (200-300ms)
9️⃣ Palette de Couleurs Complète
Voici la palette de couleurs utilisée dans ce guide, conforme aux standards d’accessibilité.
Ressources Complémentaires :
📚 WCAG Guidelines |
🎨 Contrast Checker |
📖 Material Design Color |
🍎 Apple HIG
© 2024 – Guide UX/UI des Boutons | Créé avec ❤️ pour améliorer l’expérience utilisateur