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) :

• Web Design Trends: Call To Action Buttons ;
• Good Call-To-Action Buttons ;
• 10 techniques for an effective ‘call to action’.

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é :

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 :

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« ) :

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) :

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.

Lorsque vous vendez du service (ou même des produits avec beaucoup de caractéristiques techniques), il est essentiel de bien présenter les différentes offres et surtout de ne pas générer de la confusion chez le prospect. Plus facile à dire qu’à faire car vous pouvez avoir des offres très similaires ou complexes à présenter. Idéalement il faut un tableau comparatif qui donne envie et où chacun va trouver facilement l’offre qui lui correspond et se persuader qu’elle est mieux que les autres.

Pour attayer votre réflexion je vous propose donc deux très bons articles : Pricing Tables: Examples And Best Practices et Design Decisions: The new Highrise signup chart.

Dans le premier article, il est question des meilleures pratiques :

• Faire ressortir les différences et non les similitudes ;
• Mettre en avant un choix pour faciliter la prise de décision des indécis ;
• Ne pas surcharger le tableau pour pouvoir utiliser une typo plus grande ;
• Clôturer le tableau avec des appels à l’action simples.

Pour illustrer ceci, voici un exemple avec le très bon tableau des offres de CrazyEgg :

Dans le deuxième article, il est question de la refonte du tableau de présentation des offres de Highrise dont voici la version initiale :

Vous noterez le côté brouillon de ce tableau avec beaucoup de bruit et du contenu difficile à décrypter (trop de tailles de typo différentes, de couleurs et stimuli visuels). Voici la version finale :

Nous avons ici une page bien plus incitative avec une belle promesse au-dessus du tableau, moins de bruit, une meilleure segmentation (« For big groups, For small teams…« ) et des appels à l’action bien plus visibles. Vous noterez également qu’il existe une offre gratuite mais qu’elle est complètement mise en retrait (en bas à gauche du tableau).

Pour prolonger cette réflexion je vous engage à visiter les sites des constructeurs automobile US qui proposent  des Car Comparator très intéressants.