Quelques conseils pour vos boutons d’action

Les boutons d’action (création d’un compte, ajout au panier…) ne représentent qu’une infime partie d’une interface mais ils n’en demeure pas moins un si ce n’est l’élément le plus important (si l’on part du principe que l’objectif premier de la page en question est de transformer). L’attention que vous devez y porter est donc inversement proportionnelle à l’espace qu’ils occupent.

Je vous propose donc une série d’articles où il est question des boutons d’action (« call-to-action » en anglais) :

Voici comment je résumerais les bonnes pratiques listées :

  1. Emplacement – Le ou les boutons d’action doivent impérativement être dans la partie visible de la page (pas de scroll) et être à proximité de zones d’intérêts (bénéfices, captures d’écrans…) ;
  2. Contraste – La visibilité du ou des boutons d’action doit être optimale, il faut donc utiliser une couleur vive qui tranche avec le fond (idéalement une couleur qui n’est réservée qu’à cet effet) ;
  3. Éditorial – L’intitulé de votre bouton d’action doit être court et percutant, privilégiez des verbes (« Créer un compte« ) et adossez-y un bénéfice ou un élément de réassurance (« Inscription gratuite« ) ;
  4. Taille – Plus le bouton est gros et mieux il se voit (dans la limite du raisonnable), prévoyez de l’espace intérieur (padding) pour éviter un effet d’enfermement ;
  5. Alternative – Prévoyez une fonction alternative (« Inscription / Visite guidée« ) afin de ne pas donner l’impression à l’internaute qu’il est dans un cul-de-sac et n’hésitez pas à utiliser des traitements graphiques différents.

À ces bonnes pratiques je rajouterais mes conseils :

  • Graphie – N’utilisez pas de majuscule ou de ponctuation (« INSCRIVEZ-VOUS !« ) car cela rend la lecture plus laborieuse ;
  • Formulation – Évitez les tournures de phrase à la première personne (« Je profite de cette offre« ) car elles peuvent perturber la compréhension de l’action (à qui cette page s’adresse-t-elle) et rallonge le texte ;
  • Retour visuel – Prévoyez un état graphique au survol de la souris pour concentrer l’attention lors de la découverte de la page.

Je vous propose maintenant une petite sélection de boutons d’action pour illustrer ces propos.

PlanHQ propose des boutons très intéressants car ils sont encapsulés dans des cartouches pour accentuer le contraste et compléter l’intitulé :

Les boutons d'action de PlanHQ
Les boutons d'action de PlanHQ

Cammpaign Monitor utilise deux couleurs très différentes pour ces deux boutons, le contraste est idéal par contre je regrette l’utilisation de lettres majuscules ainsi que le recours à une autre typo que le reste de la page :

Les boutons d'action de Campaign Monitor
Les boutons d'action de Campaign Monitor

Remember The Milk propose une combinaison intéressante d’un bouton et d’un lien alternatif, vous apprécierez également l’élément de réassurance sous le bouton (« for a free account« ) :

Le bouton d'action de Remember The Milk
Le bouton d'action de Remember The Milk

PBWorks utilise deux boutonsaux couleurs contrastées (mais qui pourraient être plus gros) ainsi qu’un retour visuel très efficace (passez votre souris dessus) :

Les boutons d'action de PBWorks
Les boutons d'action de PBWorks

Voilà, tout est dit. En suivant les bonnes pratiques citées plus haut et en prenant le meilleur de ces exemples vous devrez arriver à un résultat optimal. Si vous avez de bons exemples, n’hésitez pas à mettre les liens en commentaire.

9 commentaires sur “Quelques conseils pour vos boutons d’action

  1. Merci, ça tombe bien j’ai 2 blogs à mettre à jour et je galère. Bien sûr maintenant ça va juste être compliqué pour le code, le fameux code qu’il « faut juste copier-coller pour que ça « marche pas-fonctionne mal » mais c’est une autre histoire.

  2. Je me posais justement la question pour l’interface de connexion enregistrement.

    J’ai pris le parti
    de faire une boite s’enregistrer avec simplement :

    login
    pass gros bouton « s’inscrire »
    pass
    Gratuit et ouvert à tous

    puis une autre boite séparée

    login pass bouton « se connecter »

    si le pass n’est pas bon on affiche un bouton
    envoyer moi le mot de pass

  3. Excellentes astuces.
    J’aurais ajouté « Simplicité », quelque part entre les notions de « Contraste » et d' »Emplacement ».
    Le fait de proposer une porte de sortie unique, explicite et visible attiront l’oeil (et le clic) bien plus qu’une multitude de liens et de textes explicatifs qui vont polluer la visibilité…

Laisser un commentaire