De l’art de concevoir de beaux boutons

Les boutons ont toujours été source de débats sans fin dans le petit monde du web design. Ces débats sont amplement justifiés dans la mesure où les boutons sont (schématiquement) l’élément d’interface qui favorise ou pénalise une vente en ligne. Un simple ajustement sur un bouton peut ainsi avoir d’énormes répercussions sur votre C.A. (The $300 Million Button).

J’ai dernièrement lu deux articles très intéressants publiés sur UX Movement à propos des boutons et de la manière d’optimiser leur emplacement :

Ces deux articles sont suffisamment bien argumentés pour mettre fin au débat. Mais rassurez-vous, les débats continuent en ce qui concerne les boutons utilisés dans le commerce en ligne. Dans ce domaine-là, tout est question d’expérimentation et d’audace, notamment en jouant sur la taille, la forme et la mise en scène du taux de promotion :

Mais en règle générale, il est tout de même possible d’isoler des bonnes pratiques :

  • Localisez le bouton de passage à l’action dans une zone chaude (généralement en bas à droite) ;
  • Utilisez des couleurs attrayantes (jaune, orange ou vert) ;
  • Employez les bons termes pour convaincre et rassurer (pas de “Valider“) ;
  • Jouez sur les contrastes et l’espace blanc pour faire ressortir le bouton du reste de la page ;
  • N’hésitez pas à utiliser un gros bouton et une grosse police de caractère (n’ayez pas peur de vendre) ;
  • Aider l’utilisateur à anticiper les étapes suivantes pour le mettre en confiance.

Ces 6 conseils peuvent vous sembler relever du bon sens, mais ils sont très moins d’être appliqués partout. Pour avoir les arguments et les exemples qui vont avec, je vous recommande les articles suivants : Killer Buttons That Increased Conversion Rates, Call to Action Buttons: Examples and Best Practices, How to Design Buttons to Help Improve Usability, Web Design Trends: Call To Action Buttons et Good Call to Action Buttons.

Personnellement, je milite pour des boutons de bonne taille avec une forme classique, mais qui ne soient pas trop raffinés dans leur typo ou traitement graphique (simple et efficace). Mais encore une fois, tout est question de contexte (en fonction de l’univers graphique de la marque) et d’expérimentation (à vous de faire des tests A/B ou multivariables pour trouver la bonne combinaison).

Pour illustrer l’éventail des possibles et vous inspirer dans votre recherche, je vous recommande enfin cette très complète collection de boutons (qui date de 2007, mais reste d’actualité) : 107 Add to Cart Buttons of the Top Online Retailers.

Une collection de boutons d'ajout au panier

Au final, existe-t-il une règle ultime en matière de conception de bouton ? Non pas réellement de règle ultime, plutôt un ensemble de bonnes pratiques de conception en fonction du contexte : fenêtre nodale, formulaire, commerce en ligne, application en ligne…

8 commentaires pour “De l’art de concevoir de beaux boutons”

  1. Posté par Sebastien Mayoux a dit : le

    Intéressant. J’ai pu remarquer que les boutons situés à droite “transformaient” plus que les autres… a condition de ne pas multiplier les “call to actions” sur une même partie du site (ou de la page). les boutons eux aussi peuvent se cannibaliser.

  2. Posté par » Les articles incontournables de la semaine - Wizishop Blog Ecommerce a dit : le

    [...] La position et l’aspect des boutons qui convertissent De l’art de concevoir de beaux boutons (Blog – SimpleWeb) [...]

  3. Posté par charleslp a dit : le

    Il arrive parfois (souvent ?) que les boutons fassent partie d’une charte graphique rédigée très en amont, ce qui les rend difficile à modifier. Jongler entre efficacité et aspect graphique, c’est un gros challenge.

  4. Posté par Sandrine a dit : le

    Pourquoi ne peut-on pas imprimer cet article ? pourquoi cette fonctionnalité n’est-elle pas proposée ??

    Merci !

  5. Posté par Fabien Grenet a dit : le

    Bonjour Fred,

    Pour apporter un complément à la question “Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right” et renforcer ta conclusion sur l’importance du contexte il y a ce billet très intéressant de UX movement :

    http://uxmovement.com/buttons/the-visual-weight-of-primary-and-secondary-action-buttons/

    Il explique les bonnes pratique en terme de mise en avant des boutons de choix sur les pop-up de “validation / action”.

    On y retrouve le principe du bouton d’action principale situé à droite, mais avec la nuance sur le focus qui est mis selon le contexte sur ce bouton ou sur d’autres !

    Très instructif également !

  6. Posté par FredCavazza.net > L’actualité de mes autres blogs (juillet 2011) a dit : le

    [...] du social dans l’évolution de votre SI.L’actualité de l’utilisabilité sur SimpleWeb.fr :De l’art de concevoir de beaux boutons ;Apple réinvente le système de gestion de fichiers dans iWork.L’actualité de la mobilité et [...]

  7. Posté par slyy a dit : le

    c’est fenêtre modale et pas “nodale” :)

  8. Posté par Pierre-Adrien a dit : le

    Article très intéressant, qui pointe d’ailleurs vers des pages tout aussi intéressantes (UX Movement semble être une vraie mine d’or !). Merci pour cet article et les différents liens cités :)

Laisser un commentaire