Amélie Dauvin. Responsable Projets Clients

Transcription

1 Amélie Dauvin Responsable Projets Clients 1

2 UNE SOLUTION DU GROUPE NP6 + 2

3 3

4 ILS NOUS FONT CONFIANCE 4 4

5 5 5

6 Un ing impactant 1- Arrive en boîte de réception 2- Est ouvert 3- Transforme (clic, téléchargement, achat) 6

7 Seulement 80% des s légitimes atteignent la boîte de réception des internautes. Baromètre de la délivrabilité Return Path 7

8 Les éléments clés EXPEDITEUR / OBJET CONTENU CODE HTML BASE DE DONNEES ESP DELIVRABILITE 8

9 ELÉMENTS VISIBLES CONSTITUTIFS D UN COUPLE EXPEDITEUR/OBJET SUCCITER L INTERET Rassurer / Teaser CONTENU PRINCIPAL DELIVRER UN MESSAGE Informer / Séduire / Convaincre CALL TO ACTION GENERER UNE REACTION Etre explicite / Percutant 9

10 Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 10

11 OBJECTIFS CIBLE 3 GRANDES TYPOLOGIES D' PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE Population étrangère (Fichiers loués) Population partisane (Ayant souscrit) Population partisane (en démarche active) Générer du business additionnel sur l instant Acquisition de prospects pour un programme de communication (jeux concours) Informer sur son actualité Alimenter un lien régulier Générer du business additionnel selon le cycle de vie client Ou de la marque Assurer le suivi des actions menées par le consommateur envers la marque ONESHOT REGULIER PONCTUEL 11

12 OBJET EXP DU TEASING À LA PERSONNALISATION PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE Nom de la marque sous sa forme la plus connue Nom de la Newsletter Une personne physique (responsable clientèle, CRM, etc) Proposer une offre séduisante (jeux, promos, privilèges) Installer des codes (une nomenclature): Date, Numéro, sujet principal Personnaliser 12

13 OBJET EXP DU TEASING À LA PERSONNALISATION PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE Galeries Lafayette NEWSLETTER CANALSAT.FR Laurent votre distributeur Opel Gagnez une VESPA S! Newsletter CanalSat Mois Année Mr François Dupont, une offre privilégiée vous attend 13

14 Personnalisez le libellé de l expéditeur EXPÉDITEUR : LE FORMAT À RESPECTER + l adresse d envoi avec le nom de votre marque pour rassurer le lecteur 14

15 BONNES PRATIQUES : OBJET 3 secondes pour convaincre! Environ 50 signes Jouez avec les mots pour créer l attente 15

16 BONNES PRATIQUES : OBJET Utilisez raisonnablement la ponctuation, attention en BtoB 16

17 BONNES PRATIQUES : OBJET Attention aux effets «Automates» 17

18 BONNES PRATIQUES : OBJET Attention aux spam words Gratuit, argent, sex, sexy, 18

19 BONNES PRATIQUES : OBJET Etonnez vos lecteurs en utilisant des alt codes! Retrouvez la liste des codes

20 Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 20

21 DÉFINITION ET OBJECTIFS DU CTA Bouton dont le but est d inciter à l action, au clic Pourquoi? Acheter Contacter Télécharger S inscrire Découvrir 21

22 DIFFÉRENTS DEGRÉS D ENGAGEMENT PUBLICITE 1 action demandant souscription pour un bénéfice non impliquant Je participe NEWSLETTER 1 action amenant à voir le contenu en détail Lire la suite DIALOGUE SPECIFIQUE 1 action engageante vis-àvis de la marque Prendre rendez-vous 22

23 3 ÉLÉMENTS ESSENTIELS D UN CTA 1. Visuel 1 J attire l attention 2. Texte 2 Je motive le clic Position J optimise la visibilité 23

24 VISUEL Optimisation CTA 24

25 VISUEL D UN CTA Texte ou image? Texte >> Moins attractif pour le lecteur mais toujours visible Plus sexy, mais blocage des images par les messageries 25

26 VISUEL D UN CTA Des gros boutons qui se distinguent bien! Caractères gras Grande taille de police Contrastes Effets (3D, ombré ) Harmonie avec les landing pages Eléments graphiques pour guider le regard vers le CTA (des flèches par exemple). 26

27 27 QUELQUES EXEMPLES

28 28 VISUEL D UN CTA

29 TEXTE Optimisation CTA 29

30 TEXTE D UN CTA Etre clair et précis Tenir ses promesses Utiliser des verbes d action Créer l'urgence Motiver l'action 30

31 TEXTE D UN CTA? 31

32 POSITION Optimisation CTA 32

33 3 MODES DE VISUALISATION DES S A droite de l écran En bas de l écran Inactif (seul l objet et l expéditeur sont alors lisibles). 33

34 34 3 ZONES VISIBLES

35 POSITION D UN CTA No scroll! Laisser respirer le bouton Multiplier les possibilités : CTA principal et CTA secondaires Rester centré sur son objectif Profiter du dialogue créé 35

36 36 POSITION D UN CTA

37 37 QUELQUES EXEMPLES

38 Best practices + Test sur votre base 38 = résultats cohérent avec votre activité

39 Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 39

40 BONNES PRATIQUES : CODE HTML Code simplifié et propre (W3C) 600px de large Tableaux Couleurs de fond (body + tableaux) Styles inline Pas de javascripts ni de commentaires Typo pour le web Balises mal interprétées : «float», «margin», ou «padding» style="display:block;" sur les images Pas de nom de domaine «en dur» 40

41 ANTICIPEZ LE BLOCAGE DES IMAGES Balises ALT sur chacune de vos images Couleur du texte sous vos images = mise en avant des zones de clics Page miroir N utilisez pas que des images 41

42 PERSONNALISEZ POUR PLUS D IMPACT! Dans un que puis-je personnaliser? Objet Nom expéditeur Adresse de reply-to Contenu Images Textes Liens 42

43 MAÎTRISEZ LA PERSONNALISATION DE VOS S Maîtrisez le contenu de votre base et testez 43

44 44 UNE PERSONNALISATION RÉUSSIE NE SE VOIT PAS

45 Retrouvez les bonnes pratiques dans notre livre blanc 45

46 Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 46

47 47

48 LES PRINCIPES DU WEB DESIGN Charte graphique de l entreprise Interactions des éléments graphiques sur l humain (Gestalt) Equilibre Continuité Proximité et alignement Similarité Fermeture Charge informationnelle Impacts visuels dynamiques (contraste) 48

49 CHOIX DES IMAGES Une image douée de sens n est jamais seule Texte / Contexte 3 fonctions Ancrage : descriptif produit Relai : sens supplémentaire Contradiction : décalée Un objectif pour chaque image Nombre et fonction selon type de message 49

50 EXEMPLES Relai Ancrage 50

51 TENDANCES 51

52 Retrouvez d autres exemples commentés dans nos livres blancs & infographie infographie 52

53 Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 53

54 Responsive Design Capacité d un à s adapter aux différents supports de lecture 54

55 3 TECHNIQUES L optimisé Un contenu unique 55

56 3 TECHNIQUES L fluide Le contenu prend la dimension de l écran 56

57 3 TECHNIQUES L adaptatif Le contenu est différent sur ordinateur et sur mobile 57

58 LES PRINCIPES DU RESPONSIVE DESIGN Blocs qui passent les uns sous les autres 58

59 LES PRINCIPES DU RESPONSIVE DESIGN Afficher / Masquer des éléments 59

60 LES PRINCIPES DU RESPONSIVE DESIGN Redimensionner des images 60

61 LES PRINCIPES DU RESPONSIVE DESIGN Remplacer des éléments 61

62 OPTIMISER LES S SUR MOBILE Privilégiez la lisibilité! Peu d espace sur les écrans des mobiles > L exploiter au maximum Plusieurs types de mobiles > s attarder sur les dimensions les plus fréquentes Moins d implication client > limiter le scroll, être efficace 62

63 ENTÊTE Profitez du pre-header pour mettre en avant une information importante et attirer l attention Objet : environ 30 caractères 63

64 PRÉSENTATION GÉNÉRALE 1 seule colonne largeur de 320px informations principales dans les 600 premiers px Eviter les images trop grandes (<20ko) ou trop lourdes Simplifier le contenu 64

65 CALL TO ACTION Liens reconnaissables visuellement Taille minimum de 44px*44px Espace vide de15px environ autour du bouton Chacun tient son mobile à sa manière 65

66 66 EXEMPLE D ADAPTATION RESPONSIVE DESIGN

67 Retrouvez tous les conseils Responsive Design dans notre livre blanc 67

68 68 RECETTE POUR UN ING IMPACTANT

69 VOS QUESTIONS 69

70 70 Merci de votre attention!

71 Paris, Londres, Bordeaux, 71