Riga dell'oggetto: come affrontare la progettazione dell'e-mail

Una percentuale significativa di consumatori, il 99% , controlla la propria posta elettronica ogni giorno. Alcuni gruppi demografici, inclusi i millennial, preferiscono le comunicazioni e-mail delle aziende rispetto ad altre forme di comunicazione, come telefonate o SMS. E con oltre 5 miliardi di account e-mail attivi in ​​tutto il mondo, l'e-mail è una parte essenziale di qualsiasi strategia di prodotto digitale.

Sebbene siano disponibili migliaia di modelli di modelli di email per i professionisti del marketing, la progettazione di email è un'importante area di competenza per i web designer. Ciò è particolarmente vero per coloro che vogliono lavorare con marchi più grandi, aziende creative e altri che evitano i modelli.

Ci sono diverse cose che i designer dovrebbero tenere a mente quando progettano le e-mail, dai limiti della maggior parte delle piattaforme di posta elettronica (con supporto limitato per cose come i caratteri Web di uno dei più grandi, Gmail), così come ciò che i consumatori si aspettano quando aprono un'e-mail da un società con cui potrebbero già fare affari.

L'importanza del design dell'e-mail mobile

Con almeno la metà di tutte le e-mail ora aperte e lette su dispositivi mobili, è irresponsabile per i designer ignorare i progetti di e-mail ottimizzati per i dispositivi mobili. Soprattutto considerando che i tassi di conversione delle e-mail mobili tendono ad essere significativamente più elevati rispetto ai tassi desktop.

Questo design di posta elettronica mobile di PiperJaffray mantiene le cose semplici ed eleganti. È facile da leggere su un dispositivo mobile, con collegamenti puliti e un marchio sottile. Mette al primo posto le esigenze dell'utente, migliorando l'esperienza utente complessiva e la percezione dell'azienda.

Dribbble mantiene le sue e-mail "Scatti popolari" al punto, concentrandosi interamente sul contenuto. Questo focus rende l'e-mail facile da navigare sui dispositivi mobili. Sebbene un layout semplice incentrato sul contenuto sia una buona idea per molti tipi di e-mail, è particolarmente adatto alle e-mail mobili in cui semplifica sia la fruizione del contenuto che l'interazione con esso.

Concentrandosi sui contenuti

Come best practice, che si tratti di progettare e-mail o altri prodotti digitali, i designer dovrebbero sempre concentrarsi sui contenuti. Alcuni progetti di posta elettronica portano questa best practice all'estremo con un design minimalista in cui il contenuto è il design.

Quando lavorano sulla maggior parte dei progetti di posta elettronica, i designer traggono vantaggio dalla creazione del contenuto prima di immergersi nel design. Tuttavia, in particolare nei design minimalisti, è ancora più importante sapere quale sarà il contenuto in primo piano.

Marvel pone l'accento sul loro contenuto con un design minimalista. Lo sfondo bianco e le immagini che supportano solo il testo sulla pagina fanno risaltare il contenuto.

Tutte le e-mail di Unsplash si concentrano esattamente sulle immagini che stanno promuovendo. Il pulsante "Visualizza raccolta" e la dissolvenza nella parte inferiore delle immagini possono aumentare i clic sul sito, poiché lascia le persone desiderose di vedere di più.

Rafforzare il marchio

Quando un visitatore arriva su un sito web, è (idealmente) un'esperienza di branding coinvolgente. Tutto è sotto il controllo del designer del sito web. Ma il design dell'e-mail è diverso. L'utente visualizza le e-mail all'interno di un'altra app e non tutte le app di posta elettronica visualizzano tutte le e-mail allo stesso modo.

Per questo motivo, il branding nei progetti di posta elettronica è fondamentale per creare la giusta esperienza per l'utente che legge l'e-mail. Tuttavia, il branding spesso deve essere mantenuto semplice per essere visualizzato in modo efficace su vari dispositivi e client di posta elettronica alla più alta percentuale di utenti.

Un semplice logo nella parte superiore dell'e-mail, utilizzando le stesse immagini di intestazione su più immagini e mantenendo il maggior numero di elementi coerenti dagli altri prodotti digitali del marchio, contribuisce notevolmente a supportare e rafforzare la percezione del marchio nei confronti dei consumatori.

Il marchio di Everlane è intrinsecamente semplice nelle loro e-mail e nel sito Web. Il loro logo visualizzato in primo piano nella parte superiore di questa e-mail rafforza quel marchio.

Il progetto Middle Finger utilizza un'immagine di intestazione coerente in tutte le loro e-mail, insieme al colore viola brillante dell'accento. Ciò rende le loro e-mail immediatamente riconoscibili a chiunque si iscriva e il marchio continua sul sito web.

Attirare l'attenzione con il colore

Il colore ha un forte impatto sulla mente umana, con la capacità di influenzare le emozioni, le percezioni e persino il comportamento. L'uso efficace del colore nelle e-mail può aumentare i tassi di clic e di conversione. In alcuni test, la differenza nel colore dei pulsanti può fare una differenza di oltre il 20% nei tassi di conversione.

Ma non sono solo gli inviti all'azione a trarre vantaggio dall'uso del colore. La creazione di un'e-mail colorata può essere un allontanamento da ciò che ci si aspetta e creare un aspetto completamente diverso dalle altre e-mail nella posta in arrivo di una persona.

Attirare l'attenzione su uno striscione di vendita con un rosso brillante ricorda i segni di vendita della vita reale, che spesso sono anch'essi dello stesso colore. L'occhio del lettore è immediatamente attratto dal rosso.

Article, un sito di e-commerce di mobili scandinavo, utilizza una combinazione di colori tenui rosso e verde, con il rosso che porta l'attenzione sulla parte più importante: il pulsante di invito all'azione per la vendita.

Mentre alcuni design di e-mail utilizzano il colore per attirare l'attenzione su una parte particolare del contenuto, questa e-mail dallo zoo di Houston utilizza colori vivaci per creare un design divertente ed energico. La combinazione di colori arancione brillante e rosa acceso attira immediatamente l'attenzione e attira il lettore.

Utilizzo di immagini straordinarie

Gli esseri umani sono creature visive e immagini straordinarie possono elevare un'e-mail e attirare l'attenzione del lettore. Le immagini possono anche rafforzare il messaggio dell'e-mail e il marchio dell'azienda.

I programmi TV sembrano avere un vantaggio nella categoria "immagini straordinarie", con questa e-mail di Netflix che utilizza un'immagine vibrante ma misteriosa di Stranger Things . Combinare l'immagine accattivante con l'invito all'azione "Play" immediatamente sotto ha senso dal punto di vista dell'esperienza utente, in quanto rende semplice per i lettori guardare immediatamente lo spettacolo promosso.

Le immagini straordinarie non si limitano solo alle foto. Un fumetto o un'illustrazione come quelli che WePresent utilizza nelle loro e-mail è accattivante quanto una foto e può aiutare ad attirare i lettori nel contenuto.

Questa email di Deadliest Catch , che promuove la serie di documentari di Discovery Channel, mostra una straordinaria immagine di intestazione che si fonde con il contenuto sottostante. Questa è una tecnica utile che incoraggia lo spettatore a continuare a leggere.

Sperimentazione con layout non convenzionali

Molti progetti di posta elettronica hanno un formato piuttosto standard: intestazione in alto, contenuto a colonna singola, con inviti all'azione in alto e in basso. Ma non c'è una regola che dice che i designer devono seguire quel modello particolare.

I layout non convenzionali sono un ottimo modo per attirare l'attenzione del lettore e fargli desiderare di leggere il contenuto. Ci sono una varietà di modi per creare disegni insoliti. Un metodo popolare consiste nell'utilizzare le immagini per creare layout di posta elettronica che non sarebbero necessariamente compatibili con molte piattaforme di posta elettronica.

I layout non convenzionali non devono necessariamente essere fuori dal muro. Questo, di Mailchimp, utilizza un design a due colonne con una colonna occupata da blocchi di colore. Ciò che lo rende memorabile è che è visivamente accattivante e inaspettato.

L'uso delle immagini consente layout di posta elettronica più inaspettati come questo per KLM. I progettisti devono solo tenere a mente che alcuni client di posta elettronica bloccheranno comunque il caricamento automatico delle immagini, rendendo necessario disporre di un testo di riserva che trasmetta ancora l'essenza del messaggio.

Lavorare con i caratteri

I client di posta elettronica più popolari supportano i caratteri Web, ma sfortunatamente non tutti lo fanno: Gmail è l'eccezione più notevole (sebbene Gmail supporti Roboto e Google Sans come parte dell'interfaccia di Gmail). Tuttavia, i progettisti possono ancora utilizzare i caratteri Web purché tengano presente che un gran numero di client di posta elettronica utilizzerà i caratteri di riserva.

L'alternativa all'utilizzo dei caratteri Web, ovviamente, è utilizzare immagini che includono i caratteri. Questo è ciò che molti designer di posta elettronica scelgono di fare, specialmente nelle intestazioni in cui i caratteri di fallback sembrerebbero probabilmente fuori posto.

Questa newsletter FabFitFun utilizza un divertente font script per attirare l'attenzione sul contenuto, abbinandolo a un carattere tipografico sans serif altamente leggibile. Sperimentare le combinazioni di caratteri nei design delle e-mail è un'ottima idea e può anche essere utilizzata come prova prima di modificare i caratteri tipografici su un sito Web o utilizzarli in altri materiali di marca.

Sickbubble utilizza una varietà di caratteri nel design delle e-mail, il che può essere complicato. Ma in questo caso, poiché mettono a parte ogni sezione, funziona. Il carattere visualizzato nell'intestazione ha un aspetto molto spigoloso, mentre il testo del corpo principale è un sans serif di facile lettura. I caratteri scritti a mano nella sezione promozionale del prodotto funzionano poiché sono sfalsati rispetto al corpo dell'e-mail.

Divertirsi con le animazioni

Le animazioni aggiungono ulteriore interesse visivo alle e-mail e attirano immediatamente l'attenzione del lettore. Le GIF animate sono una scelta popolare per aggiungere movimento alle e-mail e sono supportate dalla maggior parte dei client di posta elettronica.

I progettisti dovrebbero assicurarsi di tenere a mente le dimensioni dei file quando incorporano qualsiasi animazione, poiché così tante persone leggono le e-mail sui dispositivi mobili. Dovrebbero anche garantire che le animazioni supportino il contenuto e non siano solo riempitivi.

L'uso di GIF animate per portare a casa un punto o illustrare meglio il contenuto presentato in modo divertente è un'aggiunta fantastica al design di un'e-mail, come in questo esempio di e-mail di Product Hunt.

The Hustle utilizza una GIF animata nelle loro e-mail sia per illustrare il punto del messaggio che per aggiungere interesse visivo a un design di e-mail altrimenti minimalista.

Inviti all'azione

L'invito all'azione è probabilmente la parte più importante di quasi tutte le email inviate da un'azienda. La maggior parte delle e-mail viene inviata per richiedere un'azione, indipendentemente dal fatto che l'azione stia leggendo un articolo, acquistando un prodotto o eseguendo qualche altro comportamento.

I progettisti sono ben serviti per prestare molta attenzione alla progettazione dei loro inviti all'azione, nonché per eseguire test A/B su di essi per garantire che siano ottimizzati per le prestazioni.

L'uso di un colore brillante per l'invito all'azione, come ha fatto Litmus qui, lo distingue dal resto del contenuto. I designer dovrebbero prendere in considerazione la possibilità di sperimentare colori diversi per vedere quali funzionano meglio per il loro pubblico impiegando test A/B durante l'invio di campagne e-mail.

L'utilizzo di un colore completamente diverso dal resto del contenuto di un'e-mail per l'invito all'azione lo fa risaltare. Poiché il verde lime nell'e-mail di Campaign Monitor è un colore complementare diviso al viola che costituisce lo sfondo, risalta senza contrasti.

Presta attenzione alle migliori pratiche di progettazione tramite e-mail

Sebbene ci sia molto spazio per la creatività e la sperimentazione nella progettazione delle e-mail, i designer devono anche tenere a mente le migliori pratiche e i limiti del mezzo.

Uno dei passaggi più importanti nella progettazione delle e-mail è testare le e-mail in una varietà di piattaforme e-mail prima di inviarle. Sebbene sia probabile che ci siano piccole variazioni tra di loro e ci sono sempre persone che utilizzeranno piattaforme meno comuni che rendono i progetti in modo diverso, è intelligente assicurarsi che le e-mail vengano visualizzate in modo accettabile per la maggior parte degli utenti.

Esistono diversi servizi di test di posta elettronica che i progettisti possono utilizzare per vedere come appariranno le loro e-mail su una varietà di piattaforme di posta elettronica. Litmus è una delle più popolari, ma vale la pena provare anche altre opzioni come Mailgun, Email on Acid, Mailtrap e Preview My Email per vedere quale soddisfa meglio le esigenze di ciascun progetto.

Oltre a ciò, tenere presente le dimensioni delle immagini e l'utilizzo della larghezza di banda è essenziale a causa del numero di e-mail aperte sui dispositivi mobili. I design reattivi sono praticamente una necessità per lo stesso motivo.

I migliori progetti di posta elettronica saranno facili da leggere per le persone su qualsiasi dispositivo e, soprattutto, chiederanno loro di fare clic sull'invito all'azione nell'e-mail (o di eseguire in altro modo qualsiasi azione richiesta). Seguendo queste best practice per la progettazione di e-mail, i web designer hanno un vantaggio nella creazione di e-mail che lo facciano in modo efficace.

• • •

Ulteriori letture sul blog di Toptal Design:

• L'esperienza è tutto: la guida all'esperienza utente definitiva
• Valgono tutte le tendenze? I 5 errori UX più comuni che i designer fanno
• UI vs. UX: esplora le differenze principali [Infografica]
• Principi e best practice per la progettazione dell'UX mobile
• La guida fondamentale all'usabilità mobile