Video: migliorare l’esperienza dell’utente per aumentare l’engagement

Chi fa email marketing sa bene che per realizzare una newsletter accattivante – che attiri, cioè, l’attenzione e che inviti all’azione – va fatto un lavoro preliminare sia di tipo editoriale (sapere cosa e come comunicare un prodotto, un servizio o un evento) sia di tipo estetico (adottare un layout grafico gradevole, che consenta di organizzare ed esporre tutti i contenuti in modo chiaro).

E’ innegabile che un’email graficamente ben composta dia maggiore sicurezza in chi la legge. Proprio così: sicurezza! Quella che deriva dall’idea che un’email se fatta bene è perchè dietro c’è un’azienda seria che tiene alla propria comunicazione esterna, un’azienda solida e in salute che investe per realizzare una comunicazione brillante ed intrigante. Al contrario, un’email priva di senso estetico, con un uso eccessivo (e quindi sbagliato) di font e colori differenti e priva di qualsivoglia simmetria tra testo e immagini, da un tocco di ambiguo alla comunicazione: a quanti sarà capitato di snobbare o, peggio, di considerare come spam un messaggio email così realizzato anche se proveniente da un mittente conosciuto? Credo a molti di noi.

Coniugare estetica e contenuti è, quindi, fondamentale nella comunicazione via email. Bisognerebbe, piuttosto, puntare su ulteriori elementi innovativi affinchè l’approccio del destinatario con la nostra newsletter sia gradevole ed interessante.

Perchè, allora, non includere un video nelle nostre email?

Un’idea fantastica dato che un filmato renderebbe senz’altro più dinamica l’esperienza di chi legge, innescando un processo psicologico duplice di curiosità (pensate ad esempio ad una video-storia a puntate che può iniziare sull’email e finire sul web. Il lettore penserà: “Chissà come va a finire questa storia” finendo per cliccare sul video) e di rilassamento (partendo dal presupposto che è più semplice ascoltare qualcuno che parla piuttosto che concentrarsi nella lettura di un testo). Con il risultato che l’utente si lascierà somministrare il messaggio in modo completo e verrà stimolato ad un engagement più convinto (cioè all’azione: click sul video).

Al di là di queste considerazioni (non sono uno psicologo nè un sociologo), converrete con me che un messaggio video (o se volete una qualunque altra forma di animazione) attirano di più la nostra attenzione.

Inseriamo un video nelle nostre email: metodo fai-da-te

Il presupposto è che per realizzare questa innovativa campagna di email marketing si abbia a disposizione una piattaforma professionale che permetta di interagire con il codice HTML di cui si compone l’email stessa.

Attualmente questa possibilità ha i suoi limiti solo in fattori tecnologici: non tutti i client di posta sono, infatti, in grado di visualizzare un filmato al loro interno. A tal proposito vale la pena suddividerli in tre macro-categorie: client tradizionali di tipo desktop (come Outlook, Windows Live Mail, Apple Mail, ecc.), web-client (Gmail, Hotmail, ecc.) e client per dispositivi mobili (suddivisi in base alla piattaforma operativa: Androia, iPhone, BlackBerry, Symbian, ecc.).

Inserisco uno screenshot del player nella newsletter

Tutti hanno loro pecurialità e naturalmente limitazioni nella corretta visualizzazione delle email (contenuti, immagini e video).

Il modo più semplice per aggiungere un video all’interno di un’email è… “far finta” di inserirlo! Proprio così: basterà fare uno screenshot del “player” nel quale sta girando il nostro filmato (ce ne sono molti, dal Media Player incluso in Windows alle svariate versioni per il web), salvare un’immagine (jpg, gif o png) ed inserirla nella email o nella newsletter. Se il lavoro viene fatto per bene, avendo avuto cura di riprendere tutti gli elementi tipici di un player video come i bottoni “play” e “pausa”, la linea del tempo (load progress bar), il controllo del volume, l’effetto è garantito.

Alla vista di quello che “sembra” un video, l’utente sarà invogliato a cliccare sull’immagine che avrete opportunamente collegato ad una landing page contenente il video reale. Come vedete è un’operazione semplice e di sicuro successo (con il track dei link, potrete addirittura misurare l’interesse dei destinatari per quel video!) anche se resta poco più che un trucchetto che dovrete accompagnare con un efficace messaggio testuale (ad es. “Guarda il nostro video!“, “Clicca subito per vedere il nuovo filmato“).

Non entriamo, ovviamente, nei dettagli di come pubblicare un video online: potreste anche solo uploadarli su YouTube!

HTML5 video: l’alternativa non perfetta!

HTML5 video con Hotmail
HTML5 video: rendering con GMail

Una valida alternativa è quella che ci viene dal nuovo standard HTML5 il quale prevede un tag apposito per l’embedding di filmati nelle pagine web. Si tratta del tag <video> che, opportunamente assemblato (si può utilizzare il tool online indicato più sotto), permette il supporto di tre formati diversi: Ogg, Mpeg4 e WebM (qui trovate la compatibilità con i vari browser). Come vedete non sono previsti i più tradizionali avi e wmv, ma con un semplice “traduttore” si possono facilmente realizzare filmati nei tre formati supportati.

Anche in questo caso, però, ci sono vantaggi e svantaggi.

HTML5 video con Gmail
HTML5 video: rendering con GMail

Il tag <video>, infatti, consente di indicare ben tre sorgenti video in modo da poter utilizzare il formato corretto per il browser in uso. Non basta però: dobbiamo tener conto della non perfetta compatibilità con i vari client di posta. Ricordo che una cosa è visualizzare una pagina web in un normale browser e un’altra visualizzare un’email html in un client di posta!

Il nostro tag, però, aggira elegantemente l’ostacolo mettendo in pratica un trucchetto simile a quello visto qui sopra: attraverso il parametro poster si può indicare al browser o al client di posta che non supportano il tag <video>, di visualizzare, in alternativa, un’immagine (chiamata di fallback)!

Per aumentare la compatibilità conviene anche inserire l’immagine direttamente in un tag <img> all’interno di <video> come in questo esempio di codice:

<video controls=“controls” poster=“http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg” width=“640” height=“360”>

<source src=“http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4” type=“video/mp4” />

<source src=“http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm” type=“video/webm” />

<source src=“http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv” type=“video/ogg” />

<img alt=“Big Buck Bunny” src=“http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg” width=“640” height=“360” title=“No video playback capabilities, please download the video below” />
</video>

Vi consiglio di utilizzare un generatore automatico per costruire il tag <video> come quello disponibile a questa URL:
http://sandbox.thewikies.com/vfe-generator/

Inserite i link ai tre formati del vostro video (per iniziare, provate anche con uno solo) ed il link all’immagine di “fallback” (ovvero quella sostitutiva in caso di incompatibilità): in basso, automaticamente, visualizzerete il codice corrispondente. Personalizzatelo se necessario e includetelo nella vostra email. Notate la presenza del tag <img> subito dopo la sequenza di <source>.

A questo punto attenzione ai limiti imposti dal client di posta utilizzato dal destinatario. Come ho già detto non tutti visualizzano correttamente il tag <video>.
Ecco una tabella di compatibilità basata su dati raccolti da Campaign Monitor e testati con la piattaforma di email marketing Mailforce:

Email client desktop Result
Apple Mail Si Riproduzione integrale del video
Lotus Notes 6, 7 e 8.5 No Visualizza l’immagine di fallback
Outlook 2003, 2007, 2010 No Visualizza l’immagine di fallback
Outlook 2011 per Mac Si Riproduzione integrale del video
Windows Live Mail 2011 No Visualizza l’immagine di fallback
Email client via web Result
AOL Web No Visualizza l’immagine di fallback
Gmail No Visualizza l’immagine di fallback
Hotmail Non completamente Tasto-destro>Riproduci per riprodurre il video
Yahoo! Mail Beta No Visualizza l’immagine di fallback
Email client per dispositivi mobili Result
Android (default) Non completamente Visualizzati (ma non funzionanti) i controlli del player (*)
Android (Gmail) No Visualizza l’immagine di fallback
Blackberry No Visualizza l’immagine di fallback
iPhone Si Riproduzione integrale del video
Windows Mobile 7 No Visualizza l’immagine di fallback
Symbian S60 5th No Visualizza l’immagine di fallback (nell’attachment)

(*) Ho fatto un test e confermo lo strano funzionamento rilevato anche da Campaign Monitor.

Come vedete la piena compatibilità del tag <video> è attualmente garantita solo su Apple Mail, Outlook 2011 per Mac e iPhone. Tra i web-client solo Hotmail visualizza correttamente video HTML5, anche se con un limite: tutti i browser (li ho testati tutti) avviano la riproduzione del video o facendo un “doppio click” sul video stesso oppure scegliendo “Riproduci” dal menu che si apre con il tasto destro sul video). Niente da fare per tutti gli altri client di posta che visualizzano, invece, l’immagine di “fallback”.

Inutile parlare del tag <object> tutt’oggi utilizzato per includere oggetti in una normale pagina html ma che risulta del tutto invisibile ai client di posta.

Per il momento mi fermo qui. Ma sull’argomento “video nelle email” scriverò ancora. In particolare voglio farvi vedere come sfruttare la sinergia tra Gmail e YouTube a nostro vantaggio.