Subject Line – Cum să abordați designul e-mailului

Un procent semnificativ de consumatori – 99% – își verifică e-mailul în fiecare zi. Unele categorii demografice, inclusiv milenialii, preferă comunicările prin e-mail de la companii față de alte forme de comunicare, cum ar fi apelurile telefonice sau mesajele text. Și cu peste 5 miliarde de conturi de e-mail active în întreaga lume, e-mailul este o parte esențială a oricărei strategii de produs digital.

Deși există mii de modele de șabloane de e-mail disponibile pentru marketeri, designul de e-mail este un domeniu important de expertiză pentru designerii web. Acest lucru este valabil mai ales pentru cei care doresc să lucreze cu mărci mai mari, companii creative și alții care se feresc de șabloane.

Există câteva lucruri pe care designerii ar trebui să le țină cont atunci când proiectează e-mailuri, de la limitările majorității platformelor de e-mail (cu suport limitat pentru lucruri precum fonturile web de la unul dintre cele mai mari — Gmail), precum și de ceea ce se așteaptă consumatorii când deschid un e-mail de la o companie cu care ar putea deja afaceri.

Importanța designului de e-mail mobil

Având în vedere că cel puțin jumătate din toate e-mailurile sunt acum deschise și citite pe dispozitive mobile, este iresponsabil pentru designeri să ignore design-urile de e-mail prietenoase cu dispozitivele mobile. Mai ales având în vedere că ratele de conversie a e-mailurilor mobile tind să fie semnificativ mai mari decât ratele desktop.

Acest design de e-mail mobil de la PiperJaffray menține lucrurile simple și elegante. Este ușor de citit pe un dispozitiv mobil, cu linkuri curate și branding subtil. El pune nevoile utilizatorului pe primul loc, îmbunătățind experiența generală a utilizatorului și percepția companiei.

Dribbble își menține e-mailul „Imagini populare” la obiect, concentrându-se în întregime pe conținut. Această atenție facilitează navigarea prin e-mail pe dispozitivele mobile. În timp ce un aspect simplu care se concentrează pe conținut este o idee bună pentru multe tipuri de e-mailuri, este deosebit de potrivit pentru e-mailurile mobile, unde facilitează atât consumul conținutului, cât și interacțiunea cu acesta.

Concentrarea pe Conținut

Ca cea mai bună practică, indiferent dacă proiectează e-mailuri sau alte produse digitale, designerii ar trebui să se concentreze întotdeauna pe conținut. Unele modele de e-mail duc această bună practică la extrem, cu un design minimalist, în care conținutul este designul.

Atunci când lucrează la majoritatea modelelor de e-mail, designerii beneficiază de faptul că conținutul este creat mai întâi înainte de a se scufunda în design. Cu toate acestea, în special în modelele minimaliste, este și mai important să știți care va fi conținutul din față.

Marvel pune accent pe conținutul lor, cu un design minimalist. Fundalul alb și imaginile care suportă doar textul din pagină fac conținutul să iasă cu adevărat în evidență.

Toate e-mailurile lui Unsplash se concentrează direct pe imaginile pe care le promovează. Butonul „Vizualizare colecție” și estomparea din partea de jos a imaginilor pot crește numărul de clicuri către site, deoarece îi lasă pe oameni să dorească să vadă mai mult.

Consolidarea brandingului

Când un vizitator ajunge pe un site web, este (ideal) o experiență de branding captivantă. Totul se află sub controlul designerului site-ului. Dar designul e-mailului este diferit. Utilizatorul vede e-mailurile într-o altă aplicație și nu toate aplicațiile de e-mail redau toate e-mailurile în mod egal.

Din acest motiv, brandingul în design-urile de e-mail este vital pentru a crea experiența potrivită pentru utilizatorul care citește e-mailul. Cu toate acestea, branding-ul trebuie să fie deseori simplu pentru a reda eficient pe diverse dispozitive și clienți de e-mail pentru cel mai mare procent de utilizatori.

O siglă simplă în partea de sus a e-mailului, folosind aceleași imagini de antet în mai multe imagini și păstrând cât mai multe elemente consistente față de celelalte produse digitale ale mărcii contribuie în mare măsură la sprijinirea și consolidarea percepției mărcii față de consumatori.

Brandingul lui Everlane este în mod inerent simplu în e-mailurile și site-ul lor web. Sigla lor afișată vizibil în partea de sus a acestui e-mail întărește acest branding.

The Middle Finger Project folosește o imagine de antet consecventă în toate e-mailurile lor, împreună cu culoarea de accent violet strălucitor. Acest lucru face ca e-mailurile lor să fie imediat recunoscute pentru oricine se abonează, iar brandingul este continuat pe site.

Atragerea atenției cu culoarea

Culoarea are un impact puternic asupra minții umane, având capacitatea de a influența emoțiile, percepțiile și chiar comportamentul. Utilizarea eficientă a culorii în e-mailuri poate crește ratele de clic și de conversie. În unele teste, diferența de culoare a butonului poate face o diferență de peste 20% în ratele de conversie.

Dar nu sunt doar chemurile la acțiune care beneficiază de pe urma folosirii culorii. Crearea unui e-mail colorat poate fi o abatere de la ceea ce este de așteptat și poate crea un aspect complet diferit față de alte e-mailuri din căsuța de e-mail a unei persoane.

Atragerea atenției asupra unui banner de vânzare cu roșu aprins amintește de semnele de vânzare din viața reală, care sunt adesea realizate și în aceeași culoare. Ochiul cititorului este imediat atras de roșu.

Article, un site de comerț electronic de mobilier scandinav, folosește o schemă de culori rosu și verde, roșul aducând atenția asupra celei mai importante părți - butonul de îndemn la acțiune de vânzare.

În timp ce unele modele de e-mail folosesc culoarea ca o modalitate de a atrage atenția asupra unei anumite părți a conținutului, acest e-mail de la Grădina Zoologică din Houston folosește culori strălucitoare pentru a crea un design distractiv și energic. Schema de culori portocaliu strălucitor și roz aprins este imediat atrăgătoare și atrage cititorul.

Utilizarea imaginilor uimitoare

Oamenii sunt creaturi vizuale, iar imaginile uimitoare pot ridica un e-mail și pot atrage atenția cititorului. De asemenea, imaginile pot întări mesajul e-mailului și marca companiei.

Emisiunile TV par să aibă un avantaj în categoria „imagini uluitoare”, acest e-mail Netflix folosind o imagine vibrantă, dar misterioasă, din Stranger Things . Combinarea imaginii atrăgătoare cu îndemnul „Play” imediat dedesubt are sens dintr-o perspectivă UX, deoarece le permite cititorilor să urmărească imediat emisiunea promovată.

Imaginile uluitoare nu se limitează doar la fotografii. Un desen animat sau o ilustrație precum cele pe care WePresent le folosește în e-mailurile lor este la fel de atrăgătoare ca o fotografie și poate ajuta cititorii să atragă cititorii în conținut.

Acest e-mail Deadliest Catch , care promovează seria de documentare Discovery Channel, afișează o imagine de antet uimitoare care se îmbină cu conținutul de sub el. Aceasta este o tehnică utilă care încurajează privitorul să continue să citească.

Experimentarea cu aspecte neconvenționale

Multe modele de e-mail au un format destul de standard: antet în partea de sus, conținut într-o singură coloană, cu îndemnuri în partea de sus și de jos. Dar nu există nicio regulă care să spună că designerii trebuie să urmeze acel model anume.

Aspectele neconvenționale sunt o modalitate excelentă de a atrage atenția cititorului și de a-i face să-și dorească să citească conținutul. Există o varietate de moduri de a crea modele neobișnuite. O metodă populară este utilizarea imaginilor pentru a crea machete de e-mail care nu ar fi neapărat compatibile cu multe platforme de e-mail.

Aspectele neconvenționale nu trebuie neapărat să fie în afara peretelui. Acesta, de la Mailchimp, folosește un design cu două coloane cu o coloană preluată de blocuri de culoare. Ceea ce îl face memorabil este că este atrăgător din punct de vedere vizual și neașteptat.

Utilizarea imaginilor permite mai multe aspecte neașteptate de e-mail, cum ar fi acesta pentru KLM. Designerii trebuie doar să țină cont de faptul că unii clienți de e-mail vor bloca încărcarea automată a imaginilor, ceea ce face necesar să existe un text alternativ care să transmită în continuare esenta mesajului.

Lucrul cu fonturi

Cei mai populari clienți de e-mail acceptă fonturi web, dar, din păcate, nu toți o fac, Gmail fiind cea mai notabilă excepție (deși Gmail acceptă Roboto și Google Sans ca parte a interfeței Gmail). Cu toate acestea, designerii pot utiliza în continuare fonturi web, atâta timp cât țin cont de faptul că un număr mare de clienți de e-mail vor folosi fonturi alternative.

Alternativa la utilizarea fonturilor web, desigur, este utilizarea imaginilor care includ fonturile. Asta este ceea ce mulți designeri de e-mail aleg să facă, mai ales în anteturile în care fonturile de rezervă ar părea probabil deplasate.

Acest buletin informativ FabFitFun folosește un font script distractiv pentru a atrage atenția asupra conținutului, în timp ce îl împerechează cu un tip de literă sans serif foarte lizibil. Experimentarea combinațiilor de fonturi în modelele de e-mail este o idee grozavă și poate fi folosită chiar și ca o încercare înainte de a schimba fonturile de pe un site web sau de a le folosi în alte materiale de marcă.

Sickbubble folosește o varietate de fonturi în designul lor de e-mail, ceea ce poate fi dificil. Dar în acest caz, pentru că pun deoparte fiecare secțiune, funcționează. Fontul de afișare din antet are o senzație foarte nervoasă, în timp ce textul principal este un sans serif ușor de citit. Fonturile scrise de mână din secțiunea de promovare a produselor funcționează, deoarece sunt deplasate față de corpul e-mailului.

Distrează-te cu animații

Animațiile adaugă un interes vizual suplimentar e-mailurilor și atrag imediat privirea cititorului. GIF-urile animate sunt o alegere populară pentru adăugarea de mișcare la e-mailuri și sunt acceptate de majoritatea clienților de e-mail.

Designerii ar trebui să aibă grijă să țină cont de dimensiunea fișierelor atunci când încorporează animații, deoarece atât de mulți oameni citesc e-mailuri pe dispozitivele mobile. De asemenea, ar trebui să se asigure că animațiile acceptă conținutul și nu sunt doar de umplere.

Folosirea GIF-urilor animate pentru a conduce un punct spre casă sau pentru a ilustra mai bine conținutul prezentat într-un mod distractiv este o completare fantastică pentru un design de e-mail, ca în acest exemplu de e-mail de la Product Hunt.

The Hustle folosește un GIF animat în e-mailurile lor atât pentru a ilustra scopul mesajului, cât și pentru a adăuga interes vizual unui design de e-mail altfel minimalist.

Apeluri la acțiune

Îndemnul la acțiune este, fără îndoială, cea mai importantă parte din aproape orice e-mail pe care îl trimite o companie. Cele mai multe e-mailuri sunt trimise pentru o acțiune promptă, indiferent dacă acțiunea este citirea unui articol, cumpărarea unui produs sau efectuarea unui alt comportament.

Designerii sunt bine serviți să acorde o atenție deosebită designului îndemnurilor lor, precum și să efectueze teste A/B asupra lor pentru a se asigura că sunt optimizați pentru performanță.

Folosirea unei culori strălucitoare pentru apelul la acțiune, așa cum a făcut Litmus aici, îl face să iasă în evidență de restul conținutului. Designerii ar trebui să ia în considerare experimentarea cu diferite culori pentru a vedea care dintre ele funcționează cel mai bine pentru publicul lor, utilizând teste A/B atunci când trimit campanii de e-mail.

Folosirea unei culori care este complet diferită de restul conținutului unui e-mail pentru apelul la acțiune îl face să iasă în evidență. Deoarece verdele verde din e-mailul Campaign Monitor este o culoare complementară împărțită cu violetul care alcătuiește fundalul, iese în evidență fără a se ciocni.

Acordați atenție celor mai bune practici de design de e-mail

Deși există mult loc pentru creativitate și experimentare în designul de e-mail, designerii trebuie să țină cont și de cele mai bune practici și limitările mediului.

Unul dintre cei mai importanți pași în proiectarea e-mailurilor este testarea e-mailurilor pe o varietate de platforme de e-mail înainte de a le trimite. Deși sunt probabil să existe mici variații între ele și există întotdeauna oameni care vor folosi platforme mai puțin obișnuite care redau design-uri diferit, este inteligent să vă asigurați că e-mailurile vor apărea în mod acceptabil pentru majoritatea utilizatorilor.

Există mai multe servicii de testare a e-mailurilor pe care designerii le pot folosi pentru a vedea cum vor arăta e-mailurile lor pe o varietate de platforme de e-mail. Litmus este una dintre cele mai populare, dar și alte opțiuni precum Mailgun, Email on Acid, Mailtrap și Preview My Email merită verificate pentru a vedea care dintre ele corespunde cel mai bine nevoilor fiecărui proiect.

În plus, ținând cont de dimensiunea imaginilor și utilizarea lățimii de bandă este esențială datorită numărului de e-mailuri deschise pe dispozitivele mobile. Designurile responsive sunt practic o necesitate din același motiv.

Cele mai bune modele de e-mail vor fi ușor de citit de către oameni pe orice dispozitiv și, cel mai important, le vor solicita să facă clic pe apelul la acțiune din e-mail (sau să efectueze în alt mod orice acțiune solicitată). Urmărirea acestor bune practici de design de e-mail oferă designerilor web un avantaj în crearea de e-mailuri care fac acest lucru în mod eficient.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Experiența este totul – Ghidul suprem UX
• Merită toate tendințele? Top 5 cele mai frecvente greșeli UX pe care le fac designerii
• UI vs. UX – Explorați diferențele de bază [Infografic]
• Principii și cele mai bune practici de design UX mobil
• Ghidul fundamental pentru utilizarea mobilă