Exemple d'email : Picture

Une fois n’est pas coutume, je vais vous présenter un email qui m’a déçu. Oui déçu car l’annonceur et par conséquent la marque me parle pleinement : des vêtements Outdoor avec un engagement environnemental et social fort, une labellisation B-corp, une transparence sur la chaîne de production et des actions concrètes de protection et de partage. Bingo ! En plein dans le mille c’est pour moi et ça devrait être raccord avec une communication responsable.

Mais pourquoi cet email promotionnel de Noël est-il si décevant ?

Un email promotionnel pour Noël, déjà ce n’est pas vraiment le type de communication qui m’intéresse. Mais là je suis biaisé et forcément « business is business » alors je comprends. Curieux lorsqu’il s’agit d’email, celui-ci créé toutefois chez moi une dissonance par rapport à l’image que je me suis faite de la marque. Voici les points qui selon moi auraient pu être traités différemment tout en alignant le positionnement de marque :

• Objet ET préheader FOMO (fear of missing out) : une technique un peu beaucoup sale et chaudement recommandée sur Linkedin et autre. Pourtant si nous nous soucions un brin du bien être mental de nos clients, lecteurs alors nous évitons autant que possible de leur mettre un coup de pression et de les stresser. D’autant plus qu’ici il y a un préheader (invisible dans la création mais présent dans votre boite mail) qui reprend exactement le même contenu que l’objet. Le tout avec un émoji « alarme réveil en rouge ». Dommage.

• Pression par le ton et la rédaction en fin de lecture comme une piqure de rappel : « Ne manquez pas votre chance ! » FOMO quand tu nous tiens
• En parlant de santé mentale, l’intégralité de la présentation produits (images d’ambiance) passe par des GIF animés qui bouclent sur un montage cut de changement de produit à un rythme élevé. Cela fait 9 visuels qui clignotent sans que nous ayons réellement le temps de fixer le regard. Si vous avez des troubles de l’attention ou êtes sujet à des crises d’épilepsie, n’ouvrez pas cet email.
• Transition toute faite pour aborder l’accessibilité des contenus. Du texte en image, aïe ! 14 images présentes en tout dans la création. Ouch ! Et bien entendu aucune alternative textuelle (attribut alt des balises img). Vous utilisez un lecteur d’écran ? Vous n’aurez donc pas accès à la majorité des contenus. Votre boîte de réception bloque le téléchargement des images ? Vous n’aurez pas non plus les informations principales de ce message promotionnel. D’autant plus dommage que l’ensemble des images sont cliquables et censée être les « call to action ».
• Corollaire, le logo, donc l’identité visuelle, qui rend la marque identifiable et unique, est une image qui prend toute la largeur de la création (le logo n’est pas recadré et intègre les marges donc poids de fichier non optimisé). Là aussi pas d’alternative textuelle. Pas d’image, pas de marque. On ne sait pas qui vous êtes !

• Autre alignement de valeur possible, le poids et les ressources nécessaires. Une partie de ce qui peut être couvert par de l’éco-conception. Nous avons déjà vu que nous avions 14 requêtes pour des ressources images dont 3 GIF animés d’environ 200 ko chacun. Un invité s’est glissé dans les ressources téléchargées : une Google Fonts ! Le poids n’est pas énorme pour le coup car Evil corp optimise bien ses ressources, par contre en regardant la créa, je ne la vois pas ? Pas tout de suite en fait. Elle est utilisée uniquement pour le texte des mentions légales en 11px et gris clair sur fond blanc. Mes yeux saignent des larmes de sang et mon cœur est brisé.
• Design system et identification des composants. Le traitement graphique des boutons contenus dans les images et de celui en HTML/CSS est différent. Outre une incohérence de branding, cela ne facilite pas les repères visuels pour le lecteur.

Et sinon il y a des choses bien dans cet email de Picture ?

Oui, heureusement !

• Le poids du HTML très contenu à 63 ko et donc bien en dessous des 102 ko qui le tronqueraient sur Gmail. C’est en partie dû au fait que le contenu est dans les images, donc à tester pour voir le résultat en faisant les choses proprement.
• L’optimisation du poids des images. Elles sont nombreuses. Il y a des gif animés dont les dimensions sont grandes, je m’attendais à avoir des chiffres énormes mais on reste en dessous des 200 ko et c’est déjà pas mal.
• La lisibilité des contenus texte. Mis à part les mentions légales et le lien de page miroir, l’ensemble des contenus est à 16px minimum. Il y a de la hiérarchisation avec des titres de niveau différent et identifiable. Le contraste entre couleur de texte et couleur de fond est top (conforme au WCAG de niveau AAA). Bonus sur le pompon, les majuscules sont accentuées (chose rare dans les emails). Pour chipoter (parce qu’il parait que je suis « pinailleur »), les paragraphes de texte sont justifiés et génèrent donc des lézardes qui rendent le suivi de ligne plus difficile à la lecture.
• Pas de fallback ou de surcouche de code spécifique. Notamment visible sur le seul et unique bouton qui n’est pas une image. Pas de surenchère d’effets ou de contenus « innovant » résultat la version en Dark mode passe proprement et sans effort.
• Version mobile. Oui l’email est bien responsive ! Ouf ^^ Par contre il a une largeur fixe à 320px qui correspond à des tailles de viewport vieillissantes. Vu le positionnement de la marque, il ne serait pas surprenant que bon nombre d’abonnés consultent sur des smartphones plutôt haut de gamme et récents. Résultat ils auront de grandes marges latérale blanche et un email tout coincé au centre.

Engagez-vous qu’il disait !

Si l’engagement de Picture est bel et bien là dans leurs produits comme dans leur architecture d’entreprise, cela ne transparait pas dans leurs communications emails. Il ne manque pas grand chose et quelques actions rapides à mettre en œuvre pourraient corriger cette dichotomie sans difficulté.