← Všechny článkyDesign e-mailů

Odstupy v e-mailu: usnadněte čtenářům orientaci

Čtení na 4 min

Odstupy v e-mailu napovídají čtenáři, které prvky spolu souvisejí. Nadpis, jeho vysvětlení a tlačítko mají být blíž u sebe než dva odlišné příběhy o produktu. Když jsou všechny mezery stejné, i krátká kampaň Shopify může působit stísněně nebo nesouvisle. Použijte malou, jednotnou škálu rozestupů a ověřte, že seskupení dává smysl i po přechodu rozvržení na mobilu.

Seskupujte podle významu

Název produktu ponechte blízko jeho obrázku a ceny. Vysvětlení umístěte poblíž akce, kterou podporuje. Mezi samostatnými sekcemi nechte větší odstup než mezi souvisejícími prvky uvnitř jedné sekce. Čtenář tak získá vizuální mapu ještě před přečtením každého slova.

Vytvořte tento vzorec jako opakovaně použitelnou šablonu Sendvio. Zvolte několik hodnot rozestupů a používejte je jednotně místo úprav každého bloku od oka. Šablona musí dovolit obsahu růst, když se titulek zalomí na další řádek.

Místo nesouvislých rozestupů používejte malou škálu

Zvolte několik stupňů a každému přiřaďte účel. Například malá mezera může spojit název produktu s cenou, střední oddělit vysvětlení od tlačítka a větší uvést novou sekci. Přesné hodnoty se mají hodit k šabloně; důležitější než konkrétní číslo je jednotný vztah mezi prvky.

Jako výchozí bod můžete zkusit 8, 16 a 32 pixelů pro tyto tři úrovně a potom je upravit podle odeslaného e-mailu. Největší mezeru nedávejte mezi každý odstavec. Pokud jsou rozestupy stejné všude, související informace přestanou působit jako celek a e-mail se zbytečně prodlouží.

Řádkování má jinou funkci. Odděluje řádky uvnitř odstavce, aby je oko mohlo pohodlně sledovat. Okraje odstavce oddělují celé myšlenky. Velký okraj neopraví příliš těsné řádky a větší výška řádku jasně neoddělí dvě nesouvisející sekce. Upravte správnou úroveň mezer podle problému, který vidíte.

Vyhněte se prázdnému místu bez účelu

Velké mezery mohou na telefonu způsobit, že krátká zpráva působí nesouvisle. Zkontrolujte, zda akci neposouvá příliš nízko pevná výška bloku nebo zbytečný oddělovací prvek. Odstraňte příčinu v rozvržení místo zmenšování písma, aby vyplnilo nevyvážený prostor.

V odstavcích zachovejte pohodlné řádkování a nepoužívejte příliš široké textové sloupce. Krátký odstavec se snadněji čte, když řádky zůstávají propojené, ale nejsou natěsnané. Před dokončením rozestupů si prohlédněte dlouhé názvy produktů i jazykové verze.

Než změníte písmo, zjistěte příčinu prázdného místa

Pokud pod krátkým nadpisem vznikne velká prázdná oblast, zkontrolujte pevné výšky, oddělovací bloky a vnitřní odsazení nadpisu i následující komponenty. Dvě nastavení, která vypadají rozumně samostatně, mohou dohromady vytvořit příliš velkou mezeru. Odstraňte duplicitu místo zmenšení písma, aby prostor působil zaplněně.

Když se sloupce na mobilu skládají pod sebe, ověřte, zda mezi nově svislými bloky nezůstaly oddělovače určené pro zarovnání počítačového zobrazení. Mezerník používaný k zarovnání tlačítek napříč kartami může pod krátkým popisem produktu vytvořit prázdnou oblast. Upřednostněte komponenty, které rostou s obsahem, a pořadí při skládání, jež zachová každý produkt jako jeden celek.

Nejdřív otestujte rychlé čtení, potom celé sdělení

Podívejte se na e-mail na několik sekund a zkuste najít hlavní příslib i akci. Soutěží-li o pozornost příliš mnoho bloků, zjednodušte hierarchii. Potom si přečtěte celý text a zkontrolujte, zda vizuální seskupení odpovídá jeho významu.

Po složení sloupců zkontrolujte úzké zobrazení. Mezery vhodné mezi kartami vedle sebe mohou být při svislém řazení příliš velké. Dobré rozestupy působí záměrně na obou velikostech, aniž spoléhají na pevné zalomení řádků nebo určitou délku textu.

Systém otestujte s nejkratším i nejdelším realistickým obsahem. Krátký titulek nemá nechat tlačítko odpojené a dlouhý se nemá střetnout s cenou. Zahrňte překlad, chybějící nepovinný řádek i produkt bez obrázku. Rozestupy mají zvládnout tyto varianty bez ručního překreslování každé kampaně.

Kontrolu dokončete dvěma průchody: nejprve rychle najděte příslib a akci, potom si ověřte pořadí při úplném čtení. Pokud rozvržení působí klidně, ale akce je několik obrazovek od vysvětlení, ke kterému patří, seskupení stále nefunguje. Dobré odstupy sdělují vztahy mezi prvky ještě předtím, než se zákazník rozhodne číst každou větu.