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 :
- 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…) ;
- 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) ;
- É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“) ;
- 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 ;
- 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
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
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
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
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.
