Vedoucí designového a kreativního týmu, EMAILMATRIX
Zajímají vás všechny e-maily z doručené pošty a zaujmou vás? Studujete je všechny podrobně? Mám takové jednotky. E-maily se často nechytají, nechci ztrácet čas snahou pochopit, co mi nabízejí užitečné.
Důvodem je skutečnost, že mnoho společností nepřizpůsobuje své korespondence zájmům špatně strukturovat a vizualizovat informace.
Pokud chcete, aby váš e-mail skutečně fungoval a prodával se, přemýšlejte jako odběratel. Při navrhování e-mailu se vžijte do kůže čtenáře a pochopte, co a v jaké podobě bude pro něj zajímavé.
Vždy mějte na paměti účel dopisu – design by pro ni měl fungovat. Cílem e-mailů se zbožím je obvykle prodej – přímo (prostřednictvím propagačních e-mailů) nebo nativněji (prostřednictvím obsahových e-mailů).
Na základě svých zkušeností budu sdílet techniky návrhu dopisů, které opravdu fungují.
Struktura písmen
Mělo by čtenáře plynule a úhledně vést k cílovému tlačítku.
Počet sloupců. Předplatitelé čtou text shora dolů, takže pro ně je design písmene s jedním sloupcem většinou pohodlný: nemusí navíc „skákat“ z rohu do rohu.
Pokud je obsah v designu složitější, můžete použít možnost dvou sloupců.
Obě metody umožňují pro snadné přizpůsobení psaní pro mobilní zařízení: s designem jednoho sloupce jsou bloky snadno škálovatelné a designem se dvěma sloupci jsou uspořádány tak, aby do sebe zapadaly.
Například písmeno sloupce „Eldorado“ lze snadno upravit pro mobilní zařízení přestavbou:
E-mailové mřížky. Správné umístění produktů v mřížce pomáhá upozornit předplatitele na nejdůležitější prvek .
Například bloky s nejdůležitějšími informacemi mohou být větší než ostatní, nebo mohou být zvýrazněny kontrastní barvou. Tím na ně čtenáře upozorníte. Prioritní produkt můžete také umístit na samý vrchol seznamu – tímto způsobem se na něj také zaměříte.
„Obrácená pyramida“. Další způsob umístění obsahu do e-mailu. Sečteno a podtrženo, je umístit bloky tak, aby nenápadně vedly účastníka k cílové akci (obvykle ke kliknutí na tlačítko s hlavní výzvou k akci) nebo aby upozornily na nejdůležitější prvky.
Nejprve je do dopisu umístěn široký banner a záhlaví, které demonstruje výhody a vzbuzuje zájem. Poté je návrh popsán podrobněji. A umístěte tlačítko na konec.
Pokud existuje několik zajímavých návrhů pro předplatitele, lze umístit několik „obrácených pyramid“ jeden po druhém.
Vzdálenosti mezi objekty. Vytvoření sémantické struktury a objasnění který prvek je ke kterému přidružen, umístěte související prvky blíže k sobě.
Takže účastník okamžitě pochopí, které tlačítko patří ke kterému bloku nebo který titulek patří ke kterému obrázku atd.
„Vzduch.“ Chcete-li, aby byl obsah při procházení snadněji vnímán, můžete použít techniku volného místa. Tato technika se často označuje jednoduše jako „vzduch“.
Vzduch mezi významovými bloky dává očím odpočinek a pomáhá vizuálně oddělit písmeno od jeho základních částí. Pomocí této techniky se také můžete zaměřit na objekt, například na tlačítko. Objekt obklopený vzduchem přitahuje více pozornosti. Bílé mezery mezi prvky vám umožní pohodlně číst text i grafiku.
Text: jeho plast, design a písma
Text by měl být navržen tak, aby účastník na první pohled okamžitě pochopil, co mu nabízíte a jak cenné jsou tyto informace.
Držte se pravidlo: jedno písmeno – jedna myšlenka. Nezapomeňte na účel dopisu a vložte do něj pouze informace, které pro ni přísně fungují. Proto se nepokoušejte vtesnat do svého e-mailu všechny superziskové propagační akce, produkty a mega užitečné články. Tímto způsobem navíc získáte velmi dlouhý dopis, který se pravděpodobně nepřečte až do konce. A Gmail obecně zkrátí zprávy, které jsou příliš dlouhé a těžké a váží více než 100 kB.
Vyvarujte se plného textu – pro odběratele to bude velmi obtížné vnímat, ve většině případů si ho jednoduše nedovolí přečíst.
Text rozdělte na malé odstavce stejným způsobem: „jeden odstavec = jeden myslel.“ Čtení takového textu je zajímavější a oči se unavují méně. To znamená, že je pravděpodobnější, že účastník dopis dočte.
Přidejte nadpisy a podnadpisy, seznamy, přemýšlejte nad systémem svislých odsazení v bloku. Zároveň byste však neměli zneužívat rozmanitost. Ve většině případů postačují 3 úrovně záhlaví.
Felix Gray má radikálně odlišný přístup. Minimální část textu umožňuje rychlejší rozhodování o cíli a zvyšuje pravděpodobnost, že bude dopis přečten:
Ohledně písem , jejich typy a velikosti – také nadměrně nepoužívejte rozmanitost. K psaní bude stačit 1–2 typy a 2–3 velikosti.
K sazbě používejte zabezpečená standardní webová písma: Arial, Courier New, Times New Roman, Georgia, Trebuchet, Serif, Sans Serif a Verdana. Určitě je podporují všichni odesílatelé. Nestandardní písma nemusí být poštovními pracovníky podporována a v tomto případě je nahradí standardními. Tím se zkreslí zobrazení písmena.
Značky často používají v komunikaci svá značková písma, ale u e-mailů stojí za to udělat výjimky – aby bylo zaručeno, že vše napsané bude zobrazeno tak, jak bylo zamýšleno.
Pokud stále chcete přidat vlastní písma, použijte je k psaní velkých nadpisů a titulků na bannery a další obrázky. Ale pak tyto bloky budou muset být vysázeny obrázky, nikoli textem – opět, aby písma vypadala tak, jak to designér zamýšlel.
V designu neexistují žádná správná rozhodnutí: protože design je subjektivní věc a protože jeden a ten samý úkol lze provádět různými způsoby, ale zároveň je stejně atraktivní. Ale na druhou stranu můžete okamžitě odlišit e-mail, ve kterém se s obsahem pracovalo, od e-mailu, ve kterém byl obsah bezmyšlenkovitě přenesen z technického úkolu.
Ilustrace: jejich vzhled a obsah
Všechny obrázky by měly odpovídat významu písmene, měli by pomoci strukturovat informace a vyjasnit je.
Jeden významový blok – jeden obrázek. To zabrání rozptýlení pozornosti vašeho předplatitele. Velké množství textu lze zředit ikonami, mikroobrazy nebo alespoň správným formátováním (podnadpisy, odrážky atd.).
Používejte fotografie lidí a vyvolávejte emoce. Děti a zvířata jsou vždy dojemné. Pomocí jejich fotografií můžete u účastníka vyvolat pozitivní emoce.
MyToys – sklad zboží pro děti – se často uchyluje k této metodě. Zároveň se jim vždy podaří vybrat „správné“ obrázky. Používají živé nestádiové fotografie bez zpracování. Takové přirozené obrázky přitahují čtenáře k sobě, ponořují je do pocitu klidu typického pro dítě na fotografii.
Pamatujte: obrázky by měly ukazovat účinek zakoupeného produktu – pozitivní emoce lidí, štěstí a sebevědomí. Takové ilustrace ovlivňují uživatele více než banální obrázky peněz a jiného hmotného zboží. Ukazují čtenáři, co se s ním stane po zakoupení produktu, jak se jeho život změní k lepšímu, a pomohou si to představit.
Další tajemství: fotografie, kde se postava dívá směrem k CTA nebo k jakýmkoli informacím důležité, abyste pomohli upozornit na tento prvek.
Použijte originální zajímavé fotografie a ilustrace , nikoli nudné obrázky. Díky tomu bude dopis vypadat netradičně a působivěji.
GIF animace přitahují největší pozornost. S jejich pomocí můžete:
- zobrazit odpočítávací měřič a tím spěchat předplatitele k nákupu;
- vzbudit zvědavost a zájem;
- zobrazit v jednom bloku více variant produktu.
Při používání obrázků v dopise se vyhněte následujícím chybám:
- Nenechávejte oříznuté obrázky oddělené od pozadí, jen visící ve vzduchu bez podpory. Oříznutý okraj takového obrázku musí být kombinován s plnou čarou nebo jinými objekty, které skryjí „podřadnost“ obrázku.
- Pozadí obrázku by nemělo splývat s hlavním pozadím dopisu. Jako poslední možnost může být obrázek ohraničen tenkým okrajem, který označuje jeho hranice. Nebo proveďte barevnou korekci fotografie.
blok sítnice
= -incut – left block-incut – text-medium „>
Je důležité, aby obrázky vypadaly dobře na všech obrazovkách, včetně obrazovek sítnice (s vyšší hustotou pixelů). „Mýdlové“ obrázky okamžitě zkazí dojem z dopisu.
Abyste se vyhnuli rozmazaným ilustracím, vytvořte ve svém rozložení loga a ikony. To vám umožní exportovat je v jakékoli velikosti bez ztráty kvality.
Při práci s bitmapovou grafikou použijte v písmenu dvojnásobnou velikost, než je jejich skutečná velikost. Například pokud je fyzický obrázek v písmenu 200 x 200 pixelů, musíte připravit obrázek o velikosti 400 x 400 pixelů nebo více.
Ve Photoshopu to vyžaduje převod velkého obrázku na inteligentní objekt a poté jej zmenšit na požadovanou velikost:
V programu Figma stačí jednoduše použít obrázky, které jsou dvakrát větší než konečný obrázek.
Dekorace
Návrh musí vyřešit konkrétní problém. Když do něj přidáváte nějaké prvky, desetkrát si rozmyslete, zda jsou skutečně potřeba, zda nebudou odvádět pozornost od podstaty.
Přidané prvky „pro krásu“ přetěžují rozložení a oslabí ho. Pro čtenáře je obtížné soustředit se na text. Vysoce kvalitní design obsahu to netoleruje! Snižte proto počet dekorativních prvků, které nejsou žádným způsobem odůvodněny.
Při vývoji designu dopisů do něj odborníci často kopírují styl webu – aby vytvořili přidružení uživatele ke značce. Současně se do záhlaví dopisu přenáší telefon, nabídky, sociální sítě atd. Přebytek prvků v záhlaví zachovává pozornost účastníka a zvyšuje cestu k hlavnímu prvku dopisu.
< p>V záhlaví ponechejte pouze to podstatné, například logo. Všechno ostatní, pokud je to opravdu potřeba, lze umístit do zápatí.
Zápatí dopisu: z čeho se vlastně skládá a … Vysvětlil rozdíl mezi třemi složkami zápatí dopisu, sdílené představy o tom, jak … emailmatrix.ru
Mějte také na paměti, že velký počet prvků v záhlaví bude během adaptace obtížnější přeskupit, a proto při pohledu z mobilu zabere na důležité první obrazovce hodně místa.
tlačítka
Tlačítka by měla jasně odrážet zamýšlenou akci: účastník by měl rozumět tomu, co od něj chce a co bude následovat po kliknutí na tlačítko.
Moje nejjednodušší a nejzřejmější rada: tlačítka by měla vypadat jako tlačítka … Chcete-li, aby uživatelé klikali, zviditelněte tlačítko a nedovolte jim přemýšlet o tom, co se stane, když kliknou. Všechno by mělo být jednoduché, jasné a známé.
Udělejte tlačítka tak velká, aby na ně bylo snadné klikat v mobilních zařízeních. Při navrhování e-mailů navrhujte alespoň dva styly pro tlačítka – pro primární a sekundární akce. Pokud najednou existuje více úrovní důležitosti akcí, pak by styly měly být promyšleny více. Je pravidlem, že pokud je vše provedeno moudře, stačí dvě nebo tři možnosti.
Primární tlačítka by měla být zdobena kontrastní barvou, takže při krátkém pohledu na písmeno vyniknou více.
Minimalizujte počet tlačítek. Výjimkou jsou tlačítka pro objednání na produktových kartách:
Nedávejte do stejného bloku dvě podobně stylizovaná tlačítka vedle sebe: vždy nechte uživatele pochopit, která akce a tlačítko jsou důležitější. Výjimkou je CTA pro výběr kategorie produktu. Například jako v dopise Express: existuje kategorie zboží pro ženy a pro muže, neexistuje žádný zásadní rozdíl mezi akcemi bez ohledu na to, na které tlačítko uživatel klikne.
Pokud jde o text na tlačítkách, čím menší, tím lepší. Proto se zde snažte být co nejkratší a přizpůsobit se jedním nebo třemi slovy .
Nezapomeňte: tlačítko musí aktivovat cílovou akci a odpovídat tomu, co je řečeno v textu . Proto na něj pište pouze nejdůležitější a motivující jednat. Například pokud hovoříte o produktu a jeho výhodách, je logické napsat na tlačítko banální „Koupit“, „Přidat do košíku“.
Pokuste se odrážet výhody tlačítek < b> pro uživatele, takže při rychlém pohledu na e-mail se oko drží těchto prvků. Můžete například přidat ceny – „Koupit za 4 999 rublů.“, „Koupit za 99 rublů.“ Je důležité si uvědomit, že vše je relativní: cena uvedená na tlačítku je 100 000 rublů. pro 50-palcový televizor se může odtlačit a 20 000 rublů. – naopak přilákat. Cena 1000 rublů. pro jednoduchý telefon případ je také neatraktivní, ale 100-200 rublů. – může to být zajímavé. Jednejte proto přiměřeným způsobem a poskytněte uživateli co největší užitek.
technologie AMP
AMP umožňuje sazbu interaktivních e-mailů, jako jsou mini-weby. Díky této technologii můžete vytvářet posuvníky a zobrazovat produkty v různých variantách a úhlech, aniž byste z písmene vytvořili obrovské plátno.
Stalo se také skutečným používáním akordeonů a světelných polí v e-mailech k prohlížení informací o produktu:
Můžete také přidat položky do košíku, opravit objednávky, přečíst recenze a zanechat komentáře přímo v e-mailu:
Interaktivita přitahuje předplatitele a umožňuje vám komunikovat s písmenem jako na webových stránkách. Bohužel jsem nemohl najít e-maily produktů AMP s různými mechaniky. Proto pro obecné pochopení toho, jak to všechno funguje, uvedu příklady našich dopisů.
V roce 2019 jsme poslali e-mail AMP, který implementoval posuvník akordeonu a další mechaniky, a uživatelé mohli také zanechávat komentáře online:
Technologie AMP jako způsob, jak přimět předplatitele hovořit Dámy a pánové, dnes v našem programu není obyčejný dopis, ale magický! Neuvěřitelné triky a … emailmatrix.ru
V novoročním dopise jsme použili ještě propracovanějšího mechanika s online komentáři. Konverzní poměr pro zanechání komentáře byl 70%. Mechanici zapojili předplatitele a připomněli jim, že můžeme vytvářet originální a pokročilé e-maily.
Velkolepé blahopřání předplatitelům EMX Na konci roku 2020 jsme nejen zaslali blahopřání předplatitelům, ale zeptali jsme se, jak … emailmatrix.ru
Tmavý motiv
Temné téma je v e-mailovém marketingu relativně novým fenoménem. Když si to účastník zapne na svém zařízení, barvy písmen se změní – jsou obrácené. Zároveň různé poštovní servery a různé systémy (iOS, MacOS, Android) mění barvy písmen různými způsoby. To vytváří další potíže pro návrháře e-mailů a marketingové pracovníky.
Krátký průvodce temným tématem v dopisech Temné téma jsme důkladně vyřešili, provedli průzkum a nyní s vámi sdílíme naše znalosti. emailmatrix.ru
Pokud tyto momenty nezajistíte, v temném motivu může předplatitel vidět logo sloučené s pozadím nebo „nesestříhaný“ produkt s otravným bílým obdélníkem v pozadí a mnoho dalšího.
V důsledku testování na e-mailech Pro naše zákazníky elektronického obchodování jsme zjistili, že 17% uživatelů mobilních telefonů a neuvěřitelných 45% uživatelů iPhone prohlíží e-maily v temném motivu. Takže to neignorujte.
Většina e-mailových klientů s tmavým motivem jednoduše ztmaví e-mail a odpovídajícím způsobem změní barvy písma. Současně nebude v tmavém motivu upraveno původně černé písmeno. Gmail v systému iOS je však výjimkou. V tmavém motivu tento poštovní server stejně převrací barvy vašeho dopisu. To znamená, že zpočátku černé písmeno bude bílé, když je zapnutý tmavý motiv.
V důsledku mnoha testů tmavého motivu jsme vytvořili srovnávací tabulku, která ukazuje, jak původní barva v písmeno se změní při prohlížení u různých odesílatelů.
Důležité: Změní se pouze ty barvy, které jsou napsány v rozložení písmene: barvy textu, pozadí, tlačítek (pokud jsou) jsou vysázeny). Obrázky (včetně textů na nich napsaných nestandardním písmem) a pozadí obrázků jsou nezměněny.
Nebudete moci podvádět a vytvářet jednotný obrázek stejné barvy místo barvy pozadí – text umístěný na tomto pozadí bude stále měnit svou barvu na opačnou a bude se na nezměněném pozadí ztratit.
Pokud jde o nadpisy s nestandardním písmem, které jsou vysázeny obrázky, můžete k nim přidat tahy v barvě, která odpovídá pozadí písmene. V normálním režimu budou tyto tahy neviditelné a v tmavém motivu zvýrazní nadpis obrysem, který nebude splývat s pozadím písmene. Nebo takové záhlaví lze jednoduše vytvořit barvou, která bude vypadat stejně kontrastně na světlém i tmavém pozadí.
Příběh je podobný logům. Logo původně s kontrastní barvou, například červenou, bude vypadat dobře na tmavém i světlém pozadí.
Ale co třeba černé logo? Ve většině případů pokyny společnosti zakazují přidávat do loga tahy obrysu nebo stíny. Poté, aby logo nesloučilo s tmavým pozadím, může být umístěno na podklad, který je ve světlém motivu neviditelný. Tímto způsobem nebudete v rozporu s pokyny a logo bude vypadat dobře v jakémkoli tématu. Yandex.Market například používá právě tuto techniku:
Je lepší oříznout obrázky produktu z bílého pozadí a použít je ve formátu png. Takto budou vypadat stejně dobře v jakémkoli tématu a žádné obrázky nebudou mít nedbalé vystřižené pozadí:
V krajním případě můžete pro produkty vyrobit substráty stejné velikosti – aby v temném motivu byly všechny karty rovnoměrné a elegantní:
obrázek pozadí
V tomto příkladu jsou také numerické barvy níže. Chcete-li dosáhnout požadovaného efektu u tmavých i světlých motivů, použijte spíše průhlednost než barvu:
Dotazy na média
Mediální dotazy jsou jakýmsi „pravidlem“ pro návrh a úpravu písmene, která jsou již napsána na rozložení. Ukazují, jak zobrazit prvky písmene v závislosti na velikosti obrazovky, na které je otevřeno. Například prostřednictvím mediálních dotazů můžete určit, aby se text zobrazoval zarovnaný doleva na verzi dopisu pro stolní počítače a na střed mobilního telefonu.
Mediální dotazy v responzivním rozložení e-mailu Vše o mediálních dotazech: k čemu jsou, jak je používat v rozložení e-mailu a jaký druh pošty … emailmatrix.ru
Také pomocí mediálních dotazů, některé prvky v mobilní verzi můžete skrýt: například neumístěné položky nabídky v záhlaví nebo části banneru.
Neměli byste však vkládat velké naděje do adaptace pomocí mediálních dotazů, protože Yandex je stále nepodporuje. Použitím mediálních dotazů riskujete, že v tomto maileru získáte zcela nepředvídatelné výsledky.
Navrhněte svůj e-mail tak, aby se i bez použití mediálních dotazů dobře přizpůsobil pomocí standardních metod – změna měřítka, opětovné sestavení, oříznutí. Snažte se neskrývat „extra“ prvky v mobilní verzi, jako v příkladech níže, a ukládat veškerý obsah z desktopové.
Správné písmo vám pomůže dosáhnout vašich cílů. Podívejte se na design nejen z pohledu krásného vizuálu, ale také z pohledu marketingu. Další informace o tom, jak vám design pomáhá dosáhnout vašich cílů e-mailového marketingu, najdete v našem kurzu. Obsahuje mnoho ukázkových dopisů a užitečných tipů.
Nejprve publikováno na blogu RetailCRM.
