Usabilità dell'Email Marketing

Usabilità dell’E-mail Marketing
Version 1.0

Ottobre, 2013
Mimilab®
Mimilab ®
copyright 2013 - confidential
copyright
conﬁdential
mercoledì 30 ottobre 2013

Premessa generale
Fiducia
Uno dei valori aggiunti dell’email marketing è quello di essere il canale
ideale per costruire percorsi di fidelizzazione con gli utenti.
Il concetto di fiducia ne è quindi il presupposto.
Ottenere la fiducia di un utente è però un percorso graduale che
coinvolge vari aspetti della relazione:
dal rispetto delle normative sulla privacy alla costruzione di un
subject interessante, alla pertinenza del messaggio, fino
all’individuazione della giusta frequenza e alla personalizzazione delle
offerte sulla base delle preferenze espresse dall’utente.

Mimilab®

Come fare?
Fattori di successo:
Per ottenere una E-mail Marketing di successo è necessario
occuparsi di alcuni aspetti fondamentali, di carattere tecnologico
(che in questo documento vengono sommariamente accennati),
e di carattere visivo e di usabilità che sono l’argomento principale di
questa presentazione

Mimilab®

Impaginazione e Finalità

Mimilab®
Mimilab ®
copyright
conﬁdential

Semplicità:
Non progettare una E-mail Mktg come se fosse un sito web. Hanno
modalità di fruizione completamente diverse.
In generale, più breve è meglio è.
La posta elettronica è sempre più letta in modalità on-the-go, da
persone impegnate, su diversi tipi di dispositivi.
Scrivendo E-mail per un pubblico distratto è fondamentale mettere in
chiaro che il contenuto è più importante, in modo tale da facilitare gli
inviti alle azioni.

Mimilab®

Colonna singola vs muticolonna :
Il tipo e la quantità di contenuto che si prevede di inviare possono
inﬂenzare il vostro layout email.

Le email si suddividono in due tipi di layout generali:

Colonna Singola
Multi-Colonna

Mimilab®

Colonna singola
VANTAGGI:
Meglio per messaggi brevi,
focalizzati
Più facile da leggere rispetto a
messaggi di posta elettronica a
più colonne
Ideale per le email che
richiedono un invito all'azione

Mimilab®

Multi Colonna
VANTAGGI:
Utile per mail con ampia
gamma di contenuti
Utile per le email product-based
e e-commerce (canale vendita)
Favorisce la lettura di email che
includono diversi contenuti
aggiuntivi (permette una migliore
impaginazione)

Mimilab®

Colonna singola vs multicolonna :
In generale, tutte le E-mail HTML newsletter rientrano in tre grandi
categorie:

Read Me (leggimi!)
Buy Me (comprami!)
Join Me (registrati!)
Possono ovviamente per necessità incorporare tutte le sopracitate
azioni ma in tal caso richiedono una progettazione più accurata

Mimilab®

Read Me (leggimi!)
CARATTERISTICHE:
Messaggio deve essere conciso,
facile da leggere.
Fondamentale buon copywriting.
Meno pesanti grazie ad un basso
numero di immagini.
La tipograﬁa è importante!
NB: E 'importante avere un "gancio" (Buon
titolo che sappia richiamare attenzione) nella
parte superiore del messaggio perchè a volte
i client di posta elettronica, e nel caso del
mobile non possono scaricare l'intero
messaggio.

Mimilab®

Buy Me (comprami!)
CARATTERISTICHE:
Richiedono un buon trattamento
delle immagini (pertinenza,
emozione, taglio, qualità).
Stimola il lettore ad arrivare alla
pagina del prodotto.
Fondamentale intestazioni ben
scritte
A parte l'oggetto, è la prima cosa
che le persone vedono nelle loro
caselle di posta.
Sommari descrittivi (Client spesso
bloccano le immagini)

NB: Ogni prodotto mail dovrà riportare un
link

Mimilab®

Join Me (registrati!)
CARATTERISTICHE:
Gerarchia di informazioni è
molto importante.
Dettagli evento devono essere
sempre sulla parte superiore,
di primo piano in termini di
dimensioni.
Brevi e focalizzate!
Il call-to-action deve essere
chiaramente deﬁnito e
facilmente riconoscibile
a colpo d'occhio.
Le informazioni secondarie vanno
posizionate sempre, dopo
i dettagli dell'evento
e call-to-action.

Mimilab®

E-mail Mobile friendly

Mimilab®
Mimilab ®
copyright
conﬁdential

Global Mobile VS Desktop internet users

IMPORTANTE:
Internet si sta trasformando
velocemente in modalità
"tutto mobile".

1.600
million
users

Le previsioni* affermano che
nel 2015 ci sarà il sorpasso
dell’accesso alla rete internet
tramite smartphone rispetto a
desktop pc
Per questo è necessario creare
E-mail mobile-friendly

2011

2012

2013

2014

2015
Fonti: (http://www.smartinsights.com/)

Mimilab®

I DATI PARLANO CHIARO:
Nel secondo semestre del
2012 il 41% di aperture di
e-mail è da un dispositivo
mobile, smartphone o tablet,
con un tasso di crescita del
14% rispetto ai sei mesi
precedenti. *
In Italia il numero degli
smartphone è cresciuto del
28% mentre quello dei tablet è
quasi raddoppiato, e circa il
40% della popolazione, in
media, può connettersi a
internet tramite questi device**
*Fonti: http://www.knotice.com/
Mimilab®

** Fonti: Audiweb

Attributi Responsive Emails:
- Utilizzare media query per regolare la larghezza email dipende dalla
dimensione del display. In questo modo, la larghezza della posta
elettronica si adatta a qualsiasi dimensione di visualizzazione in
qualsiasi orientamento
- Le dimensioni dei caratteri cambiano dal desktop ai display mobile.
Diverse dimensioni del display possono essere mirate utilizzando diversi
media query
- Layout può essere modiﬁcato da multi - colonna a colonna singola
velocemente.
- Diversi elementi (pulsanti basati su immagini , ad esempio) possono
essere nascoste e visualizzate in funzione da quale piattaforma l'e-mail
viene visualizzata
Mimilab®

Best Design practices:
Durante la progettazione di e-mail mobile oltre alle regole di cui
accenniamo in questa presentazione è necessario considerare un aspetto
poco segnalato ma pur fondamentale:
Spesso l’utente visiona l’email in macchina (certamente deplorevole ma
realistico) o camminando, per questo deve essere ancor più facilmente
leggibile con un occhio (l'altro sta presumibilmente prestando attenzione
al trafﬁco) e tutti i collegamenti utilizzabili con un pollice.
Questo aspetto (ma non solo) implica la scelta di utilizzare anche testo o
indicazioni visive abbastanza grandi in modo che tutto quanto sopra
possa essere fatto comodamente.
Mimilab®

LETTURA TRADIZIONALE:
- Area ottica in alto a sinistra
(generalmente il punto di
partenza della lettura visiva e
quindi di primaria importanza)
- Area ottica in basso a destra
(il termine della lettura visiva)
- Area ottica in alto a destra
(di scarsa lettura)
Area ottica in basso a sinistra
(di debole lettura)

Mimilab®

LETTURA SMARTPHONE:
Malgrado ci siano diversi
modi di tenere lo smartphone
non ancora deﬁniti in
standard, generalmente sono
tenuti in una mano e utilizzati
con un pollice.
Le aree dove è più comodo
toccare con il pollice sono
opposte alla mano dominante
dell'utente

Mimilab®

LETTURA TABLET:
Nei tablet invece sono
generalmente tenuti in due
mani, i pollici consentono di
raggiungere gli obiettivi
toccando ai lati dello
schermo, ma non al centro

Mimilab®

Formato del dispositivo:
Dove possibile, la graﬁca dovrà soddisfare entrambi gli scenari.
Considerate di inserire le importanti call-to-action come bottoni
larghi quanto tutto lo schermo del device in modo tale da
permettere l’azione dell’utente sia destro che mancino.

Mimilab®

Utilizzo delle font

Mimilab®
Mimilab ®
copyright
conﬁdential

Utilizzo delle font (tipograﬁa)
Utilizzo delle font appropriate:
La tipograﬁa nelle email è forse più importante degli altri elementi di
design perchè si deve cercare di rendere costante l’impaginazione
prevista attraverso i diversi client di posta elettronica.
La maggior parte dei client bloccano le immagini provenienti da mittenti
di default, quindi i vostri abbonati quasi sempre vedono il contenuto di
stampa di una e-mail prima di ogni altra cosa.
Come ogni altra cosa con la posta elettronica HTML, ci sono alcune
limitazioni.
E’ necessario sapere che siamo costretti a usare i caratteri di base e/o
i multi-piattaforma supportati

Mimilab®

Utilizzo dei font:
Questi sono i tuoi migliori font senza grazie:
Ok: Arial, Arial Black, Tahoma, Trebuchet MS, Verdana
Buona copertura: Century Gothic, Ginevra, Lucida, (Normale, Sans, Grande)
Questi sono i tuoi migliori scommesse per i font con le grazie:
Ok: Courier, Courier New, Georgia
Buona copertura: MS Serif, New York, Palatino, Palatino Linotype, Monospace Font
Esistono pochi tipi di font a spaziatura ﬁssa con ampio supporto cross-platform:
Ok: Courier, Courier New
Qualche copertura:: Lucida Console, Monaco
Mimilab®

Utilizzo dei font:
Ecco un elenco di tutti i font cross-platform ampiamente
supportati:
Helvetica, Arial, Arial Black, Comic Sans , Courier New, Georgia,
Impact, Carbone, Lucida Console, Lucida Sans Unicode, Lucida
Grande, Palatino Linotype, Libro Antiqua, Palatino, tahoma, Geneva,
Times, Times New Roman, Trebuchet MS, Verdana, Principato di
Monaco.

Mimilab®

Utilizzo delle immagini

Mimilab®
Mimilab ®
copyright
conﬁdential

Poiché la maggior parte dei client di posta elettronica bloccano le
immagini di default, utilizzando le immagini per il testo possono
creare problemi:
- Messaggi di posta elettronica basati su immagini sembrano spam.
- Il tuo contenuto è invisibile, così la gente non sa quale sia il contenuto
del messaggio a meno che non caricano le immagini.
- Si sta inutilmente aggiungendo peso alle dimensioni del ﬁle della posta
elettronica.

Mimilab®

Aspetto tecnico:
Il modo corretto per gestire le immagini in email HTML è di ospitarli su un
server web, quindi richiamare in una e-mail, utilizzando i percorsi assoluti
nel codice.
Per farla breve, non è possibile inviare la graﬁca insieme al messaggio.
Si ospita la graﬁca su un server, quindi il codice nelle tue email HTML
scarica quando il messaggio viene scaricato.

Mimilab®

Aspetto tecnico:
L’utente per visionare le
immagini deve fare clic destro
su una mail o premere un
pulsante per visualizzare le
immagini.
Progettare Email per default
immagini OFF signiﬁca
considerare che la maggior
parte dei client di posta
elettronica su mobile
bloccano tutte le immagini
nella e-mail HTML di default.

Mimilab®

Aspetto tecnico:
Quindi, nella email HTML, risulta fondamentale nella codiﬁca tag
dell’immagine utilizzare i collegamenti di origine assoluti, come
questo:
<img src="http://www.yourserver.com/email/images/logo.gif">

E non usare link di origine relativi, in questo modo:
<img src="images/logo.gif">

Mimilab®

Immagini cliccabili
Per quanto possibile e pertinente, è importante assicurarsi che le
immagini della tua e-mail sono link cliccabili che rimandano al sito o
altri contenuti da veicolare
Le immagini forniscono una mossa visivamente accattivante per i
lettori permettendo loro di scegliere attraverso le immagini, sui
display mobili, le immagini sono molto più facili da toccare con un
dito dei link testuali.

Mimilab®

ESEMPI:
Utilizzare immagini con un
focus sul prodotto per
focalizzare l'attenzione del
lettore su una particolare
parte di un'immagine.

Mimilab®

GIf’s animate
Possono essere utilizzate per aggiungere un po 'di vita alle vostre
email. Possono anche essere efﬁcace ad attirare l'attenzione di un
particolare elemento, e anche funzionare bene come una call-toaction.
Visto che né l’animazione CSS3 né il video sono ben supportati, le
GIF animate godono ampio sostegno tra i client di posta elettronica
sia sul web che su desktop-based.
Outlook2007/2010/2013 è, naturalmente, un client che non supporta
GIF animate. Esso non mostra il primo fotogramma dell'animazione.
Per questo è bene utilizzare GIF animate semplici e usarle con
parsimonia.
Mimilab®

Inviti all’azione

Mimilab®
Mimilab ®
copyright
conﬁdential

Inviti all’azione
Obiettivo primario:
Le chiamate verso l'azione è il primo se non l’unico scopo delle E-mail
Un buon invito all'azione deve essere persuasivo e convincente.
Meglio se più descrittivo di "clicca qui". Usare verbi di comando è
consigliato soltanto nei casi in cui cliccando su un link o un pulsante
porterà a:
-> Scopri di più sul blog
-> Scaricare un’applicazione
-> Acquista adesso
-> Confronta i prezzi

Mimilab®

Inviti all’azione
Non esagerare:
E 'anche necessario per dare ai lettori un motivo per cui essi dovrebbero
completare il vostro invito all'azione.
A tal fine, verificare che il contenuto direttamente collegato al pulsante
sia sufficientemente esplicativo e mostra chiaramente il vantaggio di
prendere l'azione.
Dare un invito all'azione un senso di urgenza può aiutare, anche se è
una linea sottile tra senso di urgenza e apparire come invadente - ricorda
che non tutto è pressante per i nostri tuoi lettori come lo è per noi stessi.

Mimilab®

Inviti all’azione
Buttons Vs. Links
Consideriamo il pulsante il
nostro asso nella manica.
Devono essere utilizzati per le
azioni primarie. Sono il modo
migliore per deﬁnire un
elemento che richiede
un'azione dell’utente.
Devono essere accattivanti
e/o farsi notare
Si dovrebbe prestare cautela a
non inserirne più di uno.

Mimilab®

Inviti all’azione
Buttons Vs. Links
E'più facile includere collegamenti all'interno delle E-mail in modo che,
a differenza di quelle con pulsanti all’interno del testo, non causano al
lettore un brusco arresto di lettura.
Inserire molti link rende i collegamenti facili da perdere o dimenticare.
Un modo semplice per evitare questo problema è quello di allungare il
numero di parole che un link copre.
Invece di collegare solo la parola 'donare' in una frase, collegare
un'intera azione o pensiero, come 'scopri come è possibile supportare
il nostro sito'.

Mimilab®

Inviti all’azione
Buttons Vs. Links
I link sono meglio per azioni
non cruciali.
Per esempio, se la email sta
spingendo gli utenti a
registrarsi, un pulsante
luminoso "Registrati ora" si
esibirà molto meglio di un link.
Ma i pulsanti non sono sempre
la scelta migliore per una
chiamata all'azione, e in certe
situazioni i collegamenti
possono essere altrettanto
efﬁcace

Mimilab®

Inviti all’azione
HTML Vs. Images
Photoshop può aumentare la
qualità del pulsante, per
esempio le ombre funzionano
sempre bene così come angoli
smussati e elementi decorativi.
I tasti basati su immagini però
possono essere soggetti al
blocco immagine dei Client.
Visto che le e-mail sono
sempre più mobile, tenere
presente che le immagini
tendono a rallentare mentre
utilizzando l’HTML non si pone
il problema.

Mimilab®

Fase test

Mimilab®
Mimilab ®
copyright
conﬁdential

Inviti all’azione
Fase Test
E’ fondamentale poter testare le proprie E-mail marketing prima di
lanciare la campagna.
Per questo ci sono molti modi di farlo, visivamente quello più semplice
anche se sembra banale è il test di “strizzare l’occhio”

Mimilab®

Area test

Mimilab®

Conclusioni

Mimilab®
Mimilab ®
copyright
conﬁdential

Conclusioni
Per una miglior fruibilità delle nostre E-mail
Marketing, i fattori chiave sono:
-> Semplicità (No pagine complesse con troppi elementi)
-> Deﬁnizione delle categorie di appartenenza della Email
-> Scelta di colonna singola o doppia
-> Mobile Friendless (Considerate il formato del dispositivo)
-> Attributi responsive emails (Utilizzo di jQuery, CSS)
-> Best Design practices (font, immagini, come viene usato device)
-> Text replacement (Progettare anche per Email senza immagini)
-> Bottone vs link (Usare i Bottoni e i link in maniera appropriata)
-> Html vs immagini (Usare le immagini - bottoni - e HTML)
-> Fase test

Mimilab®

Made by Mimilab.com

Grazie
Ottobre, 2013
Mimilab®
Mimilab ®
copyright
conﬁdential

Usabilità dell'Email Marketing

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Usabilità dell'Email Marketing

Semelhante a Usabilità dell'Email Marketing (20)

Usabilità dell'Email Marketing