Ligne d'objet - Comment aborder la conception d'e-mails

Un pourcentage important de consommateurs (99 % ) vérifient leurs e-mails tous les jours. Certains groupes démographiques, y compris la génération Y, préfèrent les communications par e-mail des entreprises à d'autres formes de communication, telles que les appels téléphoniques ou les SMS. Et avec plus de 5 milliards de comptes de messagerie actifs dans le monde, le courrier électronique est un élément essentiel de toute stratégie de produit numérique.

Bien qu'il existe des milliers de conceptions de modèles d'e-mails disponibles pour les spécialistes du marketing, la conception d'e-mails est un domaine d'expertise important pour les concepteurs de sites Web. Cela est particulièrement vrai pour ceux qui souhaitent travailler avec de grandes marques, des entreprises créatives et d'autres qui évitent les modèles.

Il y a plusieurs choses que les concepteurs doivent garder à l'esprit lors de la conception d'e-mails, des limites de la plupart des plates-formes de messagerie (avec une prise en charge limitée de choses comme les polices Web de l'un des plus grands - Gmail), ainsi que ce à quoi les consommateurs s'attendent lorsqu'ils ouvrent un e-mail à partir d'un entreprise avec laquelle ils pourraient déjà faire affaire.

L'importance de la conception d'e-mails mobiles

Avec au moins la moitié de tous les e-mails désormais ouverts et lus sur des appareils mobiles, il est irresponsable pour les concepteurs d'ignorer les conceptions d'e-mails adaptées aux mobiles. Surtout si l'on considère que les taux de conversion des e-mails mobiles ont tendance à être nettement supérieurs à ceux des ordinateurs de bureau.

Cette conception de messagerie mobile de PiperJaffray garde les choses simples et élégantes. Il est facile à lire sur un appareil mobile, avec des liens clairs et une image de marque subtile. Il place les besoins de l'utilisateur au premier plan, améliorant l'expérience utilisateur globale et la perception de l'entreprise.

Dribbble garde son e-mail "Popular shots" au point, en se concentrant entièrement sur le contenu. Cette orientation facilite la navigation dans l'e-mail sur les appareils mobiles. Bien qu'une mise en page simple axée sur le contenu soit une bonne idée pour de nombreux types d'e-mails, elle est particulièrement bien adaptée aux e-mails mobiles où elle facilite à la fois la consommation du contenu et l'interaction avec celui-ci.

Se concentrer sur le contenu

En tant que bonne pratique, qu'il s'agisse de concevoir des e-mails ou d'autres produits numériques, les concepteurs doivent toujours se concentrer sur le contenu. Certaines conceptions d'e-mails poussent cette meilleure pratique à l'extrême avec une conception minimaliste où le contenu est la conception.

Lorsqu'ils travaillent sur la plupart des conceptions d'e-mails, les concepteurs bénéficient de la création du contenu avant de plonger dans la conception. Cependant, dans les conceptions minimalistes en particulier, il est encore plus important de savoir quel sera le contenu à l'avance.

Marvel met l'accent sur leur contenu avec un design minimaliste. Le fond blanc et les images qui ne prennent en charge que le texte de la page font vraiment ressortir le contenu.

Tous les e-mails d'Unsplash se concentrent directement sur les images dont ils font la promotion. Le bouton "Afficher la collection" et le fondu au bas des images peuvent augmenter le nombre de clics sur le site, car il laisse les gens vouloir en voir plus.

Renforcer l'image de marque

Lorsqu'un visiteur arrive sur un site Web, il s'agit (idéalement) d'une expérience de marque immersive. Tout est sous le contrôle du concepteur du site Web. Mais la conception des e-mails est différente. L'utilisateur visualise les e-mails dans une autre application, et toutes les applications de messagerie n'affichent pas tous les e-mails de la même manière.

Pour cette raison, l'image de marque dans les conceptions d'e-mails est essentielle pour créer la bonne expérience pour l'utilisateur lisant l'e-mail. Cependant, l'image de marque doit souvent rester simple pour s'afficher efficacement sur divers appareils et clients de messagerie pour le pourcentage le plus élevé d'utilisateurs.

Un simple logo en haut de l'e-mail, utilisant les mêmes images d'en-tête sur plusieurs images et conservant autant d'éléments cohérents avec les autres produits numériques de la marque contribue grandement à soutenir et à renforcer la perception de la marque auprès des consommateurs.

L'image de marque d'Everlane est intrinsèquement simple dans ses e-mails et son site Web. Leur logo affiché bien en évidence en haut de cet e-mail renforce cette image de marque.

Le Middle Finger Project utilise une image d'en-tête cohérente dans tous ses e-mails, ainsi que la couleur d'accent violet vif. Cela rend leurs e-mails immédiatement reconnaissables par toute personne abonnée, et la marque se poursuit sur le site Web.

Attirer l'attention avec la couleur

La couleur a un fort impact sur l'esprit humain, avec la capacité d'influencer les émotions, les perceptions et même le comportement. L'utilisation efficace de la couleur dans les e-mails peut augmenter les taux de clics et de conversion. Dans certains tests, la différence de couleur des boutons peut entraîner une différence de plus de 20 % dans les taux de conversion.

Mais ce ne sont pas seulement les appels à l'action qui bénéficient de l'utilisation de la couleur. La création d'un e-mail coloré peut être un écart par rapport à ce qui est attendu et créer un aspect et une convivialité entièrement différents des autres e-mails dans la boîte de réception d'une personne.

Attirer l'attention sur une bannière de vente avec un rouge vif rappelle les enseignes de vente réelles, qui sont souvent également réalisées dans la même couleur. L'œil du lecteur est immédiatement attiré par le rouge.

Article, un site de commerce électronique de meubles scandinaves, utilise une palette de couleurs rouge et verte en sourdine, le rouge attirant l'attention sur la partie la plus importante : le bouton d'appel à l'action de vente.

Alors que certaines conceptions d'e-mails utilisent la couleur pour attirer l'attention sur une partie particulière du contenu, cet e-mail du zoo de Houston utilise des couleurs vives pour créer un design amusant et énergique. La palette de couleurs orange vif et rose vif attire immédiatement le regard et attire le lecteur.

Utiliser des images époustouflantes

Les humains sont des créatures visuelles et des images époustouflantes peuvent rehausser un e-mail et attirer l'attention du lecteur. Les images peuvent également renforcer le message de l'e-mail et la marque de l'entreprise.

Les émissions de télévision semblent avoir un avantage dans la catégorie "images époustouflantes", avec cet e-mail Netflix utilisant une image fixe vibrante mais mystérieuse de Stranger Things . Combiner l'image accrocheuse avec l'appel à l'action "Play" immédiatement en dessous est logique du point de vue UX, car cela permet aux lecteurs de regarder immédiatement l'émission promue.

Les images époustouflantes ne se limitent pas aux photos. Un dessin animé ou une illustration comme ceux que WePresent utilise dans leurs e-mails est tout aussi accrocheur qu'une photo et peut aider à attirer les lecteurs dans le contenu.

Cet e-mail Deadliest Catch , faisant la promotion de la série documentaire Discovery Channel, affiche une superbe image d'en-tête qui se fond dans le contenu en dessous. Il s'agit d'une technique utile qui encourage le spectateur à continuer à lire.

Expérimenter avec des mises en page non conventionnelles

De nombreuses conceptions d'e-mails ont un format assez standard : en-tête en haut, contenu d'une seule colonne, avec des appels à l'action en haut et en bas. Mais il n'y a aucune règle qui dit que les concepteurs doivent suivre ce modèle particulier.

Les mises en page non conventionnelles sont un excellent moyen d'attirer l'attention du lecteur et de lui donner envie de lire le contenu. Il existe une variété de façons de créer des designs inhabituels. Une méthode populaire consiste à utiliser des images pour créer des mises en page d'e-mails qui ne seraient pas nécessairement compatibles avec de nombreuses plates-formes de messagerie.

Les mises en page non conventionnelles n'ont pas nécessairement besoin d'être sur le mur. Celui-ci, de Mailchimp, utilise une conception à deux colonnes avec une colonne occupée par des blocs de couleur. Ce qui le rend mémorable, c'est qu'il est visuellement attrayant et inattendu.

L'utilisation d'images permet des mises en page d'e-mails plus inattendues comme celle-ci pour KLM. Les concepteurs doivent simplement garder à l'esprit que certains clients de messagerie empêcheront toujours le chargement automatique des images, ce qui nécessitera un texte de secours qui transmettra toujours l'essentiel du message.

Travailler avec des polices

Les clients de messagerie les plus populaires prennent en charge les polices Web, mais malheureusement, tous ne le font pas, Gmail étant l'exception la plus notable (bien que Gmail prenne en charge Roboto et Google Sans dans le cadre de l'interface Gmail). Cependant, les concepteurs peuvent toujours utiliser des polices Web tant qu'ils gardent à l'esprit qu'un grand nombre de clients de messagerie utiliseront des polices de secours.

L'alternative à l'utilisation de polices Web, bien sûr, consiste à utiliser des images qui incluent les polices. C'est ce que de nombreux concepteurs d'e-mails choisissent de faire, en particulier dans les en-têtes où les polices de secours sembleraient probablement déplacées.

Cette newsletter FabFitFun utilise une police de caractères amusante pour attirer l'attention sur le contenu, tout en l'associant à une police de caractères sans empattement très lisible. Expérimenter des combinaisons de polices dans les conceptions d'e-mails est une excellente idée et peut même être utilisé comme essai avant de modifier les polices de caractères sur un site Web ou de les utiliser dans d'autres supports de marque.

Sickbubble utilise une variété de polices dans la conception de ses e-mails, ce qui peut être délicat. Mais dans ce cas, parce qu'ils ont mis à part chaque section, cela fonctionne. La police d'affichage dans l'en-tête a une sensation très audacieuse, tandis que le corps du texte principal est un sans empattement facile à lire. Les polices manuscrites dans la section de promotion du produit fonctionnent car elles sont décalées du corps de l'e-mail.

S'amuser avec les animations

Les animations ajoutent un intérêt visuel supplémentaire aux e-mails et attirent immédiatement l'attention du lecteur. Les GIF animés sont un choix populaire pour ajouter du mouvement aux e-mails et sont pris en charge par la plupart des clients de messagerie.

Les concepteurs doivent s'assurer de garder à l'esprit la taille des fichiers lors de l'intégration d'animations, car de nombreuses personnes lisent des e-mails sur des appareils mobiles. Ils doivent également s'assurer que les animations prennent en charge le contenu et ne se contentent pas de remplir.

L'utilisation de GIF animés pour faire avancer les choses ou mieux illustrer le contenu présenté de manière amusante est un ajout fantastique à la conception d'un e-mail, comme dans cet exemple d'e-mail de Product Hunt.

The Hustle utilise un GIF animé dans ses e-mails pour illustrer le but du message et pour ajouter un intérêt visuel à une conception d'e-mail par ailleurs minimaliste.

Appels à l'action

L'appel à l'action est sans doute la partie la plus importante de presque tous les e-mails envoyés par une entreprise. La plupart des e-mails sont envoyés pour inviter à une action, que cette action consiste à lire un article, à acheter un produit ou à effectuer un autre comportement.

Les concepteurs ont intérêt à porter une attention particulière à la conception de leurs appels à l'action, ainsi qu'à effectuer des tests A/B sur eux pour s'assurer qu'ils sont optimisés pour la performance.

L'utilisation d'une couleur vive pour l'appel à l'action, comme Litmus l'a fait ici, le fait ressortir du reste du contenu. Les concepteurs devraient envisager d'expérimenter différentes couleurs pour voir celles qui conviennent le mieux à leur public en utilisant des tests A/B lors de l'envoi de campagnes par e-mail.

L'utilisation d'une couleur entièrement différente du reste du contenu d'un e-mail pour l'appel à l'action le fait ressortir. Parce que le vert citron dans l'e-mail de Campaign Monitor est une couleur complémentaire fractionnée au violet qui compose l'arrière-plan, il se démarque sans se heurter.

Tenez compte des meilleures pratiques de conception d'e-mails

Bien qu'il y ait beaucoup de place pour la créativité et l'expérimentation dans la conception d'e-mails, les concepteurs doivent également garder à l'esprit les meilleures pratiques et les limites du support.

L'une des étapes les plus importantes de la conception d'e-mails consiste à tester les e-mails sur diverses plates-formes de messagerie avant de les envoyer. Bien qu'il y ait probablement de petites variations entre eux et qu'il y ait toujours des personnes qui utiliseront des plates-formes moins courantes qui rendent les conceptions différemment, il est judicieux de s'assurer que les e-mails s'afficheront de manière acceptable pour la plupart des utilisateurs.

Il existe plusieurs services de test de messagerie que les concepteurs peuvent utiliser pour voir à quoi ressembleront leurs e-mails sur diverses plates-formes de messagerie. Litmus est l'une des plus populaires, mais d'autres options comme Mailgun, Email on Acid, Mailtrap et Preview My Email valent également la peine d'être vérifiées pour voir laquelle répond le mieux aux besoins de chaque projet.

Au-delà de cela, il est essentiel de garder à l'esprit la taille des images et l'utilisation de la bande passante en raison du nombre d'e-mails ouverts sur les appareils mobiles. Les conceptions réactives sont pratiquement une nécessité pour la même raison.

Les meilleures conceptions d'e-mails seront faciles à lire pour les utilisateurs sur n'importe quel appareil et, plus important encore, les inciteront à cliquer sur l'appel à l'action dans l'e-mail (ou à effectuer l'action demandée). Suivre ces meilleures pratiques de conception d'e-mails donne aux concepteurs Web un avantage dans la création d'e-mails qui le font efficacement.

• • •

Pour en savoir plus sur le blog Toptal Design :

• L'expérience est tout - Le guide UX ultime
• Toutes les tendances en valent-elles la peine ? Top 5 des erreurs UX les plus courantes commises par les concepteurs
• UI vs. UX - Explorez les différences fondamentales [Infographie]
• Principes et meilleures pratiques de conception d'UX mobiles
• Le guide fondamental de l'utilisabilité mobile