emails UX

Les meilleures pratiques en matière d’UX et de design des e-mails

Les meilleures pratiques en matière d'UX et de design des e-mails

Vous n’avez que 50 millisecondes pour capter l’attention d’un utilisateur dans un e-mail.

L’expérience utilisateur (UX) des e-mails est souvent oubliée ou ignorée. Pourtant des e-mails mal conçus peuvent entraîner une baisse des conversions, une perte de revenus et une érosion de la confiance de vos cibles envers votre institution. Nous vous proposons dans cet article un listing des meilleurs conseils pour une bonne UX dans les e-mails. Et qui de mieux pour illustrer ces conseils que les clients Arenametrix ?

I - Les éléments importants d'une campagne emailing :

Pour l’ensemble des points qui seront abordés, votre maître-mot sera simplicité. Les e-mails les plus réussis permettent à l’utilisateur de consommer facilement votre contenu et de réagir facilement face à celui-ci.

1- Les paramétrage de la campagne

On n’a qu’une seule occasion de faire une bonne première impression.

C’est pourquoi vous devez soigner la ligne d’objet, le texte d’aperçu, l’adresse e-mail d’expédition, le nom d’expéditeur et l’adresse e-mail de réponse. Ces éléments inciteront votre audience à ouvrir votre e-mail.

Chateau de Chantilly
Un exemple de Newsletter du Château de Chantilly

Pour éviter d’être catalogué comme spammeur vous pouvez commence par indiquer le nom de votre entreprise comme expéditeur. Il est possible de tester différents expéditeurs si cela correspond à votre stratégie en matière d’image de marque, mais l’objectif à viser est la reconnaissance immédiate de l’expéditeur. Cette reconnaissance favorisera le développement de la confiance de votre audience à votre égard.

Votre ligne d’objet doit répondre à la question : Pourquoi devrais-je ouvrir cet e-mail ?. Soyez aussi bref et direct que possible. La création d’un objet et d’un pré-en-tête parfaits peut sembler difficile, mais c’est tout à fait possible.

2 - Le contenu

Quand vous mettez tout en valeur, vous ne mettez rien en valeur

Vous avez 11 secondes, au maximum, pour communiquer votre message. Il est difficile d’écrire clairement et succinctement, surtout dans les e-mails. Partons du principe que vos abonnés ne feront que parcourir votre e-mail. Facilitez-leur la tâche avec ces quelques conseils :

1 – Commencez par le strict minimum de texte dont vous avez besoin pour faire passer votre message.

2 – La longueur de ligne optimale pour le corps du texte est de 50 à 80 caractères.

3 – Les e-mails doivent avoir des objectifs spécifiques (de préférence un seul objectif, voire deux). 

4 – Prêtez une attention particulière à la formulation de votre proposition de valeur en expliquant : Pourquoi devraient-ils cliquer ?

Cite Automobile
Un exemple d'e-mail de la Cité de l'Automobile au contenu efficace

II - Le design de votre e-mail :

Les éléments de conception, de la sélection des couleurs, en passant par choix des images, ne doivent pas être négligés lors de la création de votre e-mail.

1 - Le choix des couleurs

Un seul mot d’ordre : le contraste.

L’utilisation de couleurs contrastées (ce qui signifie l’utilisation de couleurs nettement distinctes, comme entre un fond noir et un texte blanc) simplifiera la lecture de votre message par les personnes mal-voyantes.

carriere des lumieres
Exemple de Newsletter des Carrières de Lumières

Le contraste sert aussi à mettre en valeur certaines de vos propositions dans le corps d’un email, utilisez-le pour insister sur une information importante, et qui doit sauter aux yeux de vos contacts.
En voici deux bons exemples :

contraste pr mettre en valeur2
Exemple de Newsletter du Centre National des Costumes de Scène
contraste pr mettre en valeur
Exemple de Newsletter d'Oceanopolis

2 - Le choix des images

Qu’il s’agisse de photos, de gifs animés, d’icônes, vous avez plusieurs recommandations à respecter.

1 – On se souvient mieux des images que des mots. Utilisez des images qui complètent le message de votre e-mail pour rendre  les informations formulées plus simples à traiter.

monnaie de paris newsletter
Exemple de Newsletter de la Monnaie de Paris, illustrant leur contenu par une image

2 – Évitez les fichiers volumineux et les longs temps de chargement. La taille du courriel doit être inférieure à 100 Ko. La taille des images doit être inférieure à 1 Mo. 

3 – Si vous utilisez des images d’arrière-plan avec une superposition de texte HTML, assurez-vous que la compréhension de votre visuel reste aisée. Vous pouvez au besoin travailler le rendu dans un éditeur d’images.

4 – Il est préférable de lier vos visuels à des redirections. Les internautes s’attendent en effet à ce qu’une illustration d’un événement donné puisse permettre d’accéder à la présentation de ce dernier.

5 – Dans votre audience, de nombreux contacts peuvent avoir des images bloquées par défaut. Il est donc essentiel d’inclure un texte alt descriptif pour eux et pour votre public malvoyant qui utilise des lecteurs d’écran.

3 - Le choix de la typographie

Si votre public ne peut vous lire, pourquoi lui écrire ?

1 – Utilisez le gras, l’italique et des tailles de police variables pour illustrer la hiérarchie et l’importance de vos informations.

2 – Utilisez des polices lisibles qui s’afficheront quel que soit le client de messagerie, telles que Georgia, Arial, Times New Roman et Verdana.

3 – La taille des caractères est également importante. Sur un ordinateur de bureau, le minimum recommandé est de 16px pour le corps du texte, et un maximum de 21px.

4 – Dans la mesure du possible, soulignez toujours les liens et évitez de les regrouper, car ils peuvent être difficiles à cliquer (surtout sur les téléphones portables). Faites en sorte que vos liens ressortent pour un accès facile !

4 - Le parcours de lecture

Vous pouvez rendre le défilement de votre e-mail facile et attrayant en utilisant un bon design et une distribution appropriée du contenu.

1 – L’utilisation de repères visuels incitant le lecteur à faire défiler votre message, comme les lignes diagonales, ou la mise en page en forme de courbe en S, est un moyen de maintenir l’intérêt des lecteurs. La courbe en S est une approche comprenant une mise en page sur deux colonnes avec une image d’un côté et un texte de l’autre, en changeant de côté à chaque nouvelle ligne.

Chantilly3
Exemple de Newsletter du Château de Chantilly respectant la courbe en S

2 – Pour déterminer les éléments qui ressortent le plus dans votre message, faites le test du strabisme :

Que voyez-vous lorsque vous louchez sur votre e-mail ? De toute évidence, pas grand-chose, mais les éléments qui ressortent le plus (même s’ils sont flous) sont les éléments que votre audience verra en premier.

III - Votre stratégie e-mailing :

Lorsque la quantité d’informations contenues dans votre e-mail dépasse la capacité à les traiter, la mémorisation de celles-ci en pâtit. C’est pourquoi vous devez découper votre contenu, le fragmenter et réfléchir à la hiérarchie de votre contenu :

1 - La hiérarchie du contenu

Le point le plus important de votre message doit être mis en évidence.

1 – Votre titre doit avoir la taille de caractère la plus importante. Vous pouvez le mettre en gras.

2 – Les sous-titres doivent être plus petits que les titres.

3 – Divisez votre contenu en morceaux : paragraphes courts, listes à puces et espaces blancs sont vos amis ! 

4 – Terminez votre message par un appel à l’action (CTA).

2 - L'appel à l'action (Call To action)

Utilisez un CTA pour indiquer au lecteur l’action que vous souhaitez qu’il entreprenne.

Les CTA ne sont pas forcément des boutons, mais ils ont tendance à l’être. Ils peuvent encourager à effectuer plusieurs actions en ligne : cliquer, lire, acheter en ligne : conduire les lecteurs vers un site externe ou les inciter à effectuer une action hors ligne. 

1 – La loi de Hick nous informe que le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix. C’est pourquoi les spécialistes du marketing n’incluent généralement pas plusieurs options d’actions dans un même e-mail.

2 – La taille de votre appel à l’action doit être au minimum de 44x44px et votre bouton doit se démarquer du reste du contenu.

3 – Utilisez un bouton rempli pour les CTA prioritaires. Les liens textuels conviennent pour les CTA secondaires.

4 – Si vous avez sous la main les statistiques de vos e-mails, suivez-les de près pour voir quels sont les CTA que vos abonnés utilisent le plus.

5 – Privilégiez les boutons HTML, qui fonctionnent dans tous les clients de messagerie. Ainsi, si vos abonnés bloquent les images, ils verront quand même votre CTA.

6 – En ce qui concerne l’emplacement, les CTA se situent généralement quelque part en dessous de votre message explicatif. Plus votre message est simple, plus il est acceptable que votre CTA soit placé en haut.

CTA Atelier de Lumieres
Exemple d'appel à l'action de l'Atelier des Lumières

3 - L'expérience globale

L’ergonomie de l’e-mail fait partie intégrante de votre entreprise, au même titre que votre site Web, vos publicités, les réseaux sociaux et le reste.

L’e-mail marketing doit être un élément cohérent de votre stratégie globale. Tentez au maximum de favoriser sa lisibilité, son accessibilité, et le contenu responsive.

1 – Selon le secteur d’activité, le mobile peut représenter au moins 50 % de toutes les ouvertures et les e-mails qui ne s’affichent pas correctement peuvent être supprimés en trois secondes. Assurez-vous que vos modèles d’e-mails sont conçus selon l’approche mobile first.

design mobile first
Exemple de design Mobile First d'une communication du Parc Zoologique de Paris

2 – Présentez les éléments d’information essentiels sous forme de texte plutôt que d’images, là encore en raison du blocage des images. 

3 – Testez, re-testez, et rere-testez vos e-mails afin de vérifier que tout le contenu s’affiche correctement, et que vos liens sont fonctionnels.

Vous pouvez finalement envoyer votre campagne e-mailing.

 Cet article est traduit et adapté de l’article Tips for Email UX and Design Best Practices rédigé par Nout Boctor-Smith pour la rédaction d’Email on Acid.

Pour vous aider dans la conception de votre stratégie e-mailing et respecter facilement tous ces conseils, Arenametrix Routing s’est doté d’un tout nouvel éditeur d’emails !

Toujours très facile d’utilisation grâce au drag&drop, il permet à nos utilisateurs encore plus de liberté et de flexibilité dans leur choix de design. Désormais, ils pourront ajouter de nombreux types d’éléments, travailler avec des thèmes personnalisés (polices, palettes de couleur, boutons…) et déterminer les conditions d’affichage du plus petit élément, même imbriqué.

Pour vous familiariser avec ce nouvel éditeur, vous pouvez solliciter l’aide de votre chargée(e) d’accompagnement.

Sophia Baladi

Sophia Baladi

Vous souhaitez réaliser le diagnostic data & CRM de votre organisation ? Profitez de 30 minutes de conseil offertes en réservant votre créneau.

Visuel Solene crop

Solène Jimenez

Vous souhaitez réaliser le diagnostic data & CRM de votre organisation ? Profitez de 30 minutes de conseil offertes en réservant votre créneau.

Partagez cet article avec vos amis !

/

/

Pour aller plus loin sur notre blog data & divertissement :

Tags:
No Comments

Post A Comment