Le guide du call-to-action pour l'email marketing - Dartagnan

CTA d’un email : la checklist pour optimiser vos conversions

Publié le : 16 décembre 2018 par Adrien Guilleminot

Quelle taille ? Quelle couleur ? Quel texte ? Notre guide en 9 points clés pour concevoir ce qui constitue le point culminant de vos campagnes : le CTA d’un email marketing.

Une petite surface, de quelques pixels à peine, mais des enjeux immenses : le CTA d’un email (call-to-action) peut décider à lui tout seul du succès ou de l’échec d’une campagne d’email marketing.

Pas étonnant qu’avec l’objet, le CTA soit le composant le plus testé par les emails marketeurs… Mais avant le test, on peut déjà s’assurer que le design, le placement, le message d’un bouton d’action offre les meilleurs chances de conversion. Voici notre checklist en 9 points pour y parvenir.

 

1. L’apparence : lui donner l’air « cliquable »

L’un des grands commandements de l’UX Design, c’est de respecter le principe d’affordance : la capacité d’un objet à suggérer sa fonction par sa forme. En clair ? L’icône d’une enveloppe vous indique qu’il s’agit d’envoyer un courrier (électronique, bien sûr), celle d’une flèche vers la droite que vous allez poursuivre, vers la gauche que vous reviendrez en arrière…

Le bouton convertit mieux que le lien

De la même manière, un texte souligné, et encore plus un texte bleu souligné, nous signalent que cette portion de texte est cliquable. Le bouton pousse l’identification encore plus loin : des années de présence de l’informatique dans nos vie fait qu’un bouton dans n’importe quelle interface (y compris l’email) appelle le clic.

Le bouton est-il plus incitatif que le « simple » lien souligné ? La plupart des tests menés sur la question le suggèrent. Par exemple celui-ci, où le bouton occasionne 45% de conversion de plus que le lien. Pour des raisons de hiérarchie et de lisibilité (on y reviendra plus loin), on conseillera néanmoins d’alterner entre boutons et liens.

 

2. La forme : carré, arrondi, ou « pilule » ?

Un call-to-action, c’est donc la plupart du temps un rectangle contenant un message d’appel à l’action. Avec trois formes possibles : des coins carrés, légèrement arrondis, ou en demi-cercle (pilule).

Une tendance assez nette ressort de la plupart des benchmarks spécifiques au CTA dans l’email : les bords légèrement arrondis ont la préférence des email marketers. 75% des boutons « Ajouter au panier » recensés par UX Republic ont adopté cette forme. Un benchmark plus ancien (résumé dans notre infographie sur le portrait robot d’un CTA, plus bas) réalisé par ReallyGoodEmails confirme cette tendance.

Pourquoi l’arrondi est-il privilégié ? Regardez l’image ci-dessous :

Les 3 formes les plus répandues d'un CTA d'email

Quels boutons lisez-vous plus volontiers ? Dans celui du milieu et celui de droite, le message est plus immédiat, car les arrondis guident le regard vers le message. Ce qui est quand même l’objectif principal…

Votre bouton trahit la personnalité de votre marque

Donc, bords arrondis pour tous ? Pas si vite ! Si un call-to-action carré voisine avec un arrondi, il risque effectivement de convertir moins efficacement. Mais dans vos emails, vos CTA ne sont pas en compétition avec ceux d’un concurrent…

Si vous optez pour un design cohérent, et que des boutons à angle droit correspondent mieux à votre charte graphique, n’hésitez pas. Formes plutôt carrées, arrondies, voire avec des angles aigus : le design de vos CTA doit en définitive traduire la personnalité et les valeurs de votre marque.

 

3. La taille : gros (mais pas trop)

Plus il est gros, plus votre CTA est visible, donc plus il a de chances d’être cliqué ? Ce n’est pas toujours vrai, nous apprend par exemple cet article d’Unbounce. Ce qui est certain, en revanche, c’est que la taille compte. En particulier sur mobile, où il s’agit de faciliter au maximum la tâche du mobinaute…

Voici les principales recommandations sur la taille minimale des call-to-action selon Apple (iOS), Google (Android), Microsoft… et un laboratoire du MIT, qui a étudié la « surface de tap » d’un index humain moyen.

Infographie : les tailles recommandées par Google, Apple et Microsoft pour un call-to-action sur mobile

Google recommande donc une zone de 36 pixels minimum pour être aisément cliqué, avec un « vide » entre deux éléments de 8 pixels. Apple table sur 44 pixels, ce qui correspond à peu près à la hauteur de la zone de touche d’un index. Notre recommandation ? Concevoir vos boutons avec une hauteur comprise entre 35 et 45 pixels. Pour des raisons de hiérarchie entre vos CTA, vous pouvez toutefois descendre jusqu’à 30 pixels de haut.

Guidez le regard vers vos call-to-action

Mais la taille ne fait pas tout. L’environnement immédiat de vos CTA compte au moins autant. Pour renforcer la visibilité de vos boutons, vous pouvez faire appel à deux méthodes de design complémentaires :

  • L’usage du whitespace (espace « blanc », ou plus exactement vide, autour de votre CTA et qui va lui permettre de ressortir plus nettement).
  • Les indices visuels : traits, flèches, ou regard d’un personnage tourné vers le CTA, icônes ou flèches dans le CTA lui-même (comme le fait Petit Bateau, ci-dessous)… Ces astuces guident efficacement l’œil de votre destinataire vers votre bouton.
Indice visuel dans un email : l'exemple de Jacadi
Indice visuel dans un email : l'exemple de Petit Bateau

Deux exemples d’indices visuels pour attirer le regard vers un CTA, chez Jacadi et Petit Bateau.
(Cliquez sur les images pour voir les emails en entier)

 

4. La couleur : jouer le contraste

Est-ce que le rouge convertit plus ? Ou est-ce le vert ? Le orange alors ? On va vous décevoir : malgré des centaines d’AB tests sur la question, le recours aux théories sur la signification des couleurs, le coloris idéal d’un call-to-action n’existe pas. D’ailleurs, notre infographie sur le portrait-robot d’un CTA email montre que les email marketeurs privilégient les bleus et verts, au détriment des plus « flashys » rouges ou oranges.

Il y a en revanche des règles à suivre pour choisir la teinte qui conviendra le mieux à votre campagne. À commencer par le respect de la gamme chromatique définie dans la charte graphique de votre marque.

L’arme fatale en matière de coloris des CTA, c’est en définitive le contraste. Jetez un œil à nos trois boutons ci-dessous :

CTA d'un email : l'importance des contrastes

CTA (bleu) foncé sur fond (gris) clair, celui de gauche se distingue nettement mieux que celui du centre (bien que le camaïeu de bleu soit assez harmonieux). Mais c’est celui de droite qui saute immédiatement aux yeux. La raison ? Le contraste entre le bleu du bouton et le jaune-orangé du fond est maximal, car les deux couleurs sont des complémentaires.

Clair sur sombre (ou l’inverse), ou complémentaire sur complémentaire (bleu sur orange, rouge sur vert, jaune sur violet…) : c’est le rapport des couleurs entre elles qui va donc le plus jouer sur l’impact de vos call-to-action.

 

5. La position : le « pli », c’est fini ?

Héritée de l’époque des journaux papier, la notion de « pli » (fold en anglais) ou de « ligne de flottaison » est encore bien ancrée dans l’inconscient des designers. Ce qui est au-dessus du pli :

  • apparaît dès l’ouverture de l’email,
  • a plus de chances d’être vu,
  • est donc a priori perçu comme plus important par le destinataire.

Ce qui se trouve en dessous serait à l’inverse secondaire. Voire invisible…

Où se situe le « pli » dans un email ? Quelque part entre 250 et 350 pixels en dessous du premier pixel, selon la taille de l’écran (desktop ou mobile)… et celle de la fenêtre ouverte par votre destinataire.

Pli contre pouce

C’est donc avant cette limite que vous devriez placer votre CTA… ou pas ? Dans le cadre d’une consultation sur mobile, le pli est un peu supplanté par le scroll (certains estiment même que le fold n’existe plus). C’est donc moins essentiel de faire apparaître le CTA d’un email en haut de votre campagne.

Pire, cela peut même avoir l’effet inverse de celui que vous escomptez : être cliqué. Dans un article passionnant, How to design for thumbs in the era of huge screens, le designer Scott Hurf observe qu’une personne sur deux utilise son smartphone d’une seule main. Et navigue donc avec son seul pouce.

C’était assez aisé sur les premiers smartphones. À l’époque des écrans géants des iPhone 6 Plus ou XS Max (ajouté par nos soins sur ce schéma), cela devient carrément sportif !

Infographie : plus les smartphones deviennent grands, moins la navigation au pouce est aisée

Navigation au pouce : les zones faciles d’accès (en vert), celles qui nécessitent un étirement (orange), et les inaccessibles (rouge), selon la taille du smartphone. Source de l’image : Scott Hurf

Vous voulez qu’on puisse accéder facilement à votre CTA ? Visez donc le « pied » du premier écran.

 

6. La fréquence : less is more ?

En multipliant les call-to-action, donc les occasions de cliquer, on multiplie forcément ses chances de convertir ? Faux. C’est à première vue contre-intuitif, mais de nombreux retours d’expérience démontrent même l’effet inverse :

Et c’est assez logique. Face à un email « sapin de Noël », le destinataire fait face à un biais cognitif assez redoutable : analysis paralysis (paralysie d’analyse, le « refus d’obstacle » généré par une surabondance de choix). Votre job, c’est donc de réduire le nombre d’offres (et donc de CTA) au maximum.

Hiérarchisez vos propositions

Un email = une et une seule proposition claire ? Dans le cadre d’un programme CRM et en email marketing en général, ce n’est pas toujours évident de se tenir à ce principe… La solution, c’est de hiérarchiser vos prises de parole : une en vedette, quelques secondaires, voire de troisième niveau.

Avec donc des designs de CTA différenciés selon leur importance :

  • un bouton « plein », bien visible et stratégiquement placé pour l’offre phare de votre email,
  • un ou plusieurs autres « fantômes » (avec une bordure, mais pas de fond de couleur) pour les offres de moindre importance,
  • et pourquoi pas de simples liens soulignés pour l’accessoire.

CTA principal et secondaires : l'exemple de Oh My Cream

Dans cette newsletter d’Oh My Cream, on distingue du premier coup d’œil la proposition principale des secondaires
(Cliquez sur l’image pour voir l’email en entier)

 

7. Le texte : précis, concis… et pas trop intimidant

On le sait bien : avec quelques lettres à peine, rédiger le texte d’un call-to-action n’est pas un exercice facile. Et on finit par tourner souvent autour des mêmes « En savoir plus », « Acheter », « Voir le produit »… Il est pourtant possible d’être plus créatif, et surtout plus convaincant !

Soyez explicite

Le job n°1 du texte qui figure au beau milieu de votre bouton, et qui attire tous les regards ? Expliciter très précisément au destinataire ce qui va se produire s’il clique :

  • Où va-t-il atterrir : sur une page produit, une landing page, un éditorial, une vidéo ?
  • Quelles options aura-t-il à destination : visualiser différents coloris d’un vêtement, comparer des consoles de jeu, découvrir un hôtel paradisiaque ?
  • Qu’attendez-vous de lui ensuite : qu’il achète (tout de suite), qu’il réserve, qu’il compare ?

Toutes ces informations, le destinataire de votre campagne ne les connaît pas. C’est donc à vous de lui faire entrevoir ce qui l’attend de l’autre côté de cette espèce de porte d’entrée virtuelle qu’est votre CTA.

Un message, un CTA : l'exemple d'une campagne email de Club Med

Club Med « décompose » en plusieurs promesses (et plusieurs CTA) les points forts d’un de ses resorts.
(Cliquez sur l’image pour voir l’email en entier)

Soyez diplomate

Un produit, un bouton « Acheter » : c’est simple, clair, et précis, non ? Mais c’est sans doute aller un peu vite en besogne. L’objectif, c’est de vendre, mais votre destinataire n’a pas forcément envie d’arriver directement à l’achat.

En réalité, opter pour des libellés de CTA moins engageants, qui donnent l’impression d’offrir plus de liberté, est souvent un bon calcul… La preuve avec ces quelques exemples :

La leçon ? « Voir le produit », « Découvrir la collection », « Comparer les couleurs » peut se révéler plus efficace que le très (trop ?) direct « Acheter maintenant ».

Soyez personnel

Votre verbe d’action : -er, -ez, ou en « je » ? Les e-commerçants, d’après le benchmark d’UX-Republic, sont plutôt adeptes de l’infinitif. Et pourtant… Tourner votre call-to-action de façon à ce que le destinataire se sente acteur de la décision permet d’augmenter sensiblement les conversions.

« Je », « Mon » et « Moi » constituent autant de petits coups de pouce à utiliser (ou au moins à tester). Un exemple pour vous en convaincre : cet AB test où le fait de changer « Commencer votre essai gratuit » en « Commencer mon essai grauit » a généré 90% de conversion en plus.

Parfois, soyez muet !

Les exemples cités plus haut prouvent une chose : les rares mots qui accompagnent le call-to-action d’un email ont une importance cruciale. Ce que ces tests ne disent pas… c’est qu’on peut aussi se passer de mots au besoin.

Vous pouvez en faire l’économie si, par exemple :

  • votre proposition est suffisamment évidente pour se passer de sous-titres,
  • votre email est composé d’énormément de produits ou d’opérations, et qu’une ribambelle de CTA risquent d’étouffer votre destinataire.

Le premier cas est illustré par cette campagne de Lacoste, où une simple flèche suffit à faire comprendre où il faut cliquer pour voir les produits.

CTA d'un email sans texte : l'exemple de Lacoste

Lacoste se passe très bien de mots dans ces CTA.
(Cliquez sur l’image pour voir l’email en entier)

 

Le second cas de figure est typique des acteurs des ventes privées, dont les newsletters sont composées de très nombreuses ventes. Un gros bouton « Voir la vente » sous chacune d’entre elles risquerait d’alourdir inutilement le message…

CTA d'un email sans texte : Showroomprivé et BazarChic

Showroomprivé et BazarChic utilisent les CTA au compte-goutte pour alléger leurs newsletters

 

8. La technique : attention aux images !

Concevoir ses CTA comme des images est une pratique répandue… Mais elle peut faire perdre de précieux points de conversion à vos campagnes email. Dans de nombreuses configurations, les images ne vont en effet pas s’afficher. Et vous devrez a minima prévoir un texte alternatif.

Des boutons « bulletproof » pour s’afficher dans tous les contextes

L’alternative ? Coder vos CTA en HTML, afin qu’ils ressemblent à un bouton, sans avoir besoin d’appeler une image. C’est ce que l’on appelle les « bulletproof buttons », parce qu’ils vont s’afficher dans toutes les configurations, et avec le même design.

Voyez par exemple comment le même CTA d’Evaneos va se présenter sur desktop, mobile, ou lorsque les images ne se chargent pas :

Animation : un bouton bulletproof s'affiche dans tous les contextes

Bon à savoir : avec l’email builder de Dartagnan, les boutons de vos campagnes sont « bulletproof », sans avoir besoin de les coder vous-mêmes.

À LIRE AUSSI > ALT texts : magnifiez vos campagnes (même sans images)

9. La vérification : avant le test AB, le test du flou

Vous avez suivi les 8 étapes qui précèdent, et êtes prêts à envoyer votre campagne email avec un beau CTA tout neuf ? Un dernier petit test s’impose avant d’inclure votre nouveau bouton et une version de contrôle dans un test AB (pratique qu’on vous recommande fortement…) : le test du flou.

Convertissez votre email en image, appliquez lui un fort niveau de flou et regardez-le d’un œil neuf : est-il bien structuré ? Le CTA principal est bien visible, en évidence ?

Ce test est très utile pour simuler une lecture « en diagonale » de votre campagne. Si cette dernière passe haut la main le test du flou, elle a de bonnes chances d’attirer l’attention de vos destinataires les plus zappeurs.

Test : floutez votre email pour voir si son CTA ressort bien

Deux campagnes de deux marques concurrentes : ce n’est pas la plus colorée qui passe le mieux le test du flou…

 

Tl;dr : taille, forme, position… le « portrait-robot » pour d’un call-to-action d’email

 

La taille, la forme, la couleur… Notre infographie (basée sur une étude menée par ReallyGoodEmails) détaille les caractéristiques les plus répandus des CTA en email marketing. À conserver pour vous en inspirer… ou vous en démarquer ?

Aucun commentaire pour l'instant

Quelque chose à dire ?

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *