À propos de ce cours
Cette leçon explique la différence entre un bouton, un lien et un appel à l'action (Call To Action). Elle présente la hiérarchie des boutons (principal, secondaire, tertiaire, destructif, désactivé), l'anatomie d'un bouton et ses six états (normal, survol, focus, appuyé, chargement, désactivé), l'écriture de libellés clairs (verbe + objet) et les règles de disposition : zone du pouce, barre d'action fixe, ordre constant, espacement et actions destructives à l'écart. Trois activités conduisent à créer le composant bouton de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure (cours et 3 activités) | Débutant, chapitre « Boutons, animations et mise en page » | TP 11 : Élaborer la charte graphique d'une application (charte graphique) | Vous savez hiérarchiser les actions d'un écran, concevoir un bouton avec tous ses états et le placer au bon endroit |
-
Objectifs
- Définir un bouton et un appel à l'action (Call To Action, CTA).
- Hiérarchiser les actions d'un écran : principal, secondaire, tertiaire, destructif.
- Concevoir l'anatomie et les états d'un bouton.
- Écrire des libellés clairs.
- Disposer les boutons selon la zone du pouce et des règles constantes.
-
Bouton, lien et appel à l'action
- Un bouton déclenche une action: commander, valider, supprimer, envoyer.
- Un lien mène vers un autre contenu: une page, un détail, une aide. Confondre les deux trompe l'usager : un lien qui supprime une commande est une mauvaise surprise.
- Un appel à l'action (en anglais Call To Action, ou CTA) est le bouton qui porte l'action principale d'un écran, celle pour laquelle l'écran existe : « Commander », « Valider ma commande », « Créer mon compte ».
- Un écran bien conçu répond en un coup d'œil à la question : « Que dois-je faire ici ? ». Le CTA est la réponse.
-
La hiérarchie des boutons
- Principal: l'action la plus importante, en couleur primaire pleine. Un seul par écran: deux boutons principaux, c'est zéro bouton principal.
- Secondaire: une autre action utile, en contour ou en fond clair.
- Tertiaire: une action discrète, en texte seul (« Plus tard », « Voir tout »).
- Destructif: une action difficile à annuler (supprimer, annuler une commande), en rouge et toujours suivie d'une confirmation.
- Désactivé: une action impossible pour l'instant. Il faut dire pourquoi (« Choisissez une heure de retrait »), sinon l'usager se croit bloqué.
- Les boutons à icône économisent de la place mais doivent avoir un nom accessible ; le bouton flottant (FAB) porte une seule action principale permanente.
🍽 Exemple : CantineCampus
- Sur l'écran « Panier », l'action principale est « Valider ma commande » (bouton plein vert).
- « Modifier l'heure » est secondaire (contour), « Vider le panier » tertiaire (texte). Si « Vider le panier » était aussi visible que « Valider », un usager pressé pourrait vider son panier par erreur.
-
L'anatomie d'un bouton
- Le conteneur: sa couleur et sa forme viennent de la charte (couleur primaire, rayon de 8 px).
- Le libellé: 16 px, en gras, centré, sur une seule ligne.
- L'icône (facultative) : 20 à 24 px, à gauche du libellé, pour aider la reconnaissance.
- Les marges internes: 16 à 24 px de chaque côté, pour que le libellé respire.
- La taille: au moins 48 px de haut sur mobile (zone tactile), même si le bouton paraît plus fin.
-
Les états d'un bouton
- Normal: l'état de repos.
- Survol (ordinateur) : la couleur fonce légèrement ; le curseur devient une main.
- Focus: un contour bien visible quand on navigue au clavier. Ne le supprimez jamais : c'est le seul repère des personnes qui n'utilisent pas de souris.
- Appuyé: la couleur fonce encore ; le bouton répond immédiatement au doigt.
- Chargement: un indicateur remplace le libellé, et le bouton ne peut plus être appuyé une 2e fois (évite les doubles commandes).
- Désactivé: gris, avec une explication à côté.
⚠ Piège : un bouton dessiné seulement dans son état « normal » est à moitié conçu. Le développeur inventera les autres états, et ils ne respecteront pas la charte.
-
Écrire le libellé d'un bouton
- Commencez par un verbe d'action et précisez l'objet: « Valider ma commande » plutôt que « Valider », jamais « OK ».
- Dites ce qui va se passer: « Payer 6,70 € » annonce le montant avant l'appui.
- Utilisez les mots des usagers, validés au test des mots (leçon sur le vocabulaire).
- Dans une boîte de dialogue, les boutons répètent l'action: « Annuler la commande » et « Garder », pas « Oui » et « Non ».
- Gardez le libellé court: deux à quatre mots. Évitez les majuscules partout.
-
Disposer les boutons
- Zone du pouce: sur un téléphone tenu d'une main, le bas de l'écran est facile à atteindre, le haut est difficile. L'action principale va en bas.
- Barre d'action fixe: sur un écran qui défile (panier, formulaire), le bouton principal reste visible en bas.
- Ordre constant: choisissez une règle (secondaire à gauche, principal à droite, par exemple) et gardez-la sur tous les écrans.
- Espacement: au moins 8 px entre deux boutons, pour ne pas toucher le mauvais.
- Actions destructives à l'écart: jamais collées au bouton principal, jamais dans la même couleur.
- Alignement: sur mobile, le bouton principal prend souvent toute la largeur ; sur ordinateur, il est aligné avec le contenu, à droite d'un formulaire.
💡 À savoir
- Le test du coup d'œil: montrez l'écran trois secondes et demandez « Sur quoi appuieriez-vous ? ». Si la réponse n'est pas le CTA, la hiérarchie est à revoir.
- Dans Figma, faites du bouton un composant avec variantes (niveau × état × taille) : chaque écran utilise le même bouton.
-
Aide-mémoire
-
Activités
Activité 1Repérer le CTA · ⏱ 10 min
- Faites une capture de quatre écrans d'applications de votre téléphone (commande, inscription, paiement, réglages).
- Pour chacun, entourez le bouton principal, puis classez les autres boutons (secondaire, tertiaire, destructif).
- Un écran a-t-il deux boutons principaux ? Lequel garderiez-vous ?
📁 Résultat attendu : les quatre captures annotées et une phrase par écran.
Activité 2Réécrire des libellés · ⏱ 15 min
- Réécrivez ces libellés : « OK », « Soumettre », « Cliquez ici », « Oui / Non » (pour « Voulez-vous annuler ? »), « Continuer » (sur l'écran de paiement).
- Chaque libellé commence par un verbe et dit ce qui va se passer.
- Faites-les lire à deux personnes : comprennent-elles l'action sans voir l'écran ?
📁 Résultat attendu : un tableau : libellé d'origine, nouveau libellé, réaction des personnes.
Activité 3Le composant bouton de CantineCampus · ⏱ 25 min
- Dans Figma, créez le composant « Bouton » avec les variantes : niveau (principal, secondaire, tertiaire, destructif) × état (normal, survol, focus, appuyé, chargement, désactivé).
- Utilisez les variables de couleur et les styles de texte de votre charte (TP 11).
- Placez les boutons de l'écran « Panier » en respectant la zone du pouce.
📁 Résultat attendu : le composant avec ses 24 variantes et l'écran « Panier » mis à jour.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Deux boutons verts côte à côte | Pas de hiérarchie | Un seul principal ; l'autre devient secondaire |
| « OK » partout | Libellé générique | Verbe + objet : « Valider ma commande » |
| Commande passée deux fois | Pas d'état « chargement » | Bloquer le bouton et montrer le chargement |
| Bouton gris sans explication | État désactivé muet | Dire ce qu'il manque pour l'activer |
| « Supprimer » à côté de « Valider » | Destructif mal placé | L'éloigner, le colorer, demander confirmation |
| Contour de focus supprimé | « C'est plus joli » | Garder un focus visible, de la couleur de la charte |
-
Bilan
- Un bouton déclenche une action; le CTA porte l'action principale de l'écran.
- Un seul bouton principal par écran ; les autres actions sont secondaires, tertiaires ou destructives.
- Un bouton se conçoit avec ses six états et une zone tactile de 48 px.
- Le libellé commence par un verbe et dit ce qui va se passer.
- L'action principale se place en bas, dans la zone du pouce, avec un ordre constant.
Un bon écran n'a qu'une seule réponse à la question « Et maintenant, je fais quoi ? » : son bouton principal.