Pomemben odstotek potrošnikov— 99% - vsak dan preverite njihovo e-pošto. Nekatere demografske podatke, vključno z tisočletniki , raje e-poštno komunikacijo podjetij kot druge oblike komunikacije, na primer telefonske klice ali sporočila SMS. In z več kot 5 milijardami e-poštnih računov, dejavnih po vsem svetu, je e-pošta bistveni del vsake strategije digitalnih izdelkov.

Čeprav je tržnikom na voljo več tisoč oblik predlogov za e-pošto, je oblikovanje e-pošte pomembno področje strokovnega znanja spletni oblikovalci . To še posebej velja za tiste, ki želijo sodelovati z večjimi blagovnimi znamkami, kreativnimi podjetji in drugimi, ki se izogibajo predlogam.

Oblikovalci morajo pri načrtovanju e-pošte upoštevati več stvari, od omejitev večine e-poštnih platform (z omejeno podporo za stvari, kot so spletne pisave iz ene največjih - Gmaila), pa tudi do tega, kaj potrošniki pričakujejo pri odpiranju e-pošte z podjetje, s katerim morda že poslujejo.

Pomen oblikovanja mobilnih e-poštnih sporočil

Z vsaj polovica vseh e-poštnih sporočil ki se zdaj odpira in bere na mobilnih napravah, je oblikovalci neodgovorno ignorirati mobilno prijazen e-poštni modeli. Še posebej, če upoštevamo, da so stopnje pretvorbe e-pošte v mobilnih napravah običajno enake bistveno višje kot namizne cene.

Ta mobilna e-poštna zasnova podjetja PiperJaffray ohranja stvari preproste in elegantne. V mobilni napravi je enostavno brati, s čistimi povezavami in subtilnimi blagovnimi znamkami. Na prvo mesto postavlja potrebe uporabnikov, ki izboljšujejo splošno uporabniško izkušnjo in dojemanje podjetja.

Dribbble redno spremlja e-poštno sporočilo s priljubljenimi posnetki in se v celoti osredotoča na vsebino. Ta poudarek olajša krmarjenje po e-pošti v mobilnih napravah. Čeprav je preprosta postavitev, ki se osredotoča na vsebino, dobra ideja za številne vrste e-poštnih sporočil, je še posebej primerna za mobilna e-poštna sporočila, kjer olajša tako porabo vsebine kot tudi interakcijo z njo.

Osredotočanje na vsebino

Kot najboljša praksa, ne glede na to, ali oblikujete e-pošto ali druge digitalne izdelke, oblikovalci vedno osredotočiti na vsebino . Nekateri dizajni e-pošte to najboljšo prakso izpeljejo do skrajnosti z minimalističnim oblikovanjem vsebine je dizajn.

Ko delajo na večini oblik e-pošte, oblikovalci koristijo, da se vsebina najprej ustvari, preden se potopijo v dizajn. Vendar je še posebej pri minimalističnih izvedbah še bolj pomembno vedeti, kakšna bo vsebina vnaprej.

Čudim se z minimalističnim dizajnom osredotoča na njihovo vsebino. Belo ozadje in slike, ki podpirajo samo besedilo na strani, naredijo vsebino resnično izstopajočo.

Vsa e-poštna sporočila podjetja Unsplash se osredotočajo na slike, ki jih promovirajo. Gumb »Ogled zbirke« in bledenje na dnu slik lahko povečata število klikov do spletnega mesta, saj ljudem pusti, da želijo videti več.

Okrepitev blagovne znamke

Ko obiskovalec prispe na spletno stran, je to (v idealnem primeru) izjemna izkušnja z blagovno znamko. Vse je pod nadzorom oblikovalca spletnega mesta. Toda oblikovanje e-pošte je drugačno. Uporabnik si ogleduje e-pošto v drugi aplikaciji in vse e-poštne aplikacije ne upodabljajo vseh e-poštnih sporočil enako.

Zaradi tega je blagovna znamka pri oblikovanju e-pošte ključnega pomena za ustvarjanje prave izkušnje za uporabnika, ki bere e-pošto. Vendar pa je treba blagovno znamko pogosto poenostaviti, da jo lahko učinkovito upodabljate v različnih napravah in e-poštnih odjemalcih za največji odstotek uporabnikov.

Preprost logotip na vrhu e-poštnega sporočila z uporabo enakih slik glave v več slikah in ohranjanje doslednosti čim več elementov drugih digitalnih izdelkov blagovne znamke močno prispeva k podpori in krepitvi zaznavanja blagovne znamke potrošnikom.

Blagovna znamka Everlane je po e-pošti in na spletnem mestu preprosta. Njihov logotip, vidno viden na vrhu tega e-poštnega sporočila, poudarja to blagovno znamko.

The Projekt s srednjim prstom uporablja dosledno sliko glave v vseh svojih e-poštnih sporočilih skupaj s svetlo vijolično barvo poudarka. Zaradi tega so njihova e-poštna sporočila takoj prepoznavna vsem, ki se naročijo, blagovno znamko pa nadaljujejo na spletni strani.

Risanje pozornosti z barvo

Barva močno vpliva na človeški um, saj lahko vpliva na čustva, zaznavanje in celo vedenje. Učinkovita uporaba barv v e-poštnih sporočilih lahko poveča razmerje med prikazi in kliki. Pri nekaterih testih lahko razlika v barvi gumba naredi več kot a 20% razlike v menjalnih tečajih.

A korist od uporabe barv niso le pozivi k dejanjem. Ustvarjanje barvitega e-poštnega sporočila je lahko odmik od pričakovanega in ustvari povsem drugačen videz in občutek drugih e-poštnih sporočil v mapi osebe.

Opozorilo na prodajni transparent z živo rdečo barvo spominja na resnične prodajne znake, ki so pogosto tudi v isti barvi. Bralčevo oko takoj pritegne rdeča.

Članek , skandinavsko spletno mesto za pohištvo, uporablja utišano rdečo in zeleno barvno shemo, pri čemer rdeča opozarja na najpomembnejši del - gumb za poziv k prodaji.

Medtem ko nekateri načini e-pošte uporabljajo barvo kot način za opozarjanje na določen del vsebine, to e-poštno sporočilo iz živalskega vrta v Houstonu uporablja svetle barve za ustvarjanje zabavnega in energičnega dizajna. Svetlo oranžna in vroče roza barvna shema je takoj vpadljiva in pritegne bralca.

Uporaba osupljivih slik

Ljudje smo vizualna bitja in osupljive slike lahko dvignejo e-poštno sporočilo in pritegnejo bralčevo pozornost. Slike lahko tudi okrepijo e-poštno sporočilo in blagovno znamko podjetja.

Zdi se, da imajo televizijske oddaje prednost v kategoriji 'osupljive slike', saj ta e-poštni naslov Netflix uporablja živahno, a skrivnostno fotografijo iz Neznanke . Kombinacija privlačne slike s pozivom k akciji »Predvajaj« tik pod njo je z vidika UX smiselna, saj bralcem olajša takojšen ogled promovirane oddaje.

Osupljive slike niso omejene samo na fotografije. Risanka ali ilustracija, kakršna WePresent uporablja v svojih e-poštnih sporočilih, je prav tako vpadljiva kot fotografija in lahko pomaga pritegniti bralce k vsebini.

To Smrtonosni ulov e-pošta, ki promovira dokumentarno serijo Discovery Channel, prikazuje osupljivo sliko glave, ki se združi z vsebino pod njo. To je uporabna tehnika, ki gledalca spodbuja k nadaljnjemu branju.

Eksperimentiranje z nekonvencionalnimi postavitvami

Številni modeli e-poštnih sporočil imajo precej standardno obliko: glava na vrhu, vsebina z enim stolpcem s pozivi k dejanju zgoraj in spodaj. Vendar ni pravila, ki pravi, da morajo oblikovalci slediti temu določenemu vzorcu.

Nekonvencionalne postavitve so odličen način, da pritegnete pozornost bralca in ga spodbudite k branju vsebine. Obstajajo različni načini za ustvarjanje nenavadnih modelov. Eden od priljubljenih načinov je uporaba slik za ustvarjanje postavitev e-pošte, ki ne bi bile nujno združljive s številnimi e-poštnimi platformami.

Ni nujno, da so nekonvencionalne postavitve oddaljene od stene. Ta iz Mailchimpa uporablja zasnovo z dvema stolpcema, pri čemer en stolpec prevzamejo barvni bloki. Zaradi česar je nepozaben, je vizualno privlačen in nepričakovan.

Uporaba slik omogoča bolj nepričakovane postavitve e-pošte, kot je ta za KLM. Oblikovalci morajo le upoštevati, da nekateri e-poštni odjemalci še vedno preprečujejo samodejno nalaganje slik, zato je treba imeti nadomestno besedilo, ki še vedno prenaša bistvo sporočila.

Delo s pisavami

Večina priljubljenih e-poštnih odjemalcev podpira spletne pisave, žal pa ne vsi - Gmail je najpomembnejša izjema (čeprav Gmail kot del Gmailovega vmesnika podpira Roboto in Google Sans). Vendar oblikovalci lahko še vedno uporabljajo spletne pisave, če imajo v mislih, da bo veliko število e-poštnih odjemalcev uporabljalo nadomestne pisave.

Alternativa uporabi spletnih pisav je seveda uporaba slik, ki vključujejo pisave. To se odločijo številni oblikovalci e-pošte, zlasti v glavah, kjer bi nadomestne pisave verjetno izgledale neprimerno.

To glasilo FabFitFun uporablja zabavno pisavo skripta, da opozori na vsebino, hkrati pa jo poveže z zelo čitljivo pisavo brez serifa. Eksperimentiranje s kombinacijami pisav pri oblikovanju e-poštnih sporočil je odlična ideja in se lahko celo uporabi kot poskusni zagon, preden spremenite pisave na spletnem mestu ali jih uporabite v drugih blagovnih znamkah.

Sickbubble pri oblikovanju e-pošte uporablja različne pisave, kar je lahko zapleteno. Toda v tem primeru, ker ločijo vsak odsek, deluje. Zaslonska pisava v glavi ima zelo razdražljiv občutek, medtem ko je besedilo glavnega besedila lahko berljiv brez serifa. Rokopisne pisave v promocijskem delu izdelka delujejo, saj so odmaknjene od telesa e-poštnega sporočila.

Zabava z animacijami

Animacije dodajo dodatno vizualno zanimanje e-poštnim sporočilom in takoj pritegnejo oko bralca. Animirani GIF-ji so priljubljena izbira za dodajanje premikov e-poštnim sporočilom in jih podpira večina e-poštnih odjemalcev.

Oblikovalci ne smejo pozabiti na velikost datotek pri vdelavi animacij, saj toliko ljudi bere e-pošto na mobilnih napravah. Zagotoviti bi morali tudi, da animacije podpirajo vsebino in niso le polnilo.

Uporaba animiranih datotek GIF za vožnjo točke domov ali boljša ilustracija predstavljene vsebine na zabaven način je čudovit dodatek k oblikovanju e-pošte, kot v tem e-poštnem primeru iz izdelka Hunt.

The Hustle v svojih e-poštnih sporočilih uporablja animirani GIF, ki ponazarja bistvo sporočila in dodaja vizualno zanimanje sicer minimalističnemu oblikovanju e-pošte.

Pozivi k akciji

Poziv k dejanju je verjetno najpomembnejši del skoraj vseh e-poštnih sporočil, ki jih podjetje pošlje. Večina e-poštnih sporočil se pošlje takoj, ne glede na to, ali gre za branje članka, nakup izdelka ali izvajanje kakšnega drugega vedenja.

Oblikovalci so dobro pripravljeni, da pozorno spremljajo zasnovo svojih pozivov k akciji in na njih izvajajo A / B testiranje, da se zagotovi njihova optimizacija za delovanje.

Uporaba svetle barve za poziv k akciji, kot je to storila Litmus, izstopa od ostale vsebine. Oblikovalci bi morali razmisliti o eksperimentiranju z različnimi barvami, da bi ugotovili, katere so najbolj primerne za njihovo občinstvo, in sicer z uporabo A / B testov pri pošiljanju e-poštnih kampanj.

Uporaba barve, ki se popolnoma razlikuje od preostale vsebine e-poštnega sporočila, za poziv k dejanju izstopa. Ker je limeta zelena v e-poštnem sporočilu Campaign Monitor razdeljena dopolnilna barva vijolične, ki tvori ozadje, izstopa brez spopadov.

Bodite pozorni na najboljše prakse pri oblikovanju e-pošte

Čeprav je pri oblikovanju e-pošte dovolj prostora za ustvarjalnost in eksperimentiranje, morajo oblikovalci upoštevati tudi najboljše prakse in omejitve medija.

Eden najpomembnejših korakov pri oblikovanju e-pošte je testiranje e-pošte na različnih e-poštnih platformah, preden jih pošljete. Čeprav obstajajo majhne razlike med njimi in vedno obstajajo ljudje, ki bodo uporabili manj običajne platforme, ki različno upodabljajo obliko, je pametno zagotoviti, da bodo e-poštna sporočila sprejemljiva za večino uporabnikov.

Obstaja več storitev za testiranje e-pošte, s katerimi lahko oblikovalci vidijo, kako bodo njihova e-poštna sporočila videti na različnih e-poštnih platformah. Lakmus je ena izmed najbolj priljubljenih, a druge možnosti, kot je Mailgun , E-pošta o kislini , Mailtrap , in Predogled moje e-pošte je vredno preveriti tudi, katera najbolje ustreza potrebam posameznega projekta.

Poleg tega je upoštevanje velikosti slik in uporabe pasovne širine bistvenega pomena zaradi števila e-poštnih sporočil, odprtih v mobilnih napravah. Odzivni modeli so iz istega razloga tako rekoč nujni.

Najboljše zasnove e-poštnih sporočil bodo ljudje zlahka prebrali v kateri koli napravi in ​​- kar je najpomembneje - jih bodo pozvali, naj v e-poštnem sporočilu kliknejo poziv k akciji (ali kako drugače izvedejo kakršno koli zahtevano dejanje). Sledenje tem najboljšim praksam pri oblikovanju e-pošte spletni oblikovalci prednost pri ustvarjanju e-poštnih sporočil, ki to učinkovito počnejo.

• • •

Nadaljnje branje na blogu ApeeScape Design:

• Izkušnje so vse - Ultimate UX Guide
• Ali so vsi trendi vredni? Top 5 najpogostejših napak UX, ki jih naredijo oblikovalci
• UI v primerjavi z UX - raziščite bistvene razlike [Infographic]
• Načela in najboljše prakse oblikovanja mobilnih UX
• Temeljni vodnik za uporabnost v mobilnih napravah

Razumevanje osnov

Katera je najboljša širina e-pošte?

Ljudje berejo e-pošto na različnih napravah, zato je najboljša možnost ustvariti odziven dizajn e-pošte, ki se bo prilagodil vsakemu zaslonu. A pametno je imeti največjo širino (povprečna širina računalniškega zaslona je 1366 slikovnih pik, večina e-poštnih aplikacij pa ima stranske vrstice, ki zavzamejo nekaj prostora, zato je dobra izbira 1024 slikovnih pik).

Kako oblikujete e-poštno sporočilo?

Oblikovanje e-pošte se ne razlikuje veliko od oblikovanja spletne strani. Sestavljajo ga HTML in CSS, večina najboljših praks pri spletnem oblikovanju pa je podobnih najboljšim praksam pri oblikovanju e-pošte, pri čemer je treba upoštevati nekaj dodatnih stvari, na primer število e-poštnih sporočil, odprtih v mobilnih napravah (vsaj polovica), in poenostavljene zasnove.

Kakšne velikosti naj bodo slike za e-pošto?

Pri dodajanju slik v e-poštne zasnove je največja stvar, ki jo je treba upoštevati, velikost datoteke in ne dejanska velikost slikovnih pik. Ker je več kot polovica e-poštnih sporočil odprtih v mobilnih napravah, je ohranjanje majhnosti datotek za hitrejše nalaganje ključni del uporabnosti e-pošte.

Kaj je oblikovalec e-pošte?

Oblikovalec e-pošte je podoben spletnemu oblikovalcu, le da namesto spletnih mest oblikujejo e-pošto in predloge za e-pošto. 'Oblikovalec e-pošte' se lahko nanaša tudi na aplikacijo za oblikovanje e-poštnih sporočil, ki jo pogosto uporabljajo neoblikovalci.

Kako naredim e-poštno predlogo?

Ustvarjanje zasnove predloge e-pošte je podobno ustvarjanju predloge spletne strani. Oblikovalci pogosto začnejo z žičnim okvirjem ali maketo, ustvarijo kodo HTML in CSS za predlogo in jo nato uvozijo v svojo izbrano platformo za e-poštno trženje. Od tam lahko predlogo uporabite za več prihodnjih e-poštnih sporočil.