Button

Le bouton est un composant cliquable qui permet à l’utilisateur de déclencher une action spécifique au sein de l’interface.

# Usage

Le bouton est un élément clé pour initier ou valider une action dans un parcours. Qu’il s’agisse de vente, d’assistance ou d’espace client, il doit clairement guider les actions de l’utilisateur dans son parcours ou au sein d’une page.

Quand l'utiliser
  • Etapes et parcours : passer à l'étape suivante, démarrer ou continuer un parcours.

  • Confirmation et soumission : valider, confirmer ou soumettre un choix ou plusieurs choix.

  • Déclenchement d'une action : ouvrir une modale ou un dropdown.

Quand ne pas l'utiliser
  • Navigation : pour des actions de navigation qui font sortir du parcours ou redirigent vers une information complémentaire, on utilise le link.
Types et usages des boutons

Le rôle du bouton est de guider les utilisateurs dans les étapes clés d'un parcours. Pour cela, il doit répondre à des usages en suivant une hiérarchie d’importance bien définie.

  • Le bouton de conversion met en avant une action de conversion sur une page avec un objectif business bien défini (ex. : “Choisir ce forfait”, “Choisir cette box”, “Ajouter cette option”). Il est possible de mettre plusieurs boutons de conversion sur une même page, mais ils doivent toujours correspondre à une même action et donc avoir la même formulation (ex. : “Choisir ce forfait” dans le mur des forfaits). Il peut être associé à un bouton secondaire ou à un bouton ghost, jamais à un bouton primaire.

  • Le bouton primaire met en avant l’action principale de la page qui ne correspond pas à un objectif business et n’a donc pas pour but de faire convertir l’utilisateur. Il peut être associé à un bouton secondaire ou à un bouton ghost, jamais à un bouton de conversion.

  • Le bouton secondaire met en avant une ou plusieurs actions complémentaires sur la page. Il peut être associé à un bouton primaire, à un bouton de conversion ou à un bouton ghost.

  • Le bouton ghost est utilisé pour actions les moins importantes de la page. Il met en avant une action peu fréquente ou une action de découverte, sans forte emphase visuelle. Il peut être associé à un bouton de conversion, à un bouton primaire ou à un bouton secondaire.

# Do & Don't

Association des types de boutons

Un bouton de conversion et un bouton primaire ne doivent jamais être associés.

Placement horizontal des boutons

Toujours placer l’action la plus importante à droite lorsque 2 boutons sont alignés horizontalement.

Placement vertical des boutons

Toujours placer l’action la plus importante en haut lorsque 2 boutons sont alignés verticalement.