On croit qu’il s’agit d’une question de couleur. Rouge ou vert, arrondi ou carré, avec ou sans ombre. Ces discussions occupent des réunions entières et ne changent presque rien. Ce qui fait qu’un bouton est cliqué ou ignoré se joue ailleurs dans ce qu’il promet, et dans le moment où il apparaît.
Un bouton n’est pas un appel à l’action
La confusion est répandue. Un appel à l’action, c’est l’ensemble formé par une proposition, une raison d’y répondre, et un élément cliquable. Le bouton n’en est que la partie visible.
C’est pour cela qu’optimiser la couleur d’un bouton produit des gains marginaux, alors que reformuler ce qu’il propose produit parfois des écarts considérables. La documentation réunie sur julien-jimenez.net revient longuement sur cette hiérarchie, et elle est contre-intuitive : le texte du bouton compte plus que sa forme, et ce qui l’entoure compte plus que le bouton lui-même.
Autrement dit, avant de toucher au design, écrivez.
Le verbe et le bénéfice
Deux règles suffisent à améliorer la plupart des appels à l’action existants.
Employez un verbe à la première personne du point de vue du visiteur. « Télécharger le guide » fonctionne mieux que « Téléchargement ». Le verbe met en mouvement, le substantif décrit.
Annoncez ce qu’on obtient, pas ce qu’on fait. « Recevoir ma configuration recommandée » est plus efficace que « Valider ». « Voir les 40 jeux compatibles » bat « En savoir plus ».
Bannissez les libellés vides : « Cliquez ici », « En savoir plus », « Soumettre », « Continuer ». Ils ne disent rien de ce qui suit, et cette incertitude suffit à faire hésiter.
Si votre bouton fait plus de cinq mots, la proposition est probablement trop complexe. Simplifiez l’offre, pas le texte.
Un seul appel principal par page
C’est la règle la plus violée, et celle qui coûte le plus cher.
Quand une page propose de s’inscrire à la newsletter, de télécharger un document, de demander un devis et de suivre le compte social, elle ne propose rien : le visiteur, face à quatre options équivalentes, n’en choisit aucune.
Définissez une action principale par page, et donnez-lui un traitement visuel nettement dominant. Les actions secondaires existent, mais en retrait : lien texte plutôt que bouton, taille réduite, position moins exposée.
Cette hiérarchie visuelle n’est pas une question esthétique. C’est ce qui permet au visiteur de décider sans effort.
La forme, quand même
Une fois le contenu réglé, la forme compte pour la lisibilité.
Le bouton doit être identifiable comme cliquable : contraste suffisant avec le fond, forme distincte du reste. Un bouton plat de la même couleur que la page passe inaperçu, surtout chez les visiteurs les moins à l’aise avec le web.
Prévoyez une surface tactile confortable au moins 44 pixels de hauteur et de l’espace autour. Un bouton collé à d’autres éléments génère des clics ratés sur mobile.
Vérifiez le contraste du texte sur le fond du bouton. Un texte blanc sur jaune clair est illisible pour beaucoup de gens, y compris ceux qui ne s’en plaindront jamais.
Le moment plutôt que l’endroit
Question fréquente : faut-il placer l’appel à l’action en haut ou en bas de page ? La réponse est : au moment où la personne est convaincue.
Sur une page courte à proposition simple, cela peut être immédiatement. Sur une page qui doit expliquer, argumenter, rassurer, un appel placé trop tôt arrive avant la décision et un appel unique placé tout en bas arrive après que la moitié des visiteurs sont partis.
La solution pratique consiste à répéter le même appel à l’action à deux ou trois moments clés du défilement, avec le même libellé. Répéter n’est pas insister : c’est être disponible au moment où la personne se décide, quel qu’il soit.