Charte animatique : assurez le spectacle dans vos emails

Publié le : 10 janvier 2020 par Christine Richard

Dès l’ouverture, et jusqu’au bout du scroll : comment faire forte impression du début à la fin de vos emails ? En vous démarquant grâce à une charte animatique, qui va rapprocher l’expérience mail de celle vécue sur le Web. Et magnifier vos offres.

En segmentant finement votre base de destinataires, vous avez gagné en pertinence. En travaillant des objets et préheaders punchy, intrigants, malins… vous avez boosté encore vos taux d’ouverture. Félicitations ! Avec pas loin de 300 milliards d’emails envoyés chaque… jour en 2019 (soit en moyenne près de 80 messages quotidiens par être humain doté d’une boîte mail), vous êtes déjà bien placé pour conquérir la denrée la plus précieuse pour le marketeur moderne : l’attention.

Félicitations, donc, mais… votre job n’est pas fini pour autant. Car une fois que l’email est ouvert, quid de la suite ? Vos messages sont-ils engageants ? Ils doivent donner envie de s’y attarder, d’y consacrer plus de 11,1 secondes, voire… d’attendre avec impatience et d’ouvrir fébrilement vos prochains envois. En clair, offrir une expérience utilisateur au-dessus de la moyenne :

  • surprendre, attirer et engager dès l’ouverture
  • maintenir l’attention tout au long du scroll
  • mettre enfin l’accent sur les messages et contenus saillants de la campagne

GIFs, vidéo, cinémagraphe : les formats animés sont un excellent moyen de captiver et d’engager vos destinataires. Mais si, au lieu d’éléments valorisants mais isolés, c’était tout votre email qui faisait usage de l’animation ? Toutes vos campagnes, même ? C’est tout l’intérêt d’une charte animatique pour l’email.

Qu’est-ce qu’une charte animatique ?

En deux mots, c’est l’équivalent « qui bouge » de la charte graphique (à laquelle nous consacrons un livre blanc complet, pour aider les équipes marketing et CRM à « cadrer » et accélérer la conception de leurs campagnes).
Cette dernière doit définir en vrac les polices, les couleurs, le style et le traitement des images, les pictos, les rapports de blanc… Avec une charte animatique vous complétez cette codification des éléments « fixes » de vos campagnes avec les bonnes règles d’usage :

  • des hover effect (effet de survol) sur les CTA
  • des fade in ou fade out (apparition/disparition progressive), des scale (changement d’échelle)
  • des parallaxes et autres animations de background
  • etc.

Une image valant mieux qu’un long discours, cette vidéo illustre quelques exemples d’effets, sinon classiques, du moins que l’on s’est habitué à croiser sur le Web. Et pour les plus curieux -et les esthètes- en fin de cet article Alfredo de notre équipe UX/design partage une petite sélection d’animations Web où puiser beaucoup d’inspiration.

Et dans l’email, que peut-on faire ?

Non seulement c’est possible, mais c’est clairement une tendance émergente de notre canal marketing favori. L’annonce il y a quelque semaines par Google de son framework AMP for Email en constitue un signal fort : l’email marketing va être de plus en plus interactif, contextualisé, et animé.

L'email marketing va devenir de plus en plus interactif, contextualisé, et animéClick to Tweet

Théâtraliser son entrée

En matière d’animatique, vous allez pouvoir théâtraliser l’apparitions de votre campagne, avec un effet « intro » du plus bel effet. Typiquement votre logo, votre header et l’image « hero » de votre offre principale… bref tout ce qui va se situer au dessus de la ligne de flottaison va s’enchaîner harmonieusement, avec un effet de surprise non négligeable : les premières secondes sont toujours cruciales. Effet bonus : elle retient l’attention du destinataire si le chargement de l’email est un peu long.

Effets de fade in dans l'email - Dartagnan

Magnifier ses offres

Vous allez ensuite pouvoir mettre en scène l’affichage de vos produits avec des zooms subtils, mais aussi l’apparition en fade-in des éléments de votre campagne au fur et à mesure du scroll.

Transitions animatiques dans l'email - Dartagnan

Focaliser l’attention sur les CTA

Enfin, vous allez pouvoir donner plus d’impact à ces si stratégiques CTA, avec ces trois effets hover parmi d’autres : allumage, ombrage, et zoom. A noter qu’un hover sur une image produit peut aussi constituer un effet très séduisant : pour montrer un vêtement sur un mannequin au passage de la souris alors qu’il apparaît « vide » autrement, par exemple.

Hover effects sur CTA - Dartagnan

Une charte animatique ne répond donc pas « seulement » à l’exigence d’améliorer l’expérience utilisateur d’une campagne. Elle peut aussi avoir un impact très concret sur la réactivité et la conversion de vos campagnes.
 


 

Quand avez-vous besoin d’une charte animatique ?

Sur le papier, tout programme d’email marketing gagnerait à se préoccuper des règles d’animation des contenus. Il y a quand même certaines catégories d’annonceurs pour qui la question est encore plus cruciale :

  • le secteur du luxe dans son ensemble : habillement haut de gamme, maroquinerie, joaillerie et horlogerie, spiritueux, automobile… Tous les produits à « supplément d’âme »
  • le voyage, et plus généralement les produits qui « vendent du rêve » (culture, food, beauté, etc.)
  • les retailers dans l’univers de la maison, de l’habillement (outdoor, sportif, mode…), du high-tech…

Une marque cohérente de la TV à l’email

Si sur vos autres supports de communication (votre site ou votre application mobile, votre chaine vidéo et vos publicités télévisées…) vos créatifs ont déjà développé des guidelines animatiques, les décliner dans votre email marketing va renforcer la cohérence de la marque. Et dans le cas du site Web en particulier, assurer une consistence de l’expérience qui ne peut que faire du bien à vos conversions…

Autre critère de décision pour développer ou non votre charte animatique : la composition de votre base d’abonnés. Si vos emails sont lus dans des contextes où l’email interactif et animé est bien supporté (iOS et les environnements Apple en général, les webmails d’Orange et de SFR, Android sur mobile…) : feu vert. Si vos destinataires vous consultent dans des contextes où les possibilités créatives sont plus limitées, comme Outlook, c’est une autre histoire…

Pourquoi s’en préoccuper dès maintenant ?

Se pencher sur sa charte animatique, c’est prendre un temps d’avance sur la concurrence. Et marquer de précieux points dans la lutte que mènent tous les annonceurs pour proposer l’expérience client la plus fluide et la plus engageante du marché.

Car on commence déjà à voir quelques email marketers poser les bases de l’animatique dans l’email. Souvent de façon discrète, par petites touches, mais nul doute qu’ils iront rapidement plus loin… Voici quelques exemples.

Prochaine Escale : capter l’attention en une seconde

C’est subtil, mais cela suffit à faire son petit effet : en animant simplement son logo dans cet email, le voyagiste Prochaine Escale génère très efficacement un temps d’arrêt et de l’attention : effet « hameçon » réalisé avec un minimum de moyens !

Prochaine Escale - animatique du logo dans l'email - Dartagnan

Lacoste : « charter » son hero animé

Même minimalisme chic pour la célèbre marque au croco. Le balayage oblique de l’mage hero de ses campagnes crée un gimmick visuel immédiatement identifiable. D’autant plus qu’il est parfaitement cohérent avec l’animatique que la griffe déploie sur son site Web.

Lacoste - charte GIF email - Dartagnan

Zalando : marquer les points saillants

Un email = un message-clé : la logique est totalement respectée par l’e-commerçant Zalando dans cette campagne. L’animation de la remise combiné à un design très épuré remplit parfaitement son office : guider le regard vers l’information principale.

Zalando - Animatique texte email - Dartagnan

Club Med : une expérience animatique poussée

Dans sa campagne de teasing présentant les principales nouveautés de 2018, Club Med a fait un usage plus poussé des possibilités de l’animatique dans l’email :

  • un fade in sur l’ensemble du message
  • une animation dans le header
  • des micro-animations sur les 4 nouveaux villages, circuits et services qui vont marquer son année

Le résultat ? Un email extrêmement qualitatif, avec plusieurs niveaux de lecture, et qui ménage de multiples surprises. Donc avec un temps de lecture et des possibilités de découverte, tout en conservant ce qui fait la force de l’email marketing : sa capacité à présenter succinctement les offres… en donnant envie d’en savoir plus. Un exemple à suivre pour vos prochaines campagnes ?

Où trouver l’inspiration pour votre charte animatique ?

Alfredo, l’une de nos « têtes chercheuse » de l’équipe UX/Design de Dartagnan, a compilé quelques exemples de sites Internet qui parviennent à utiliser intelligemment les effets animatiques, sans jamais tomber dans le gadget. Petite sélection.

Effets « hover » dans les CTA, parallaxe, fade-in et scale des images au scroll

Cinémagraphes, background animé, parallaxe

One page scroll, fade in et slide down des typo, sliders…

Interactions à la souris et design génératif du background

 

Aucun commentaire pour l'instant

Quelque chose à dire ?

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

(Very) good news !

Le meilleur de l'actualité email marketing rédigée

(ou dénichée) par nos experts dans votre boîte mail.