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

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

Сколько в день вы получаете писем? 10, 50 или больше сотни? Из них открываются минимум 5, а тех писем, которые запоминаются, и того меньше. Как преодолеть папку “неотсортированное” или наоборот “промо-акции”, избежать попадания в “Спам” и добиться репостов? Делимся советами и полезными рекомендациями в этой статье (все иллюстрации взяты с сайта Pinterest).

Структура письма и её особенности

Любое письмо можно условно разделить на четыре части: прехедер, “шапка”, основной блок или тело письма и футер. Каждый из них выполняет определённую задачу и доносит один
(максимум 3) месседжа, поэтому при создании письма проработайте все блоки отдельно с учетом следующих рекомендаций.

1 Первое впечатление — верхушка письма.

“Шапка” — первое, на что падает взгляд человека, поэтому уделите максимум внимания этой части. Пора длинных текстов прошла — теперь в тренде яркие баннеры с цепляющими заголовками. Заинтригуйте или даже спровоцируйте хлесткой фразой по делу (призывы к действию “Скачай, попробуй, успей купить — работают безотказно), а также не забудьте оптимизировать изображение (уменьшить вес и сделать его адаптивным, а больше полезного можно почерпнуть из статьи “Особенности email рассылок для Gmail” в блоге eSputnik

Популярная современная практика — объединение”шапки” и тела письма идеально подходит для триггерных рассылок (письмо смотрится как постер или посадочная страница), а вот видеороликами увлекаться не советуем — велик шанс, что кто-то вместо ожидаемого сюрприза получит невнятную ссылку. Решением стало использование gif-картинок, которые добавляют динамики — взгляд так просто не уведешь.

Пару слов о прехэдере — некоторые отказываются от него вовсе, поскольку он нарушает целостное восприятие. Мы рекомендуем подойти к этому практично.

  • Если это письмо-знакомство или информационная рассылка, используйте прехэдер по назначению: добавьте справочной информации и обезопасьте себя от проблем с показом, предоставив возможность посмотреть письмо как отдельную web-страницу.

  • Для триггерных писем или рассылки по базе “очень лояльных” подписчиков подойдет вариант без прехэдера. Они и так знакомы с фирмой и знают отправителя, поэтому их нужно удивлять чем-нибудь эдаким!

2 Футер

Люди не хотят тратить время на то, что им не интересно или не несет никакой пользы. Именно поэтому у вас есть несколько секунд на то, чтобы заинтересовать пользователя и свести на нет желание отписаться (реальный феномен как и баннерная слепота). Зачастую его делают на несколько тонов темнее, чем остальное письмо, ведь именно там располагается графа для отписки. Мы же рекомендуем делать акцент на этом блоке хотя бы в информационных письмах, причем реализовать это можно как обыграв “сожаление о расставании”, так и разместив контактную информацию с креативной подачей.

3 О главном напоследок

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

Если хотите, чтобы ваши письма открывались, а рассылки приносили стабильный доход — делайте как для себя. Сделайте красивое адаптивное письмо, напишите хороший текст и подготовьте уникальную и оригинальную визуализацию — такая работа точно не останется без внимания!

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