Suggerimenti per la progettazione delle e-mail ed errori comuni a cui prestare attenzione

Pubblicato: 2019-08-14

È risaputo che le persone tendono a prestare attenzione prima agli elementi visivi, il che spesso fa preferire la forma al contenuto. L'email marketing non fa eccezione. È la struttura di un'e-mail, le illustrazioni, la formattazione del testo, la tavolozza dei colori e l'ottimizzazione per dispositivi mobili che di solito determinano se gli utenti finiranno di leggere l'e-mail e completeranno l'azione desiderata.

Il design delle email influenza non solo la percezione del lettore, ma anche la reputazione del mittente. I provider di cassette postali spesso contrassegnano le e-mail con errori di layout e di progettazione come spam, motivo per cui dovresti preoccuparti del design del modello di e-mail.

In questo articolo, ti forniremo alcuni suggerimenti per la progettazione delle e-mail su come rendere le tue e-mail visivamente accattivanti e complessivamente efficaci. Parleremo anche degli errori di progettazione più comuni e mostreremo esempi di e-mail ben progettate di diversi marchi.

Contenuti
  1. Suggerimenti per la progettazione di modelli di posta elettronica
  2. Suggerimenti per la progettazione di email reattive
  3. Suggerimenti su come utilizzare il testo nel design del modello di posta elettronica
  4. Suggerimenti sull'uso del colore nel design del modello di posta elettronica
  5. Suggerimenti per la progettazione dell'intestazione delle e-mail
  6. Suggerimenti per la progettazione del piè di pagina delle e-mail
  7. Suggerimenti su come utilizzare le immagini nel design delle e-mail
  8. Suggerimenti per la progettazione di un invito all'azione
  9. Una lista di controllo di suggerimenti per la progettazione di e-mail

Suggerimenti per la progettazione di modelli di posta elettronica

Un modello è alla base di ogni email. Definisce il layout e l'aspetto visivo delle tue future email, influenzando i risultati complessivi delle tue campagne.

Nel design del modello di posta elettronica, dovresti seguire le stesse linee guida visive che utilizzeresti per il sito Web di un'azienda, i social media e altre piattaforme. Esaminiamo alcuni errori comuni di progettazione della posta elettronica e suggerimenti sulla progettazione della posta elettronica che è meglio prendere in considerazione durante la creazione del modello.

Errori da evitare

1. Non modificare troppo spesso il design del modello di posta elettronica. Se gli utenti ricevono ogni volta un'e-mail diversa, diventerà più difficile per loro ricordarti e riconoscerti.

2. Non utilizzare immagini al posto del testo, perché

  • le immagini potrebbero non essere visualizzate;
  • dovrai cambiare il template manualmente ogni volta che vorrai cambiare il testo;
  • eventuali codici promozionali inseriti nell'immagine saranno impossibili da copiare e incollare se necessario;
  • i fornitori di cassette postali possono contrassegnare le e-mail che consistono solo di immagini come spam.

3. Non utilizzare il colore aziendale come colore principale della tua email se è troppo audace e brillante.

4. Non utilizzare uno sfondo luminoso o complesso per il testo.

5. Non esitare a fare affidamento sull'aiuto di un email designer professionista se hai questa opportunità. Un'e-mail progettata in modo errato può rovinare la reputazione di un'azienda o semplicemente essere contrassegnata come spam da un provider di cassette postali. Nel frattempo, un designer professionista sarà in grado di creare un modello di email di lunga durata che manterrà i tuoi iscritti interessati e coinvolti.

Le migliori pratiche da seguire

1. Progetta sempre modelli di email in base alle linee guida visive della tua azienda. Adottare un approccio olistico al tuo aspetto digitale aumenterà il riconoscimento del marchio e aumenterà la fedeltà dei clienti.

2. Se decidi di tenere dei test A/B, prova elementi separati invece di un'intera email. In questo modo saprai con certezza quali dettagli sono più o meno efficaci, lo stile della tua azienda rimanendo riconoscibile per il pubblico.

3. Crea modelli separati per diversi tipi di e-mail e progettali in uno stile aziendale simile. Ciò aiuterà i tuoi iscritti non solo a distinguere le tue email da quelle di qualsiasi altro marchio, ma anche a differenziarle l'una dall'altra in base al loro tipo.

4. Inserisci le informazioni più importanti e l'invito all'azione al primo scorrimento e assicurati che l'intera e-mail appaia bilanciata. Se i titoli e le descrizioni sono progettati in modo ordinato, i pulsanti di invito all'azione sono accattivanti e le immagini sono di alta qualità, i destinatari saranno guidati senza problemi durante l'intera e-mail direttamente all'invito all'azione.

5. Prova a fare in modo che le tue e-mail siano larghe 600 px in modo che vengano visualizzate correttamente in qualsiasi client di posta elettronica.

6. Blocchi di testo e immagini alternativi. È importante non solo per la leggibilità, ma anche per una migliore consegna delle tue e-mail, soprattutto se hai iniziato a inviare e-mail non molto tempo fa. In generale, ti consigliamo di seguire il rapporto testo/immagine 80:20 o 60:40.

7. Ricorda che per uno sfondo luminoso, è sempre meglio usare un segnaposto opaco a contrasto.

8. A meno che tu non possa fare affidamento sull'aiuto di un designer, puoi progettare modelli di email da solo utilizzando editor di email drag and drop.

Ora diamo un'occhiata ad alcuni esempi che dimostrano queste migliori pratiche in azione.

Abbiamo preso i primi due esempi da Behance. Entrambi i modelli, uno per le e-mail di benvenuto e l'altro per le e-mail settimanali "Nuova ispirazione", seguono principi di progettazione simili, ma con un aspetto leggermente diverso. L'e-mail di benvenuto ha un titolo ampio e chiaro, immagini di alta qualità, un layout a griglia spezzato e un carattere ben leggibile. I blocchi di testo e immagine sono alternati, il che rende l'e-mail più facile da leggere.

email template design
Behance design del modello di email di benvenuto

Per quanto riguarda un'e-mail settimanale, è complessivamente più breve e pone più enfasi sulle immagini, con un pulsante CTA in grassetto nella parte superiore.

weekly email template design
Un'e-mail settimanale da Behance

Ecco un altro esempio di un buon modello di email da Downshiftology. L'azienda può vantarsi di inviare e-mail minimaliste con una griglia ben strutturata. Di solito iniziano con un'intestazione e un'introduzione seguita da alcune foto di cibo di alta qualità e dai collegamenti ipertestuali alle ricette. Un allineamento giustificato e colori chiari rendono l'e-mail piacevole da guardare e facile da leggere.

email template design
Un'e-mail ben progettata da Downshiftology

Suggerimenti per la progettazione di email reattive

Mentre pensi al layout e al modello per la tua email, tieni sempre a mente come appariranno su diversi dispositivi, inclusi i dispositivi mobili. Ecco alcuni errori da evitare e suggerimenti da seguire per la progettazione di email reattive.

Errori da evitare

1. Evita di utilizzare più collegamenti ipertestuali insieme in quanto potrebbe risultare ingombrante. Un destinatario potrebbe toccare accidentalmente il collegamento sbagliato situato troppo vicino a quello su cui voleva fare clic.

2. Non rendere i pulsanti CTA troppo piccoli. Ingrandire per fare clic su un pulsante può rendere i destinatari davvero frustrati.

3. Non utilizzare caratteri inferiori a 14 px per il corpo dell'e-mail e 20 px per i titoli dell'e-mail in quanto ciò renderà difficile la lettura dell'e-mail su schermi piccoli.

Le migliori pratiche da seguire

1. Segui le regole delle email responsive. Ad esempio, se il tuo modello di email è composto da più colonne e desideri che si adattino agli schermi dei dispositivi mobili, inserisci un codice speciale e crea la tua email all'interno di una tabella.

2. Usa modelli di email adattabili già pronti da SendPulse o creane di tuoi nel nostro builder drag and drop se non vuoi pasticciare con il codice. Sono già adattati sia per desktop che per dispositivi mobili; inoltre, puoi sempre visualizzare in anteprima il tuo modello di email per entrambi i dispositivi.

Dai un'occhiata alla seguente email di Uniqlo, che è ben visualizzata sia su desktop che su dispositivi mobili. Ecco cosa vede un utente desktop:

responsive email template
Una versione desktop di un'e-mail di Uniqlo

Il layout della sua versione mobile è leggermente diverso:

responsive email design
Una versione mobile di un'e-mail di Uniqlo

Suggerimenti su come utilizzare il testo nel design del modello di posta elettronica

Anche la copia più accattivante non attirerà l'attenzione se sembra poco attraente o è difficile da leggere. Al contrario, gli utenti difficilmente trascureranno un'e-mail con un layout ordinato, paragrafi brevi, titoli accattivanti e punti salienti delle informazioni più importanti.

Errori da evitare

1. Non mischiare troppi caratteri, stili, colori e dimensioni dei caratteri in un'unica e-mail in quanto possono farlo sembrare sciatto.

2. Evita di usare caratteri troppo piccoli o sbiaditi ― in entrambi i casi, la tua email potrebbe diventare difficilmente leggibile.

3. Non creare un'e-mail di testo senza paragrafi, titoli e punti chiave evidenziati. Molto probabilmente annoierà i tuoi lettori, anche se il tuo testo è davvero interessante.

Le migliori pratiche da seguire

1. Scegli uno o due caratteri principali per i titoli e il testo principale, non di più.

2. Usa i caratteri di base che verranno resi correttamente dalla maggior parte dei client di posta elettronica come Gmail, Yahoo, Outlook e altri. Se un servizio non è in grado di riconoscere il tuo carattere tipografico, lo sostituirà con un altro tipo di carattere, il che potrebbe influire negativamente sul design complessivo del modello di posta elettronica. I caratteri più sicuri sono considerati Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier e Impact.

3. Sentiti libero di usare i tuoi caratteri aziendali su banner e immagini. Tuttavia, assicurati che il carattere sul banner e nell'e-mail vadano bene insieme.

4. Dividi il testo in sezioni utilizzando titoli e brevi paragrafi. Un testo ben strutturato è sempre più facile da leggere.

5. Rendi il tuo carattere non più piccolo di 14px.

Uno degli esempi di un buon layout di testo è un'e-mail di DesignLab. Ha un titolo centrato in grassetto ed è composto da tre brevi paragrafi seguiti dal CTA prominente, evidenziato in arancione.

email template design example
Un'e-mail da DesignLab

Suggerimenti sull'uso del colore nel design del modello di posta elettronica

Il colore è uno strumento potente che può creare l'atmosfera di un'e-mail e rafforzare il tuo messaggio. Tuttavia, scegliendo i colori sbagliati, rischi di rendere la tua email troppo noiosa, distraente o caotica.

Errori da evitare

1. Non sopraffare i tuoi lettori con un mucchio di colori. Troppo rosso, giallo come sfondo per il testo o una combinazione di colori che non corrispondono tra loro possono rovinare l'impressione che stai cercando di dare, poiché molto probabilmente distraggono gli utenti dall'idea principale.

2. Astenersi da troppi gradienti. Se usati in modo non professionale, possono rendere la tua e-mail sciatta o ridurre la visibilità del testo.

Le migliori pratiche da seguire

1. Usa colori audaci e luminosi solo per enfatizzare elementi o parole separati, mentre scegli colori più rilassanti per il tuo sfondo.

2. Considera le preferenze del tuo pubblico mentre scegli un tema di colore. Ad esempio, Kissmetrics ha riferito che gli uomini preferiscono colori contrastanti, mentre le donne scelgono tavolozze di colori più tenui. Per sapere quali colori piacciono di più ai tuoi utenti, tieni i test A/B e prova a cambiare il colore di uno o più elementi alla volta per misurare i risultati con precisione.

3. Usa strumenti come Adobe Color per scegliere una tavolozza di colori perfetta che sembrerà visivamente equilibrata.

B&Q, ad esempio, usa il colore arancione aziendale come evidenziatore e si attiene a toni più neutri per il resto degli elementi.

color in email template design
L'uso dei colori in un'e-mail di B&Q

Suggerimenti per la progettazione dell'intestazione delle e-mail

L'intestazione è il primo blocco di un'e-mail posizionato nella parte superiore di essa. Di solito contiene un logo, collegamenti a sezioni del sito Web, dettagli di contatto e altre informazioni generali. L'intestazione dell'e-mail, insieme al nome del mittente, aiuta gli utenti a identificare un mittente.

Errori da evitare

1. Non cercare di inserire troppe informazioni nell'intestazione. Sì, puoi fornire collegamenti al tuo sito Web, ad esempio, ma se inserisci anche i collegamenti ai social media, le informazioni di contatto dettagliate e altri blocchi all'interno dell'intestazione, quest'ultimo diventerà troppo grande e molto probabilmente confuso.

2. Non utilizzare immagini di cattiva qualità nell'intestazione e in qualsiasi altro punto della tua e-mail in quanto ciò darebbe l'impressione di un design amatoriale.

Le migliori pratiche da seguire

1. Enfatizza le informazioni principali della tua intestazione e lascia che gli altri elementi siano un po' più piccoli o meno luminosi.

2. Usa intestazioni a tema speciali durante le vacanze, i saldi e altri eventi speciali per creare l'atmosfera. Puoi anche variare le intestazioni per diversi tipi di e-mail come riassunti o e-mail transazionali.

Dai un'occhiata all'intestazione minimalista nell'e-mail di TheRealReal:

email header design
Un'intestazione di un'e-mail da TheRealReal

Suggerimenti per la progettazione del piè di pagina delle e-mail

L'ultimo ma non meno importante blocco di un'e-mail è il piè di pagina. Di solito contiene una firma e-mail, un collegamento per annullare l'iscrizione, dettagli di contatto dell'azienda e collegamenti ai social media. Anche se questo blocco sembra essere il più facile da progettare, ci sono ancora alcuni errori che le aziende commettono frequentemente.

Errori da evitare

1. Non sovraccaricare il tuo piè di pagina con troppe informazioni generali, in modo che non appaia disordinato e confuso.

2. Non nascondere mai il link di cancellazione, rendilo troppo piccolo o poco visibile. Se un utente trova difficile annullare l'iscrizione, molto probabilmente farà clic su "Spam", che è sempre una cattiva notizia per la reputazione del tuo mittente.

Le migliori pratiche da seguire

1. Includi solo quei link al tuo piè di pagina che sarebbero veramente importanti per i tuoi utenti; prova a raggruppare blocchi di contenuto simili per migliorare la leggibilità.

2. Sii onesto con il tuo pubblico e rendi ben visibile il tuo link di cancellazione.

3. Aggiungi una firma e-mail creativa al piè di pagina per completare l'e-mail con una nota amichevole e lasciare che il destinatario non veda l'ora di sentirti la prossima volta.

Il piè di pagina dell'e-mail di LinkedIn, che puoi vedere di seguito, segue perfettamente i suggerimenti sopra menzionati. Contiene una firma e-mail, un chiaro pulsante di annullamento dell'iscrizione e i dettagli di contatto dell'azienda, senza che vengano fornite informazioni non necessarie.

email footer design
Un piè di pagina di un'e-mail da LinkedIn

Suggerimenti su come utilizzare le immagini nel design delle e-mail

Le immagini giocano un ruolo significativo nel design di un'e-mail: una scelta intelligente delle immagini può mettere i tuoi abbonati su una base migliore e garantire il loro coinvolgimento con l'e-mail fino alla fine.

Errori da evitare

1. Non creare email costituite solo da immagini poiché il 43% degli utenti disattiva le immagini nei propri client di posta elettronica; tuttavia, tieni presente che il contenuto della tua email dovrebbe rimanere chiaro anche se le immagini non sono visibili.

2. Non rendere le immagini più grandi di quelle consigliate. Ad esempio, se si consiglia di utilizzare immagini larghe 300 px, non utilizzare quelle larghe 1200 px.

Le migliori pratiche da seguire

1. Ottimizza le immagini prima di aggiungerle alla tua email. Un'e-mail con immagini pesanti impiegherà più tempo a caricarsi, soprattutto sui telefoni cellulari. Molto probabilmente, un utente non aspetterà il caricamento delle immagini e chiuderà semplicemente l'e-mail. Per ottimizzare le immagini, usa strumenti come Squoosh o TinyPNG.

2. Aggiungi testo alternativo alle tue immagini per consentire agli utenti di capire di cosa trattano le immagini nel caso in cui non vengano caricate automaticamente.

3. Rendi le dimensioni delle tue icone 2 volte più grandi, in modo che abbiano un bell'aspetto su dispositivi iPhone e Macbook con schermo Retina. Ad esempio, se devi utilizzare un'icona 70×20, carica una versione 140×40 sul server e quindi ridimensiona l'icona nella tua email utilizzando il seguente attributo: width="70" .

Nota! Quando usi questo metodo, cambi solo la dimensione di un'immagine e non il suo peso. Ecco perché dovresti prima ottimizzare le tue immagini e poi caricarle sul server.

4. Rendi le immagini cliccabili. Se dai un'occhiata a una mappa dei clic delle tue e-mail, vedrai molto spesso che le persone fanno clic sulle immagini. Usa questo vantaggio per indirizzare le persone al tuo sito web o ai social media.

5. Usa immagini di alta qualità scattate da te o trovate su siti web di foto stock.

Passando agli esempi, potresti vedere che TheSill ricorda di aggiungere un testo alternativo chiarendo quali tipi di fiori sono raffigurati sulle immagini.

images in email design
Testo alternativo in un'e-mail da TheSill

Nel frattempo, il New York Times Magazine utilizza immagini di alta qualità e illustrazioni uniche per ravvivare le loro e-mail piene di testo.

images in email template design
Immagini nell'e-mail del New York Times Magazine

Suggerimenti per la progettazione di un invito all'azione

Un invito all'azione in un'e-mail è un collegamento o un pulsante creato per ottenere una sorta di risposta da un utente: registrazione, acquisto o contatto con un manager. Un chiaro invito all'azione e il suo corretto posizionamento ti aiuteranno ad aumentare il tuo CTR, mentre gli errori in un CTA possono complicare la capacità del tuo abbonato di compiere un'azione desiderata, rendendo la tua email semplicemente inutile.

Errori da evitare

1. Non nascondere un singolo pulsante di invito all'azione alla fine della tua e-mail o anche dietro la prima pergamena.

2. Non far indovinare agli utenti cosa devono fare: fornisci loro invece una chiamata chiara.

3. Non nascondere i tuoi collegamenti ipertestuali se li usi al posto dei pulsanti CTA. Non dovrebbero perdersi contro altri elementi dell'e-mail. Inoltre non dovrebbero essere troppo piccoli o desaturati.

Le migliori pratiche da seguire

1. Posiziona il tuo CTA principale alla prima pergamena. Se la tua email è lunga, puoi ripetere l'invito all'azione un paio di volte.

2. Assicurati che il tuo oggetto e il tuo CTA siano dedicati allo stesso argomento.

3. Rendi il tuo pulsante CTA luminoso e visibile. Dovrebbe essere in contrasto con lo sfondo, il testo e altri elementi di un'e-mail.

In una delle loro e-mail, LinkedIn, ad esempio, non solo ha ripetuto il loro CTA due volte, ma lo ha anche reso audace e contrastante.

email cta design
Invito all'azione brillante nell'e-mail di LinkedIn

In un altro esempio di Neil Patel, potresti vedere che la riga dell'oggetto dell'e-mail è correlata al testo CTA:

email cta example
Un'e-mail di Neil Patel con oggetto e CTA correlati

Una lista di controllo di suggerimenti per la progettazione di e-mail

Per aiutarti a controllare facilmente le tue e-mail prima di inviarle, abbiamo raccolto tutte le linee guida da ricordare e le abbiamo raggruppate per categorie.

email design tips checklist

Crediamo che, con tutti questi suggerimenti a portata di mano, sarai in grado di creare e-mail reattive e ben progettate, e non senza SendPulse. Il servizio ti aiuterà anche a testare A/B diversi elementi della tua email e a scegliere le migliori opzioni per la tua campagna.