Aller directement au contenu

La bonne ergonomie des “call to action” (CTA), conseils pour concevoir les boutons d’action

13/12/2016
0

Amazon, la SNCF, Le Bon Coin, Airbnb… Tous ces géants de l’e-commerce ont un dénominateur commun : ils arborent un bouton «call to action ou CTA» principal sur leurs pages. Le réseau social Facebook en a même fait une marque de fabrique avec le fameux « Like ». Les initiatives dans ce registre se multiplient, les marques étant toujours en quête d’un nouvel outil pour simplifier et fluidifier l’expérience utilisateur (UX) de leurs sites.

Le call to action, un bouton qui se montre

De plus en plus plébiscité, ce petit module «star» vise à déclencher ou à suggérer une action chez un internaute telle qu’une prise de rendez-vous, une demande de devis ou de formulaire, poser une question, passer d’une page à une autre ou lancer un processus… Et s’il fait des émules, notamment parmi les e-commerçants, c’est qu’il revêt un aspect stratégique indéniable. A condition bien sûr, de bien le concevoir.

Call To Action - CTA Lead Gen
Le call to action “Download now” prend une forme qui induit la notion de téléchargement

Sa position et sa taille, par exemple, requièrent une réflexion approfondie : faut-il le placer à droite, à gauche ou en bas de la page ? Faut-il l’insérer dans un espace dédié ? Quelle taille lui donner ?

Souvent défini en termes de pixels ou en millimètre, le bouton doit respecter des dimensions bien précises. Bon nombre d’ergonome se sont accordés sur un standard de 9 mm. Dans un cas d’usage professionnels nous opteront pour un format de 20 millimètres. En fait, la surface du CTA doit donner à l’utilisateur toute la latitude pour cliquer.
A noter que l’utilisation de l’unité millimètre permet de s’affranchir des contraintes liées à la densité de pixel des différents écrans. Nous vous invitons à consulter notre guide à ce sujet.

bouton-daction-ios
Les boutons sur iPhone et sur iPad font 1 cm, soit une taille très proche de la recommandation de 9 mm

Les non-initiés pourraient être tentés de multiplier la présence des boutons d’action sur une même page ou de lui donner une taille imposante afin de lui conférer davantage de visibilité. Erreur de débutants ! Car le risque ici est de créer de la confusion chez le lecteur. Différents scénarios expérimentés ont ainsi mis en évidence qu’un design plus épais du module avait un effet quasi-nul sur les taux de conversions. 

Quant aux couleurs, s’il n’existe pas de règles pré-établies, certaines d’entre elles sont souvent sélectionnées. Le vert, l’orange ou le bleu remportent un franc succès, comme toutes les couleurs vives d’ailleurs. Seul le rouge, souvent associé à la suppression d’élément reste à la marge. Aussi, pour conserver de l’harmonie et de la cohérence dans le graphisme, il est préférable de puiser l’inspiration dans la charte graphique de l’entreprise.

Parmi les bonnes pratiques observées, nous préconisons également l’emploi de verbes d’action, de phrases courtes pour faciliter la compréhension « enregistrez-vous », « télécharger », «  ajouter au panier », ou de placer dans un groupe de mots, les termes plus importants comme « je réserve », « j’achète » ou « j’ajoute dans mon panier » toujours à droite. Deux ou trois mots suffisent à capter l’attention ou à déclencher une action chez l’internaute. Concrètement, plus les termes sont génériques comme : « demande d’informations », « prendre contact », moins ils influencent l’internaute dans sa prise de décisions. A l’inverse, plus les expressions impliquent l’utilisateur, plus elles apportent un bénéfice ou répondent à une demande, plus les taux de transformation augmentent.

Call to action - Start using it now
Le libellé “Start using it now !” invite à utiliser l’offre proposée

Soulignons que chaque nouvel élément doit nécessairement être testé pour garantir sa pertinence. La bonne pratique consiste donc à effectuer des tests utilisateurs à chaque étape de création de l’interface afin de s’assurer que le call to action soit en lien avec les usages des utilisateurs. Ces phases d’itérations sont essentielles pour optimiser l’ergonomie du site et rendre la navigation plus intuitive.

L’importance des boutons dans votre interface

Les boutons sont la pierre angulaire de la navigation d’un site ou d’une application. Bien conçu, un CTA dope les taux de conversion. Par exemple, un site de e-commerce européen qui a optimisé sa page d’accueil a augmenté de 36% le taux de conversion. Toujours pour le même site un libellé incitatif comme « demandez votre réduction » a boosté l’audience de +15%.

Call_to_action_Panier d'achat
La zone d’action est ici clairement indiquée par une couleur

Dans un autre domaine, le site de location de bureau MatchOffice.com utilise une formulation plus personnelle dans un bouton « Je crée mon compte » au lieu de  « créer votre compte », ce qui a eu un impact positif sur la prise de décision (+15%). Ces exemples montrent bien l’importance du soin à apporter à l’expérience utilisateur via la notion d’émotionnel design. Derrière ce terme se cache le fait que pour l’humain l’émotion a un rôle crucial dans la compréhension du monde qui l’entoure.

Conclusion

Le call to action est un levier marketing fort, mais permet aussi de générer des contacts, créer de l’interaction entre la marque/enseigne et le client, collecter des données ou encore convertir un internaute en consommateur. Cet élément a donc un avenir pérenne au sein d’un web qui se tourne résolument vers les utilisateurs. Qu’ils soient des internautes ultraconnectés, multidevices ou simplement occasionnels, les utilisateurs ont une attente de qualité de plus en plus forte. Il est désormais question de leurs assurer une fluidité de navigation sans rupture sur chaque terminal et entre chaque écran sans nuire au design et à l’ergonomie du site.

Au sein d’Usabilis, nous mettons notre expertise à votre disposition pour vous aider à concevoir vos boutons, interfaces et à les tester pendant des phases de tests utilisateurs.

Lire aussi sur le blog :

Commentaire