Les e-mails ont une place centrale dans la relation client. Voici quelques règles à suivre, de structure, de contenu et de discours pour faire en sorte que vos utilisateurs aient envie d'ouvrir vos e-mails !

1. GUIDELINES POUR
LA CONCEPTION &
LE DESIGN
D’EMAILS

2. DIFFERENTS
EMAILS

3. MARKETING NOTIFICATION TRANSACTIONNEL
Relation Public
Personnel
(1 à 1)
Personnel
(1 à 1)
Déclancheur Le site
L’Utilisateur
Réponses Automatiques
Alertes
L’utilisateur
Contenu
News
Offres
Promotions
…
Email d’anniversaire
Relance Caddie abandonné
Demande de feedback
Remerciement après achat
…
Confirmations diverses
(ouverture de compte,
confirmation de paiement,
suivi de commande…)
Niveau d’attention
accordé par le lecteur
Faible
Moyen
(email « bonne surprise »)
Fort
(Email attendu, rassurant)
3 TYPES D’EMAILS

4. Les Emails Marketings
Les emails marketings contiennent des
des messages informatifs souvent a
caractère incitatif. Ils servent a faire
découvrir, une actualité, une offre ou
réduction du moment etc
Le destinataire doit donner son accord
pour recevoir ce type d’email.
Exemples classiques d’emails marketing :
• Newsletters
• Vente Flash
• Annonces de soldes / promotions
…
LES EMAILS MARKETING
http://www.emaildesignreview.com/email-design-inspiration/summer-showcase-virgin-america-animations-2785/

5. Les Emails de notification
Ces emails permettent de tenir au courant
l’usager lorsque tel ou tel événement se
produit.
Ils peuvent également être utilisés pour
marquer un événement (ex: anniversaire
etc)
Exemples classiques d’emails de notification:
• Prise de contact quelques jours après une inscription
• Félicitations lors d’un changement de statut (premier achat,
activité...)
• Email d’anniversaire
• Email suite à un caddie abandonné
• Produit à nouveau en stock
• Promotions de produits vus récemment
• Remerciements après un achat
• Demande de feedback suite à un achat (produit, service...)
• Email à la suite d’un achat pour proposer d’autres produits
…
LES EMAILS DE NOTIFICATION

6. Les Emails transactionnels
Ces emails sont très attendus par l’utilisateur.
Ils contiennent une information que
l’utilisateur souhaite vérifier ou confirmer. Est-
ce que son compte à bien été créé ? Son mot
de passe bien modifié ? Sa commande bien
envoyée ? etc...
Ils sont gage de réassurance et servent a
conforter l’utilisateur. Ils participent à créer la
confiance que l’utilisateur va accorder au
service.
Exemples classiques d’emails transactionnels:
• Message de bienvenue / ouverture de compte
• Suivi de l’envoi et du statut de la commande
• Confirmation de l’expédition de la commande
• Clôture de compte
• Confirmation de paiement
• Envoi de facture
LES EMAILS TRANSACTIONNELS

7. BEST-PRACTICES

8. CONTENU
IDENTITÉ
DISPOSITION
TEXTE
CALLS TO ACTION

9. Un message précis
Les emails les plus efficaces ont un seul
message clair. Si vous avez plusieurs
informations à faire passer, demandez-vous
si ils peuvent être séparés en une série
d’emails
1 message = 1 email
Le Sujet de l’email doit refléter le contenu tout
en attirant la curiosité du lecteur.
CONTENU

10. Un Pré-header consistant et attractif
Ce cours aperçu du contenu, suivant le Sujet
de l’email, joue un role primordial dans la
decision d’ouverture ou non de l’email.
La plupart des services d’Emailing
permettent une personnalisation. L’impact sur
le taux d’ouverture est important
CONTENU
View it online
HierLa Compagnie
Lorem Ipsum
Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque …
Sed ut perspiciatis unde omnis iste natus
Un pré-header, ça fonctionne !
http://www.emaildesignreview.com/email-design-best-practice/email-
design-best-practice-the-johnson-box-86/
Best practices Préheader :
https://www.campaignmonitor.com/blog/email-marketing/2011/12/a-
practical-guide-to-email-preheaders/

11. Proposer une version en ligne
Pour des raisons d’accessibilité et pour être
sur que l’utilisateur puisse lire l’email quel
que soit son client email
CONTENU
View it online

12. Pas de navigation
Garder le focus sur le Call to Action principal
En cas de longue newsletter un index peut
être utile, mais il ne doit pas refléter la nav du
site. Il peut renvoyer à un passage de la
newsletter (ancres) ou une page precise du
site (lien).
CONTENU

13. Être Concis
Réduire la longueur de l’email autant que
possible permet de focaliser l’attention du
lecteur sur l’essentiel
CONTENU

14. Texte d’introduction minimal
67% des utilisateurs ne lisent pas le texte
d’introduction, même si il ne fait que 2 lignes.
CONTENU

15. Hiérarchiser
Placer les informations les plus importantes
le plus haut possible, au dessus de la ligne
de flottaison.
CONTENU

16. Séparer
Utiliser des titres et des listes à points pour
diviser le contenu en sections facilement
identifiables.
Cela facilite le scan et la lecture partielle
CONTENU

17. Ne pas sur-utiliser les images
Le ratio maximal est 60% texte, 40% image.
Au delà il se peut que l’email soit considéré
comme du spam.
Préférer une seule simple image marquante a
plusieurs images
CONTENU

18. CONTENU
IDENTITÉ
DISPOSITION
TEXTE
CALLS TO ACTION

19. Logo et schéma de couleur de la marque/
du site web
Pour une identification immédiate de
l’expéditeur par l’utilisateur, dès le header le
logo est l’univers de la marque doivent être
cohérents
Choisir seulement 1 ou deux couleurs pour
ne pas distraire le lecteur du message
IDENTITÉ

20. CONTENU
IDENTITÉ
DISPOSITION
TEXTE
CALLS TO ACTION

21. Dimensions correctes
Largeur : 550 - 650px Max
Header : 100 - 150 px de haut Max
DISPOSITION
550 - 650px
100 - 150 px

22. Optimiser pour la lecture rapide
Titres explicites
Textes courts
Elements espacés
La plupart des gens ne passent pas plus de
15s à « lire » un email marketing.
Le comportement principal est le SCAN,
lecture partielle et rapide du contenu dans le
sens de lecture
DISPOSITION

23. Aligner le contenu
Centrer le contenu peut fonctionner si la
quantité de contenu est très faible.
Autrement préférer un alignement à gauche.
La partie droite de l’email n’attire que très peut l’attention (Les
utilisateurs effectuent un scan rapide et ne lisent que les quelques
premiers mots des lignes,à gauche)
A garder en tête lors du design d’un email sur plusieurs colonne
Garder l’alignement consistant tout au long
de l’email.
DISPOSITION

24. Encadrer et segmenter le contenu
Utiliser des borders ou des couleurs de fond
permet de focaliser l’attention du lecteur et
de l’informe visuellement de la structure/
segmentation de la newsletter.
Le flow de lecture est simplifié
Utiliser des couleurs de fond pour
différencier le header et le footer du contenu
DISPOSITION

25. Limiter la taille du footer
Pas besoin d’une longue liste de conditions
d’utilisation etc
Y insérer le bouton “Se désabonner” (pour
les newsletters)
Le footer est également un bon endroit où
insérer un lien vers les réseaux sociaux
On y retrouve également l’adresse, un lien de
contact et un renvoi vers le site web
DISPOSITION
Se désabonner

26. CONTENU
IDENTITÉ
DISPOSITION
TEXTE
CALLS TO ACTION

27. Lisibilité
Minimum pour une lisibilité descente sur
mobile :
• Taille du texte compris entre 14px et
16px
• Titres 22px min
TEXTE

28. Lignes courtes
60 caractères MAX par ligne
Pas de longs paragraphes, découper le
contenu et utiliser des phrases d’accroche
Facilite la lecture et le scan
TEXTE

29. CONTENU
IDENTITÉ
DISPOSITION
TEXTE
CALLS TO ACTION

30. Des CTA visibles
Le CTA doit ressortir du reste du message
avec un contraste suffisant.
Les liens et autres boutons doivent
clairement montrer qu’ils sont cliquables, le
mobile ne supportant pas d’effet hover.
Accorder leur taille en fonction de leur
importance
CALLS TO ACTION
Lorem cliquable

31. Des labels incitateurs
Eviter les « cliquez ici »
Ecrire des CTA courts et clairs qui motiveront
les utilisateurs
Leur dire exactement ce qu’ils doivent faire.
CALLS TO ACTION
Lorem

32. Exemples :
http://reallygoodemails.com/
http://www.emaildesignreview.com/
NNGroup newsletter usability study
https://emarketingadjunct.files.wordpress.com/2011/04/
newsletter-usability-4th-edition.pdf
QUELQUES LIENS