Интервью Crello: 6 Правил оформления контента в email-рассылках

Если вы устали читать о конверсии, трекинге и доставляемости писем, предлагаю поговорить о наполнении ваших email-рассылок, а точнее – об оформлении. Допустим, вы определились с маркетинговыми целями кампании и у вас есть приблизительный текст и картинки. Как разместить их в теле письма так, чтобы письмо оказалось эффективным?

  Секретами по дизайну и практическими наблюдениями в области имейл-маркетинга с нами сегодня поделится Мария Иванова:

   - психолог,

   - автор статей о дизайне 

   - участник маркетинговой команды графического редактора Crello.

6 правил оформления контента в имейлах

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

Приведенные правила не претендуют на абсолютность, но они помогут вам оформить контент эффективно. Кстати, хорошее понимание перечисленных ниже принципов также поможет эти самые правила креативно нарушать;)

Правило 1. Четкая структура

Если верить Litmus, большинство получателей потратят на просмотр вашего сообщения около 11 секунд. За это время вам нужно объяснить пользователю цель сообщения, сформировать потребность и призвать к действию.

Хорошо структурированный контент понимается получателем мгновенно – проскролив сообщение, даже не тормозя колесико мышки, ваш подписчик уже должен быть в курсе вашего основного посыла. Разбейте контент на логические куски и подберите точные подзаголовки. Так получатель сможет ознакомиться с письмом бегло.
 

«Дарим -$40 на осеннюю коллекцию», «Три топ статьи месяца», «-30% на месячный абонемент в любой спортзал» – эти заголовки не претендуют на звание литературных шедевров, зато из них понятен смысл сообщения. Помните, что ваши подписчики открывают письма не в поиске словесных изысков или броских картинок, а надеясь получить выгоду (скидки, промокоды) или удовольствие (развлекательный контент).

Правило 2. Фокус на призыве к действию

В учебниках пишут, что хорошее маркетинговое письмо имеет структуру пирамиды. Я предложу альтернативную метафору – хорошее маркетинговое письмо похоже на хорошо сфокусированную фотографию. Удачно выставленный фокус может менять место в структуре письма (или фото), но он обязательно должен присутствовать, причем в удобном для получателя месте.

«Письма с кнопкой на первом экране – наше золотое правило,» – делится моя коллега, имейл-маркетолог Depositphotos и проекта Crello Марина Шинкаренко.

«Почти треть кликов в дайджесте Crello за август пришлись на первую кнопку CTA. Подобные цифры мы видим практически в каждой рассылке,»

– Марина Шинкаренко.

Не всякий получатель проскролит ваше письмо дальше первого экрана, поэтому поставьте призыв к действию повыше, а еще – выделите красным. Многим красная кнопка покажется предсказуемым решением, но красный стимулирует нервную систему и быстрее повлечет за собой действие, чем более спокойные расцветки. К примеру, A/B тест HubSpot показал, что на красную кнопку CTA нажмут на 21% чаще, чем на зеленую.

Правило 3. Простой дизайн

Оформите ваш контент максимально просто и понятно – не нужно использовать замысловатые конструкции или визуальные решения только лишь ради того, чтобы показаться оригинальным. Лучше сделать ваше письмо понятным и легко читаемым, чем необычным, но запутанным.

Какие дизайн-решения стоит применить к контенту для вашего письма?

• повторяющиеся элементы,

• белое пространство,

• популярные шрифты,

• только нужные картинки.

Остановимся на каждом из пунктов поподробнее.

1) Повторяющиеся элементы дизайна

Визуально поддержат смысловую структуру письма – так пользователю легче будет сканировать контент и не придется тратить время на осмысление разных элементов оформления. Поиск заголовков или кнопок со ссылками займет доли секунды и не утомит читателя. Повторение в дизайне письма позволит пропустить все неинтересные части сообщения и быстро найти информацию, которая будет больше всего полезна получателю.

Как объединить в целое коллекцию разноплановых элементов? Фотобанк Depositphotos использует похожий стиль заголовков, кнопок и закругленные углы:

2) Больше воздуха

Белое пространство в дизайне пользователь воспринимает как пустоту. Оно служит нейтральным фоном для вашего контента и позволяет построить иерархию в поданной информации. Рассмотрим этот отрывок рассылки Medium за 6 сентября:
 

Текст письма оформлен в понятные блоки, а само сообщение будто дышит за счет всего белого пространства вокруг.

3) Стандартные шрифты

Использование набора шрифтов, которые есть в сервисах рассылок – это гарантия корректного отображения текста. Редкие или сложные шрифты не поддерживаются многими почтовыми сервисами, поэтому от них стоит отказаться, даже если они есть в бренд буке вашей компании. Самый популярный шрифт в имейлах – Arial. Он везде отобразится корректно.

Можно для каждого девайса поставить свой шрифт – к примеру, пользователи Apple привыкли к шрифту San Francisco, Android – к Roboto, юзерам на Windows 10 можем показать шрифт Helvetica, а всем остальным – Arial. Для этого верстаем в письмо такую конструкцию: “font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;”.

 
4) Изображения

Картинки увеличивают время загрузки вашего письма, а пока письмо загружается, пользователь может передумать его читать. Не перегружайте письмо активными/яркими фонами, иконками или дизайнерскими элементами просто для декора. Если фото или видео - не ваш продукт, ограничьте иллюстрации в ваших рассылках до минимума. 

Иногда картинки не нужны вообще. Вот пример от Really Good Emails:

Это – транзакционный имейл, чья задача – быстро и четко оповестить юзера о действии. Картинки в таком письме будут там только отвлекать. С другой стороны, письмо о распродаже онлайн магазина нельзя оставить без иллюстраций – то есть все зависит от цели и типа письма. Подобное письмо только с текстом (plain text) может быть основной версией вашей рассылки или запасной – для пользователей, у которых не отобразится ваша HTML-версия.

Если радикальный минимализм вам все-таки не по вкусу, сделайте красивый хедер в тему вашему сообщению, добавьте лого и/или слоган. Удобные шаблоны для них можно подобрать в графическом редакторе Crello. Вот какой хедер мы создали для рассылки на тему «6 Правил оформления контента в имейлах»:

Правило 4. Хорошая читабельность

Если хотите, чтобы ваш имейл действительно прочитали, уберите все препятствия на пути получателя – сделайте текст контрастным и избегайте необычного стиля оформления. Черный текст на белом фоне – классика, от которой не стоит отказываться. Благодаря максимальной контрастности, такой текст читается легче всего.

С этой же целью стоит избегать использования ярких картинок в хедере письма – на них текст затеряется и вряд ли будет прочитан. Чтобы акцент держался именно на тексте, затемните или уменьшите контрастность изображения, как этом шаблоне Crello:

Еще читабельность снижают необычные подходы к оформлению текстовых блоков – разбивка текста на блоки по вертикали или зигзагообразное их оформление (когда картинка то справа, то слева, а текст, соответственно, также перескакивает с одной стороны страницы на другую). Оба варианта затрудняют чтение, прерывая привычный способ восприятия информации человеком слева направо.

Правильно оформляйте блоки с картинками – чтобы было понятно, куда относится ваш текст. «К верхней картинке или нижней?» – не заставляйте думать об этом пользователей, у них и так немного времени:)

Правило 5. Версия для мобильных

Помните красочную рассылку фотобанка Depositphotos из Правила 3. Простой дизайн? Каждый седьмой получатель просмотрел ее на мобильном устройстве.

«У нас не самые высокие показатели просмотра писем на мобильных устройствах, так как наш сервис ориентирован на десктопного пользователя,»

– имейл-маркетолог компании Максим Сергиенко.

«Я слежу за новостями рынка на Litmus, и по их данным, в июне 2018-го 46% писем были открыты на мобильных устройствах,» – добавляет он.

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

• создайте отдельный дизайн специально для мобильных или увеличьте шрифт,

• уменьшите ширину и упростите структуру основного письма (например, уберите столбцы).
   

Правило 6. Наличие кнопки «Отписаться»

Каждый день в мою папку Промоакции приходит больше десятка рассылок – на большинство я подписалась сама, но это не останавливает меня регулярно от них отписываться. Сначала ищу в надоевшем письме кнопку “Отписаться”, если ее нет или даже после нажатия письма неумолимо продолжают приходить, уже с некоторым раздражением жму “Сообщить о спаме”.

Обязательно предложите вашим подписчикам возможность отписки от рассылки в конце каждого письма. Не стоит эту кнопку делать броской и крупной, но ее наличие – вежливость и уважение к подписчикам. Более того, это поможет избежать массовых жалоб на спам пользователей своим почтовым сервисам. Такие жалобы снижают доставляемость ваших писем в будущем, поэтому не пренебрегайте этим пунктом имейл-этикета. 

Product Hunt подошел к вопросу особенно удачно. Сервис заканчивает письма предложением получать письма только раз в неделю или отказаться от рассылки полностью:
 

В завершение

Оформляйте ваши письма не так, «чтоб красиво», а так, чтобы удобно и понятно подписчикам – декоративные элементы письма не должны затенять комфорт восприятия контента. Только в таком случае ваша продуманно поданная информация подойдет получателю, как ложка к обеду.

Напоследок, к каждому из правил приведу материал для дальнейшего ознакомления:

• Правило 1. Четкая структура: Краткость – сестра таланта. Правила этикета при составлении текста письма

• Правило 2. Фокус на призыве к действию: CTA: 10 лучших практик, которые не подведут

• Правило 3. Простой дизайн: Design vs Email. Секреты красивых email-рассылок

• Правило 4. Хорошая читабельность: 21 удачный пример использования фоновых картинок

• Правило 5. Версия для мобильных: Адаптивность письма. О чем следует помнить?

• Правило 6. Наличие кнопки “Отписаться”: Элементы писем: футер