Опишіть ваш проєкт
Наші спеціалісти звʼяжуться з вами найближчим часом
Надіславши запит, ви отримуєте:
  • Лист чи дзвінок від нашого менеджера
  • Оцінку свого проєкту
  • Особисту зустріч, за необхідності
  • Конфіденційність гарантовано!
maxim_kaschjev
Ваш менеджер
Максим Кащєєв
Із задоволенням відповімо на всі ваші запитання
Задати питання
UX/UI

Особливості дизайну та оформлення email-розсилок

Скільки на день ви отримуєте листів? 10, 50 або більше сотні? З них відкриваються мінімум 5, а тих листів, які запам'ятовуються, і того менше. Як подолати папку "невідсортоване" або навпаки "промо-акції", уникнути потрапляння в "Спам" і домогтися репостів? Ділимося порадами та корисними рекомендаціями в цій статті (всі ілюстрації взяті з сайту Pinterest).

Структура листа та її особливості

Будь-який лист можна умовно розділити на чотири частини: прехедер, "шапка", основний блок або тіло листа і футер. Кожен із них виконує певне завдання і доносить один (максимум 3) меседжі, тому при створенні листа опрацюйте всі блоки окремо з урахуванням таких рекомендацій.

1 Перше враження - верхівка листа.

"Шапка" - перше, на що падає погляд людини, тому приділіть максимум уваги цій частині. Пора довгих текстів минула - тепер у тренді яскраві банери із заголовками, що чіпляють. Заінтригуйте або навіть спровокуйте хльосткою фразою у справі (заклики до дії "Завантаж, спробуй, встигни купити" працюють безвідмовно), а також не забудьте оптимізувати зображення (зменшити вагу і зробити його адаптивним, а більше корисного можна почерпнути зі статті "Особливості email розсилок для Gmail" у блозі eSputnik.

Популярна сучасна практика - об'єднання "шапки" і тіла листа ідеально підходить для тригерних розсилок (лист має вигляд як постер або посадкова сторінка), а ось відеороликами захоплюватися не радимо - великий шанс, що хтось замість очікуваного сюрпризу отримає невиразне посилання. Рішенням стало використання gif-картинок, які додають динаміки - погляд так просто не відведеш.

Кілька слів про прехедер - деякі відмовляються від нього зовсім, оскільки він порушує цілісне сприйняття. Ми рекомендуємо підійти до цього практично.

  • Якщо це лист-знайомство або інформаційна розсилка, використовуйте прехедер за призначенням: додайте довідкової інформації та убезпечте себе від проблем із показом, надавши можливість подивитися лист як окрему web-сторінку.

  • Для тригерних листів або розсилки по базі "дуже лояльних" передплатників підійде варіант без прехедера. Вони і так знайомі з фірмою і знають відправника, тому їх потрібно дивувати чимось таким!

2 Футер

Люди не хочуть витрачати час на те, що їм не цікаво або не несе жодної користі. Саме тому у вас є кілька секунд на те, щоб зацікавити користувача і звести нанівець бажання відписатися (реальний феномен як і банерна сліпота). Найчастіше його роблять на кілька тонів темнішим, ніж решта листа, адже саме там розташовується графа для відписки. Ми ж рекомендуємо робити акцент на цьому блоці хоча б в інформаційних листах, причому реалізувати це можна як обігравши "жаль про розставання", так і розмістивши контактну інформацію з креативною подачею.

3 Про головне наостанок

Тіло листа - основна інформація, яка може бути представлена текстом із зображеннями, блоками або вітриною (залежить від специфіки). Приділіть увагу розташуванню елементів (горизонтально чи вертикально), згадайте про композицію, перспективу та інші терміни з уроків геометрії та малювання. Головне, щоб основний меседж зчитувався, скрізь були красиві та зрозумілі (клікабельні) кнопки, що сприяють здійсненню конверсійних дій. Усі зображення бажано підписувати, а до них обов'язково прив'язувати посилання і прописувати ЧУ. Ви завжди можете скористатися готовими рішеннями, які є в поштових сервісах або звернутися по допомогу до команди дизайнерів-верстальників.

Якщо хочете, щоб ваші листи відкривалися, а розсилки приносили стабільний дохід - робіть як для себе. Зробіть гарний адаптивний лист, напишіть гарний текст і підготуйте унікальну й оригінальну візуалізацію - така робота точно не залишиться без уваги!

Поділіться своєю емоцією від статті
Давайте обговоримо Ваш проєкт
Ми з радістю зробимо безкоштовну оцінку вашого проєкту
Або просто завантажте файл з презентацією або описом
Моісєєв Артем
Business Development Manager
Моісєєв Артем